From f49c071f043862109fd4cd4ed81a16b2845fb53f Mon Sep 17 00:00:00 2001
From: "dilan.dogan2" <dilan.dogan2@trendyol.com>
Date: Wed, 6 Nov 2024 15:39:00 +0300
Subject: [PATCH 1/7] feat(tag-component): tag component adr

---
 src/components/tag/doc/ADR.md | 66 +++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/components/tag/doc/ADR.md

diff --git a/src/components/tag/doc/ADR.md b/src/components/tag/doc/ADR.md
new file mode 100644
index 00000000..064f152e
--- /dev/null
+++ b/src/components/tag/doc/ADR.md
@@ -0,0 +1,66 @@
+## Figma Design Document
+
+https://www.figma.com/design/lSvX6Qe0jc8b4CaIK7egXR/Baklava-Component-Library?node-id=21476-4839&node-type=frame&t=PriuJR3qmpVaFIdy-0
+
+## Implementation
+
+General usage example:
+
+```html
+<bl-tag>In Progress</bl-tag>
+```
+
+### Usage Examples
+Selectable variant usage:
+```html
+<bl-tag @bl-tag-click="handleTagClick" selected>Selectable tag</bl-tag>
+```
+The removable variant can be set like this:
+
+```js
+
+const handleTagClick=(event)=>{
+   tags.filter((tag)=>tag.value!==event.value)
+}
+<bl-tag variant="removable" @bl-tag-click="handleTagClick">Removable tag</bl-tag>
+```
+
+The icon can be set like this:
+
+```html
+<bl-tag icon="info">Default</bl-tag>
+```
+
+The size and disabled attributes can be set like this:
+
+```html
+<bl-tag size="large" disabled>In Progress</bl-tag>
+```
+
+## API Reference:
+
+#### Slots
+
+| Name        | Description     | Default Content |
+|-------------|-----------------| --------------- |
+| `icon` slot | Icon of the tag | - |
+
+#### Attributes
+
+| Attribute            | Description                                   | Default Value |
+|----------------------|-----------------------------------------------|---------------|
+| size (`string`)      | Size of tag(`small`,`medium`,`large`)         | medium        |
+| icon (`bl-icon`)     | Name of the icon that will be shown in tag    | -             |
+| variant (`string`)   | Variants of the tag(`selectable`,`removable`) | selectable    |
+| disabled (`boolean`) | Makes tag disabled                            | false         |
+| selected (`boolean`) | Makes tag selected                            | false         |
+| value (`string`)     | Sets tags value                               | -             |
+
+
+
+### Events
+
+| Name           | Description                | Payload                           |
+|----------------|----------------------------|-----------------------------------|
+| `bl-tag-click` | Fires when tag is clicked  | `{value:string,selected:boolean}` |
+

From c76244cc7843e503e61a7c90d2ab16ddc96a0231 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Tue, 17 Dec 2024 17:40:05 +0300
Subject: [PATCH 2/7] feat(tag): create tag component

---
 commitlint.config.cjs         |   1 +
 scripts/build.js              | 112 ++++++++++++++++++----------------
 src/baklava.ts                |   1 +
 src/components/tag/bl-tag.css |  93 ++++++++++++++++++++++++++++
 src/components/tag/bl-tag.ts  | 103 +++++++++++++++++++++++++++++++
 5 files changed, 258 insertions(+), 52 deletions(-)
 create mode 100644 src/components/tag/bl-tag.css
 create mode 100644 src/components/tag/bl-tag.ts

diff --git a/commitlint.config.cjs b/commitlint.config.cjs
index 515a25f7..3c2eafa4 100644
--- a/commitlint.config.cjs
+++ b/commitlint.config.cjs
@@ -36,6 +36,7 @@ module.exports = {
         "calendar",
         "table",
         "split-button",
+        "tag",
       ],
     ],
   },
diff --git a/scripts/build.js b/scripts/build.js
index bd13ba52..ca3cf8f4 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -1,34 +1,46 @@
-import { context, build } from 'esbuild';
-import parseArgs from 'minimist';
-import CleanCSS from 'clean-css';
-import del from 'del';
-import { litCssPlugin } from 'esbuild-plugin-lit-css';
+import del from "del";
+import { context, build } from "esbuild";
+import parseArgs from "minimist";
+import CleanCSS from "clean-css";
+import { litCssPlugin } from "esbuild-plugin-lit-css";
 
 const args = parseArgs(process.argv.slice(2), {
   boolean: true,
 });
 
 (async () => {
-  const { globby } = await import('globby');
-  const destinationPath = 'dist';
+  const { globby } = await import("globby");
+  const destinationPath = "dist";
   const isRelease = process.env.RELEASE || false;
 
   /* This is for using inside Storybook for demonstration purposes. */
-  const cssHoverClassAdder = (content) => content.replace(/.*:hover[^{]*/g, matched => {
-    // Replace :hover with special class. (There will be additional classes for focus, etc. Should be implemented in here.)
-    const replacedWithNewClass = matched.replace(/:hover/, '.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__')
-    // Concat strings
-    return replacedWithNewClass.concat(', ', matched);
-  });
-
-  const cssCleaner = (content) => {
-    const { styles, errors, warnings } = new CleanCSS({ level: 0 }).minify(content);
+  const cssHoverClassAdder = content =>
+    content.replace(/.*:hover[^{]*/g, matched => {
+      // Replace :hover with special class. (There will be additional classes for focus, etc. Should be implemented in here.)
+      const replacedWithNewClass = matched.replace(
+        /:hover/,
+        ".__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__"
+      );
+      // Concat strings
+      return replacedWithNewClass.concat(", ", matched);
+    });
+
+  const cssCleaner = content => {
+    const { styles, errors, warnings } = new CleanCSS({ level: 2 }).minify(content);
     if (errors.length) {
-      console.error(errors);
+      console.error({
+        errors,
+        styles: JSON.stringify(styles),
+      });
     }
+
     if (warnings.length) {
-      console.warn(warnings);
+      console.warn({
+        warnings,
+        styles: JSON.stringify(styles),
+      });
     }
+
     return styles;
   };
 
@@ -43,57 +55,53 @@ const args = parseArgs(process.argv.slice(2), {
 
   const cssPluginOptions = {
     filter: /components\/.*\.css$/,
-    transform: (content) => cssTransformers.reduce((result, transformer) => transformer(result), content)
+    transform: content =>
+      cssTransformers.reduce((result, transformer) => transformer(result), content),
   };
 
   try {
     const buildOptions = {
       entryPoints: [
-        'src/baklava.ts',
-        'src/baklava-react.ts',
-        'src/localization.ts',
+        "src/baklava.ts",
+        "src/baklava-react.ts",
+        "src/localization.ts",
         ...(await globby([
-          'src/generated/**/*.ts',
-          'src/components/**/!(*.(test|d)).ts',
-          'src/themes/*.css',
-          'src/components/**/*.svg',
+          "src/generated/**/*.ts",
+          "src/components/**/!(*.(test|d)).ts",
+          "src/themes/*.css",
+          "src/components/**/*.svg",
         ])),
       ],
       loader: {
-        '.woff': 'file',
-        '.woff2': 'file',
-        '.svg': 'file',
+        ".woff": "file",
+        ".woff2": "file",
+        ".svg": "file",
       },
       outdir: destinationPath,
-      assetNames: 'assets/[name]',
+      assetNames: "assets/[name]",
       bundle: true,
       sourcemap: true,
-      format: 'esm',
-      target: ['es2020', 'chrome73', 'edge79', 'firefox63', 'safari12'],
+      format: "esm",
+      target: ["es2020", "chrome73", "edge79", "firefox63", "safari12"],
       splitting: true,
       metafile: true,
       minify: true,
-      external: ['react'],
-      plugins: [
-        litCssPlugin(cssPluginOptions),
-      ],
+      external: ["react"],
+      plugins: [litCssPlugin(cssPluginOptions)],
     };
 
-
     if (args.serve) {
-      const servedir = 'playground';
+      const servedir = "playground";
 
       let ctx = await context({
         ...buildOptions,
-        outdir: `${servedir}/dist`
+        outdir: `${servedir}/dist`,
       });
 
-      const { host, port } = await ctx.serve(
-        {
-          servedir,
-          host: 'localhost',
-        }
-      );
+      const { host, port } = await ctx.serve({
+        servedir,
+        host: "localhost",
+      });
 
       console.log(`Playground is served on http://${host}:${port}`);
 
@@ -104,12 +112,12 @@ const args = parseArgs(process.argv.slice(2), {
 
     if (errors.length > 0) {
       console.table(errors);
-      console.error('Build Failed!');
+      console.error("Build Failed!");
       return;
     }
 
     if (warnings.length > 0) {
-      console.warn('Warnings:');
+      console.warn("Warnings:");
       console.table(warnings);
     }
 
@@ -122,19 +130,19 @@ const args = parseArgs(process.argv.slice(2), {
       .filter(
         ({ fileName }) =>
           !/icon\/icons\/.*\.js/.test(fileName) &&
-          (fileName.endsWith('.js') || fileName.endsWith('.css'))
+          (fileName.endsWith(".js") || fileName.endsWith(".css"))
       );
 
     analyzeResult.push({
-      fileName: 'TOTAL',
+      fileName: "TOTAL",
       size: `${(analyzeResult.reduce((acc, { bytes }) => acc + bytes, 0) / 1024).toFixed(2)} KB`,
-    })
+    });
 
     del(`${destinationPath}/components/icon/icons`);
 
-    console.table(analyzeResult, ['fileName', 'size']);
+    console.table(analyzeResult, ["fileName", "size"]);
 
-    console.info('Build Done!');
+    console.info("Build Done!");
   } catch (error) {
     console.error(error);
     process.exit(1);
diff --git a/src/baklava.ts b/src/baklava.ts
index 72f1a5f8..696a10c8 100644
--- a/src/baklava.ts
+++ b/src/baklava.ts
@@ -36,4 +36,5 @@ export { default as BlTableHeaderCell } from "./components/table/table-header-ce
 export { default as BlTableCell } from "./components/table/table-cell/bl-table-cell";
 export { default as BlSplitButton } from "./components/split-button/bl-split-button";
 export { default as BlCalendar } from "./components/calendar/bl-calendar";
+export { default as BlTag } from "./components/tag/bl-tag";
 export { getIconPath, setIconPath } from "./utilities/asset-paths";
diff --git a/src/components/tag/bl-tag.css b/src/components/tag/bl-tag.css
new file mode 100644
index 00000000..c02fd86c
--- /dev/null
+++ b/src/components/tag/bl-tag.css
@@ -0,0 +1,93 @@
+:host {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.tag {
+  --bg-color: var(--bl-color-neutral-full);
+  --color: var(--bl-color-neutral-darker);
+  --font: var(--bl-font-title-4-medium);
+  --padding-vertical: var(--bl-size-2xs);
+  --padding-horizontal: var(--bl-size-m);
+  --margin-icon: var(--bl-size-2xs);
+  --icon-size: var(--bl-size-m);
+  --height: var(--bl-size-2xl);
+  --border-radius: var(--bl-size-m);
+
+  display: flex;
+  gap: var(--margin-icon);
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--bl-color-neutral-lighter);
+  border-radius: var(--border-radius);
+  padding: var(--padding-vertical) var(--padding-horizontal);
+  background-color: var(--bg-color);
+  color: var(--color, white);
+  font: var(--font);
+  font-kerning: none;
+  height: var(--height);
+}
+
+:host([variant="selectable"]) .tag {
+  cursor: pointer;
+}
+
+:host([variant="selectable"]) .tag:hover {
+  background-color: var(--bl-color-neutral-lightest);
+}
+
+:host([variant="selectable"][selected]) .tag {
+  border-color: var(--bl-color-neutral-darker);
+  background-color: var(--bl-color-neutral-darker);
+  color: var(--bl-color-neutral-full);
+}
+
+:host([disabled]) {
+  pointer-events: none;
+}
+
+:host([disabled]) .tag {
+  background-color: var(--bl-color-neutral-lightest);
+  border-color: var(--bl-color-neutral-lightest);
+  color: var(--bl-color-neutral-light);
+}
+
+.remove-button {
+  all: unset;
+  font-size: var(--bl-size-s);
+  padding: var(--bl-size-3xs);
+  border-radius: var(--bl-border-radius-circle);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.remove-button:hover {
+  background-color: var(--bl-color-neutral-lightest);
+}
+
+:host([size="small"]) .tag {
+  --font: var(--bl-font-title-4-medium);
+  --height: var(--bl-size-xl);
+  --icon-size: var(--bl-size-s);
+  --border-radius: var(--bl-size-xs);
+  --padding-vertical: var(--bl-size-3xs);
+  --padding-horizontal: var(--bl-size-2xs);
+}
+
+:host([size="large"]) .tag {
+  --font: var(--bl-font-title-3-medium);
+  --padding-vertical: var(--bl-size-2xs);
+  --padding-horizontal: var(--bl-size-l);
+  --height: var(--bl-size-3xl);
+  --icon-size: var(--bl-size-m);
+  --border-radius: var(--bl-size-l);
+}
+
+/* TODO: çalışmıyor */
+:host ::slotted(bl-icon) {
+  font-size: var(--icon-size);
+}
diff --git a/src/components/tag/bl-tag.ts b/src/components/tag/bl-tag.ts
new file mode 100644
index 00000000..8e3a92d0
--- /dev/null
+++ b/src/components/tag/bl-tag.ts
@@ -0,0 +1,103 @@
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { event, EventDispatcher } from "../../utilities/event";
+import "../icon/bl-icon";
+import { BaklavaIcon } from "../icon/icon-list";
+import style from "./bl-tag.css";
+
+export type TagSize = "small" | "medium" | "large";
+type TagVariant = "selectable" | "removeable";
+
+/**
+ * @tag bl-tag
+ * @summary Baklava Tag component
+ */
+
+@customElement("bl-tag")
+export default class BlTag extends LitElement {
+  static get styles(): CSSResultGroup {
+    return [style];
+  }
+
+  @state() private _actionElement: HTMLElement | null = null;
+  @query(".remove-button") removeButton!: HTMLButtonElement;
+
+  /**
+   * Sets the tag size
+   */
+  @property({ type: String, reflect: true })
+  size: TagSize = "medium";
+
+  @property({ type: String, reflect: true })
+  variant: TagVariant = "selectable";
+
+  @property({ type: Boolean, reflect: true })
+  selected = false;
+
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  @property({ type: String, reflect: true })
+  value: string | null = null;
+
+  @event("bl-tag-click") _onBlTagClick: EventDispatcher<{
+    value: string | null;
+    selected: boolean;
+  }>;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    this._actionElement?.addEventListener("click", this.handleClick);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    this._actionElement?.removeEventListener("click", this.handleClick);
+  }
+
+  private handleClick() {
+    console.log(this._actionElement);
+
+    if (this.variant === "selectable") this.selected = !this.selected;
+    this._onBlTagClick({ selected: this.selected, value: this.value });
+  }
+
+  /**
+   * Sets the name of the icon
+   */
+  @property({ type: String })
+  icon?: BaklavaIcon;
+
+  render(): TemplateResult {
+    const icon = this.icon
+      ? html`
+          <slot name="icon">
+            <bl-icon name=${this.icon}></bl-icon>
+          </slot>
+        `
+      : "";
+
+    const removeButton =
+      this.variant === "removeable"
+        ? html`
+            <div role="button" type="button" class="remove-button">
+              <bl-icon name="close"></bl-icon>
+            </div>
+          `
+        : "";
+
+    return html`<button type="button" class="tag">
+      ${icon}
+      <slot></slot>
+      ${removeButton}
+    </button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "bl-tag": BlTag;
+  }
+}

From 3821fcd975e68d4f1fee28fe8d695b118ad68289 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Thu, 26 Dec 2024 16:30:35 +0300
Subject: [PATCH 3/7] feat(tag): update tag element styles

---
 src/components/tag/bl-tag.css         |  46 +++++-----
 src/components/tag/bl-tag.stories.mdx | 118 ++++++++++++++++++++++++++
 src/components/tag/bl-tag.ts          |  54 +++++-------
 3 files changed, 166 insertions(+), 52 deletions(-)
 create mode 100644 src/components/tag/bl-tag.stories.mdx

diff --git a/src/components/tag/bl-tag.css b/src/components/tag/bl-tag.css
index c02fd86c..75240ccd 100644
--- a/src/components/tag/bl-tag.css
+++ b/src/components/tag/bl-tag.css
@@ -13,6 +13,7 @@
   --icon-size: var(--bl-size-m);
   --height: var(--bl-size-2xl);
   --border-radius: var(--bl-size-m);
+  --remove-icon-size: var(--bl-size-s);
 
   display: flex;
   gap: var(--margin-icon);
@@ -22,7 +23,8 @@
   width: 100%;
   border: 1px solid var(--bl-color-neutral-lighter);
   border-radius: var(--border-radius);
-  padding: var(--padding-vertical) var(--padding-horizontal);
+  padding-block: var(--padding-vertical);
+  padding-inline: var(--padding-horizontal);
   background-color: var(--bg-color);
   color: var(--color, white);
   font: var(--font);
@@ -32,6 +34,7 @@
 
 :host([variant="selectable"]) .tag {
   cursor: pointer;
+  user-select: none;
 }
 
 :host([variant="selectable"]) .tag:hover {
@@ -41,32 +44,22 @@
 :host([variant="selectable"][selected]) .tag {
   border-color: var(--bl-color-neutral-darker);
   background-color: var(--bl-color-neutral-darker);
-  color: var(--bl-color-neutral-full);
+
+  --color: var(--bl-color-neutral-full);
 }
 
-:host([disabled]) {
+:host([variant="selectable"][disabled]) {
   pointer-events: none;
 }
 
-:host([disabled]) .tag {
+:host([variant="selectable"][disabled]) .tag {
   background-color: var(--bl-color-neutral-lightest);
   border-color: var(--bl-color-neutral-lightest);
   color: var(--bl-color-neutral-light);
 }
 
-.remove-button {
-  all: unset;
-  font-size: var(--bl-size-s);
-  padding: var(--bl-size-3xs);
-  border-radius: var(--bl-border-radius-circle);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.remove-button:hover {
-  background-color: var(--bl-color-neutral-lightest);
+:host([variant="removeable"]) .remove-button {
+  --bl-border-radius-m: var(--bl-size-m);
 }
 
 :host([size="small"]) .tag {
@@ -74,8 +67,9 @@
   --height: var(--bl-size-xl);
   --icon-size: var(--bl-size-s);
   --border-radius: var(--bl-size-xs);
-  --padding-vertical: var(--bl-size-3xs);
+  --padding-vertical: 0px;
   --padding-horizontal: var(--bl-size-2xs);
+  --remove-icon-size: var(--bl-size-xs);
 }
 
 :host([size="large"]) .tag {
@@ -87,7 +81,19 @@
   --border-radius: var(--bl-size-l);
 }
 
-/* TODO: çalışmıyor */
-:host ::slotted(bl-icon) {
+:host([variant="removeable"][size="small"]) .tag {
+  --padding-horizontal: var(--bl-size-2xs) 0px;
+}
+
+:host([variant="removeable"]) .tag {
+  --padding-horizontal: var(--bl-size-m) var(--bl-size-3xs);
+}
+
+:host([variant="removeable"][size="large"]) .tag {
+  --padding-horizontal: var(--bl-size-l) var(--bl-size-2xs);
+}
+
+slot[name="icon"] bl-icon {
   font-size: var(--icon-size);
+  color: var(--color);
 }
diff --git a/src/components/tag/bl-tag.stories.mdx b/src/components/tag/bl-tag.stories.mdx
new file mode 100644
index 00000000..3060e7cf
--- /dev/null
+++ b/src/components/tag/bl-tag.stories.mdx
@@ -0,0 +1,118 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+<Meta
+  title="Components/Tag"
+  component="bl-tag"
+  argTypes={{
+    variant: {
+      options: ['selectable', 'removeable'],
+      control: { type: 'select' }
+    },
+    size: {
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' }
+    },
+    icon: {
+      control: 'text'
+    },
+    selected: {
+      control: 'boolean'
+    },
+    disabled: {
+      control: 'boolean'
+    },
+    value: {
+      control: 'text'
+    }
+  }}
+/>
+
+export const Template = (args) => html`
+  <bl-tag
+    variant=${ifDefined(args.variant)}
+    size=${ifDefined(args.size)}
+    icon=${ifDefined(args.icon)}
+    value=${ifDefined(args.value)}
+    ?selected=${args.selected}
+    ?disabled=${args.disabled}
+  >
+    ${args.content}
+  </bl-tag>
+`;
+
+# Tag
+
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpuIy4vwuTlDeKN/Baklava-Design-Guide)</bl-badge>
+
+Tags are compact elements that represent an input, attribute, or action.
+
+## Basic Usage
+
+Tags can be used to label, categorize, or organize items using keywords.
+
+<Canvas>
+  <Story name="Default" args={{ content: 'Default Tag' }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Variants
+
+Tags come in two variants: selectable and removeable.
+
+<Canvas>
+  <Story name="Variants">
+    {html`
+      <bl-tag variant="selectable">Selectable Tag</bl-tag>
+      <bl-tag variant="removeable">Removeable Tag</bl-tag>
+    `}
+  </Story>
+</Canvas>
+
+## Sizes
+
+Tags are available in three sizes: small, medium (default), and large.
+
+<Canvas>
+  <Story name="Sizes">
+    {html`
+      <bl-tag size="small">Small</bl-tag>
+      <bl-tag size="medium">Medium</bl-tag>
+      <bl-tag size="large">Large</bl-tag>
+    `}
+  </Story>
+</Canvas>
+
+## With Icons
+
+Tags can include icons to provide additional visual context.
+
+<Canvas>
+  <Story name="With Icons">
+    {html`
+      <bl-tag icon="info">Info Tag</bl-tag>
+      <bl-tag variant="removeable" icon="heart_fill" disabled>Removeable Tag Icon</bl-tag>
+    `}
+  </Story>
+</Canvas>
+
+## States
+
+Tags can be selected or disabled.
+
+<Canvas>
+  <Story name="States">
+    {html`
+      <bl-tag variant="selectable" selected>Selected Tag</bl-tag>
+      <bl-tag disabled>Disabled Tag</bl-tag>
+      <bl-tag variant="selectable" selected disabled>Selected Disabled Tag</bl-tag>
+      <bl-tag variant="removeable" disabled>Disabled Removeable Tag</bl-tag>
+    `}
+  </Story>
+</Canvas>
+
+## Reference
+
+<ArgsTable of="bl-tag" />
diff --git a/src/components/tag/bl-tag.ts b/src/components/tag/bl-tag.ts
index 8e3a92d0..3d875f08 100644
--- a/src/components/tag/bl-tag.ts
+++ b/src/components/tag/bl-tag.ts
@@ -1,6 +1,8 @@
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { customElement, property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { event, EventDispatcher } from "../../utilities/event";
+import "../button/bl-button";
 import "../icon/bl-icon";
 import { BaklavaIcon } from "../icon/icon-list";
 import style from "./bl-tag.css";
@@ -19,7 +21,6 @@ export default class BlTag extends LitElement {
     return [style];
   }
 
-  @state() private _actionElement: HTMLElement | null = null;
   @query(".remove-button") removeButton!: HTMLButtonElement;
 
   /**
@@ -40,29 +41,15 @@ export default class BlTag extends LitElement {
   @property({ type: String, reflect: true })
   value: string | null = null;
 
-  @event("bl-tag-click") _onBlTagClick: EventDispatcher<{
+  @event("bl-tag-click") private _onBlTagClick: EventDispatcher<{
     value: string | null;
     selected: boolean;
   }>;
 
-  connectedCallback(): void {
-    super.connectedCallback();
-
-    this._actionElement?.addEventListener("click", this.handleClick);
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-
-    this._actionElement?.removeEventListener("click", this.handleClick);
-  }
-
-  private handleClick() {
-    console.log(this._actionElement);
-
+  private handleClick = () => {
     if (this.variant === "selectable") this.selected = !this.selected;
     this._onBlTagClick({ selected: this.selected, value: this.value });
-  }
+  };
 
   /**
    * Sets the name of the icon
@@ -71,28 +58,31 @@ export default class BlTag extends LitElement {
   icon?: BaklavaIcon;
 
   render(): TemplateResult {
-    const icon = this.icon
-      ? html`
-          <slot name="icon">
-            <bl-icon name=${this.icon}></bl-icon>
-          </slot>
-        `
-      : "";
+    const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : "";
 
     const removeButton =
       this.variant === "removeable"
         ? html`
-            <div role="button" type="button" class="remove-button">
-              <bl-icon name="close"></bl-icon>
-            </div>
+            <bl-button
+              icon="close"
+              variant="tertiary"
+              kind="neutral"
+              class="remove-button"
+              ?disabled=${this.disabled}
+              @bl-click=${this.handleClick}
+            ></bl-button>
           `
         : "";
 
-    return html`<button type="button" class="tag">
-      ${icon}
+    return html`<div
+      class="tag"
+      @click=${this.variant === "selectable" ? this.handleClick : undefined}
+      role=${ifDefined(this.variant === "selectable" ? "checkbox" : undefined)}
+    >
+      <slot name="icon">${icon}</slot>
       <slot></slot>
       ${removeButton}
-    </button>`;
+    </div>`;
   }
 }
 

From 9f3c260eb822a054ebcd47daf36668bd31932a09 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Thu, 26 Dec 2024 16:41:49 +0300
Subject: [PATCH 4/7] docs(tag): add adr link to storybook

---
 src/components/tag/bl-tag.stories.mdx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/tag/bl-tag.stories.mdx b/src/components/tag/bl-tag.stories.mdx
index 3060e7cf..f48b45d0 100644
--- a/src/components/tag/bl-tag.stories.mdx
+++ b/src/components/tag/bl-tag.stories.mdx
@@ -44,6 +44,7 @@ export const Template = (args) => html`
 
 # Tag
 
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/pull/955)</bl-badge>
 <bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpuIy4vwuTlDeKN/Baklava-Design-Guide)</bl-badge>
 
 Tags are compact elements that represent an input, attribute, or action.
@@ -93,7 +94,7 @@ Tags can include icons to provide additional visual context.
   <Story name="With Icons">
     {html`
       <bl-tag icon="info">Info Tag</bl-tag>
-      <bl-tag variant="removeable" icon="heart_fill" disabled>Removeable Tag Icon</bl-tag>
+      <bl-tag variant="removeable" icon="heart_fill">Removeable Tag Icon</bl-tag>
     `}
   </Story>
 </Canvas>

From 02ebe7537f928b5c9510866748c3528a5110ac3b Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Thu, 26 Dec 2024 16:50:56 +0300
Subject: [PATCH 5/7] feat(tag): dynamically set size of remove button

---
 src/components/tag/bl-tag.css         | 2 +-
 src/components/tag/bl-tag.stories.mdx | 3 +++
 src/components/tag/bl-tag.ts          | 2 ++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/tag/bl-tag.css b/src/components/tag/bl-tag.css
index 75240ccd..67ffa135 100644
--- a/src/components/tag/bl-tag.css
+++ b/src/components/tag/bl-tag.css
@@ -59,7 +59,7 @@
 }
 
 :host([variant="removeable"]) .remove-button {
-  --bl-border-radius-m: var(--bl-size-m);
+  --bl-border-radius-m: var(--bl-border-radius-circle);
 }
 
 :host([size="small"]) .tag {
diff --git a/src/components/tag/bl-tag.stories.mdx b/src/components/tag/bl-tag.stories.mdx
index f48b45d0..1190dfd2 100644
--- a/src/components/tag/bl-tag.stories.mdx
+++ b/src/components/tag/bl-tag.stories.mdx
@@ -82,6 +82,9 @@ Tags are available in three sizes: small, medium (default), and large.
       <bl-tag size="small">Small</bl-tag>
       <bl-tag size="medium">Medium</bl-tag>
       <bl-tag size="large">Large</bl-tag>
+      <bl-tag size="small" variant="removeable">Small Removeable</bl-tag>
+      <bl-tag size="medium" variant="removeable">Medium Removeable</bl-tag>
+      <bl-tag size="large" variant="removeable">Large Removeable</bl-tag>
     `}
   </Story>
 </Canvas>
diff --git a/src/components/tag/bl-tag.ts b/src/components/tag/bl-tag.ts
index 3d875f08..b2e6d96b 100644
--- a/src/components/tag/bl-tag.ts
+++ b/src/components/tag/bl-tag.ts
@@ -65,6 +65,8 @@ export default class BlTag extends LitElement {
         ? html`
             <bl-button
               icon="close"
+              size=${this.size === "large" ? "medium" : "small"}
+              label="Remove"
               variant="tertiary"
               kind="neutral"
               class="remove-button"

From f269daddaec8c5d4adc147fa1bb3bda3c03a78d8 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Thu, 26 Dec 2024 17:03:03 +0300
Subject: [PATCH 6/7] fix(tag): typo removeable -> removable

---
 src/components/tag/bl-tag.css         |  8 ++++----
 src/components/tag/bl-tag.stories.mdx | 16 ++++++++--------
 src/components/tag/bl-tag.ts          |  4 ++--
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/tag/bl-tag.css b/src/components/tag/bl-tag.css
index 67ffa135..ad289d5e 100644
--- a/src/components/tag/bl-tag.css
+++ b/src/components/tag/bl-tag.css
@@ -58,7 +58,7 @@
   color: var(--bl-color-neutral-light);
 }
 
-:host([variant="removeable"]) .remove-button {
+:host([variant="removable"]) .remove-button {
   --bl-border-radius-m: var(--bl-border-radius-circle);
 }
 
@@ -81,15 +81,15 @@
   --border-radius: var(--bl-size-l);
 }
 
-:host([variant="removeable"][size="small"]) .tag {
+:host([variant="removable"][size="small"]) .tag {
   --padding-horizontal: var(--bl-size-2xs) 0px;
 }
 
-:host([variant="removeable"]) .tag {
+:host([variant="removable"]) .tag {
   --padding-horizontal: var(--bl-size-m) var(--bl-size-3xs);
 }
 
-:host([variant="removeable"][size="large"]) .tag {
+:host([variant="removable"][size="large"]) .tag {
   --padding-horizontal: var(--bl-size-l) var(--bl-size-2xs);
 }
 
diff --git a/src/components/tag/bl-tag.stories.mdx b/src/components/tag/bl-tag.stories.mdx
index 1190dfd2..4f0cdec0 100644
--- a/src/components/tag/bl-tag.stories.mdx
+++ b/src/components/tag/bl-tag.stories.mdx
@@ -7,7 +7,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
   component="bl-tag"
   argTypes={{
     variant: {
-      options: ['selectable', 'removeable'],
+      options: ['selectable', 'removable'],
       control: { type: 'select' }
     },
     size: {
@@ -61,13 +61,13 @@ Tags can be used to label, categorize, or organize items using keywords.
 
 ## Variants
 
-Tags come in two variants: selectable and removeable.
+Tags come in two variants: selectable and removable.
 
 <Canvas>
   <Story name="Variants">
     {html`
       <bl-tag variant="selectable">Selectable Tag</bl-tag>
-      <bl-tag variant="removeable">Removeable Tag</bl-tag>
+      <bl-tag variant="removable">Removable Tag</bl-tag>
     `}
   </Story>
 </Canvas>
@@ -82,9 +82,9 @@ Tags are available in three sizes: small, medium (default), and large.
       <bl-tag size="small">Small</bl-tag>
       <bl-tag size="medium">Medium</bl-tag>
       <bl-tag size="large">Large</bl-tag>
-      <bl-tag size="small" variant="removeable">Small Removeable</bl-tag>
-      <bl-tag size="medium" variant="removeable">Medium Removeable</bl-tag>
-      <bl-tag size="large" variant="removeable">Large Removeable</bl-tag>
+      <bl-tag size="small" variant="removable">Small Removable</bl-tag>
+      <bl-tag size="medium" variant="removable">Medium Removable</bl-tag>
+      <bl-tag size="large" variant="removable">Large Removable</bl-tag>
     `}
   </Story>
 </Canvas>
@@ -97,7 +97,7 @@ Tags can include icons to provide additional visual context.
   <Story name="With Icons">
     {html`
       <bl-tag icon="info">Info Tag</bl-tag>
-      <bl-tag variant="removeable" icon="heart_fill">Removeable Tag Icon</bl-tag>
+      <bl-tag variant="removable" icon="heart_fill">Removable Tag Icon</bl-tag>
     `}
   </Story>
 </Canvas>
@@ -112,7 +112,7 @@ Tags can be selected or disabled.
       <bl-tag variant="selectable" selected>Selected Tag</bl-tag>
       <bl-tag disabled>Disabled Tag</bl-tag>
       <bl-tag variant="selectable" selected disabled>Selected Disabled Tag</bl-tag>
-      <bl-tag variant="removeable" disabled>Disabled Removeable Tag</bl-tag>
+      <bl-tag variant="removable" disabled>Disabled Removable Tag</bl-tag>
     `}
   </Story>
 </Canvas>
diff --git a/src/components/tag/bl-tag.ts b/src/components/tag/bl-tag.ts
index b2e6d96b..5939a8b8 100644
--- a/src/components/tag/bl-tag.ts
+++ b/src/components/tag/bl-tag.ts
@@ -8,7 +8,7 @@ import { BaklavaIcon } from "../icon/icon-list";
 import style from "./bl-tag.css";
 
 export type TagSize = "small" | "medium" | "large";
-type TagVariant = "selectable" | "removeable";
+type TagVariant = "selectable" | "removable";
 
 /**
  * @tag bl-tag
@@ -61,7 +61,7 @@ export default class BlTag extends LitElement {
     const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : "";
 
     const removeButton =
-      this.variant === "removeable"
+      this.variant === "removable"
         ? html`
             <bl-button
               icon="close"

From 3923b2395be53b17847552b0eee73d56f22a00c0 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Thu, 26 Dec 2024 17:34:28 +0300
Subject: [PATCH 7/7] feat(tag): use button for selectable tag

---
 src/components/tag/bl-tag.css |  4 +---
 src/components/tag/bl-tag.ts  | 29 ++++++++++++++++++++---------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/tag/bl-tag.css b/src/components/tag/bl-tag.css
index ad289d5e..87f0a70c 100644
--- a/src/components/tag/bl-tag.css
+++ b/src/components/tag/bl-tag.css
@@ -48,14 +48,12 @@
   --color: var(--bl-color-neutral-full);
 }
 
-:host([variant="selectable"][disabled]) {
-  pointer-events: none;
-}
 
 :host([variant="selectable"][disabled]) .tag {
   background-color: var(--bl-color-neutral-lightest);
   border-color: var(--bl-color-neutral-lightest);
   color: var(--bl-color-neutral-light);
+  cursor: not-allowed;
 }
 
 :host([variant="removable"]) .remove-button {
diff --git a/src/components/tag/bl-tag.ts b/src/components/tag/bl-tag.ts
index 5939a8b8..d5c4f33c 100644
--- a/src/components/tag/bl-tag.ts
+++ b/src/components/tag/bl-tag.ts
@@ -1,6 +1,5 @@
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { CSSResultGroup, html, LitElement, nothing, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { event, EventDispatcher } from "../../utilities/event";
 import "../button/bl-button";
 import "../icon/bl-icon";
@@ -58,14 +57,17 @@ export default class BlTag extends LitElement {
   icon?: BaklavaIcon;
 
   render(): TemplateResult {
-    const icon = this.icon ? html`<bl-icon name=${this.icon}></bl-icon>` : "";
+    const removeIconSize = this.size === "large" ? "medium" : "small";
+    const icon = this.icon
+      ? html`<slot name="icon"><bl-icon name=${this.icon}></bl-icon></slot>`
+      : nothing;
 
     const removeButton =
       this.variant === "removable"
         ? html`
             <bl-button
               icon="close"
-              size=${this.size === "large" ? "medium" : "small"}
+              size=${removeIconSize}
               label="Remove"
               variant="tertiary"
               kind="neutral"
@@ -74,17 +76,26 @@ export default class BlTag extends LitElement {
               @bl-click=${this.handleClick}
             ></bl-button>
           `
-        : "";
+        : nothing;
 
-    return html`<div
+    const selectableVariant = html`<button
       class="tag"
-      @click=${this.variant === "selectable" ? this.handleClick : undefined}
-      role=${ifDefined(this.variant === "selectable" ? "checkbox" : undefined)}
+      role="checkbox"
+      @click=${this.handleClick}
+      ?disabled=${this.disabled}
     >
-      <slot name="icon">${icon}</slot>
+      ${icon}
+      <slot></slot>
+      ${removeButton}
+    </button>`;
+
+    const removableVariant = html`<div class="tag">
+      ${icon}
       <slot></slot>
       ${removeButton}
     </div>`;
+
+    return this.variant === "selectable" ? selectableVariant : removableVariant;
   }
 }