@cupra/ui-kit 2.0.0-canary.16 → 2.0.0-canary.161

package/dist/esm/components/ds-breadcrumbs-item/ds-breadcrumbs-item.js

@@ -0,0 +1,46 @@
+import { x as e } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n as t } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UiKitElement as r } from "../base/UiKitElement.js";
+import { customUiKitElement as i } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as a } from "../../utils/booleanConverter.js";
+import { e as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+//#region src/components/ds-breadcrumbs-item/ds-breadcrumbs-item.ts
+var s = class extends r {
+	constructor(...e) {
+		super(...e), this.selected = !1, this.disabled = !1, this.loading = !1;
+	}
+	get classes() {
+		return {
+			"item-wrapper": !0,
+			selected: this.selected,
+			disabled: this.disabled,
+			loading: this.loading
+		};
+	}
+	render() {
+		let t = this.loading ? e`<div class="skeleton-placeholder"></div>` : e`<slot name="item"></slot>`;
+		return e`
+            <div class=${o(this.classes)} part="item-wrapper">
+                ${t}
+            </div>
+        `;
+	}
+};
+n([t({
+	type: Boolean,
+	converter: a,
+	reflect: !0
+})], s.prototype, "selected", void 0), n([t({
+	type: Boolean,
+	converter: a,
+	reflect: !0
+})], s.prototype, "disabled", void 0), n([t({
+	type: Boolean,
+	converter: a,
+	reflect: !0
+})], s.prototype, "loading", void 0), s = n([i("ds-breadcrumbs-item")], s);
+//#endregion

package/dist/esm/components/ds-bullets/ds-bullets.js

@@ -1,79 +1,71 @@
-import { UiKitElement as a } from "../base/UiKitElement.js";
-import { customUiKitElement as h } from "../../decorators/customUiKitElement.js";
-import { htmlWithTokens as b } from "../../utils/htmlWithTokens.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as p, nothing as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { classMap as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { commonStyles as v } from "./styles/common.styles.js";
-var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, t, l, i) => {
-  for (var s = i > 1 ? void 0 : i ? y(t, l) : t, u = e.length - 1, m; u >= 0; u--)
-    (m = e[u]) && (s = (i ? m(t, l, s) : m(s)) || s);
-  return i && s && f(t, l, s), s;
-};
-let r = class extends a {
-  constructor() {
-    super(...arguments), this.mode = "light", this.activeBulletIndex = 0, this.handleClickChunk = (e) => () => {
-      this.activeBulletIndex !== e && (this.activeBulletIndex = e, this.dispatchEvent(
-        new CustomEvent("change", {
-          bubbles: !0,
-          composed: !0,
-          detail: {
-            index: e
-          }
-        })
-      ));
-    };
-  }
-  get bulletsTemplate() {
-    const e = [];
-    for (let t = 0; t < this.bulletsNumber; t++) {
-      const l = {
-        bullet: !0,
-        active: t === this.activeBulletIndex
-      };
-      e.push(p`
-                <div @click=${this.handleClickChunk(t)} class=${c(l)}></div>
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import { e as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { commonStyles as s } from "./styles/common.styles.js";
+//#region src/components/ds-bullets/ds-bullets.ts
+var c = class extends i {
+	constructor(...e) {
+		super(...e), this.mode = "light", this.activeBulletIndex = 0, this.handleClickChunk = (e) => () => {
+			this.activeBulletIndex !== e && (this.activeBulletIndex = e, this.dispatchEvent(new CustomEvent("change", {
+				bubbles: !0,
+				composed: !0,
+				detail: { index: e }
+			})));
+		};
+	}
+	static {
+		this.styles = [s];
+	}
+	get bulletsTemplate() {
+		let e = [];
+		for (let n = 0; n < this.bulletsNumber; n++) {
+			let r = {
+				bullet: !0,
+				active: n === this.activeBulletIndex
+			};
+			e.push(t`
+                <div @click=${this.handleClickChunk(n)} class=${o(r)}></div>
             `);
-    }
-    return e;
-  }
-  get classes() {
-    return {
-      container: !0,
-      [this.mode]: !0
-    };
-  }
-  get styleTokens() {
-    return b`
+		}
+		return e;
+	}
+	get classes() {
+		return {
+			container: !0,
+			[this.mode]: !0
+		};
+	}
+	get styleTokens() {
+		return t`
                 <style>
                     :host{
                         color-scheme: ${this.mode};
                     }
                 </style>
         `;
-  }
-  render() {
-    return this.bulletsNumber > 0 ? p`
+	}
+	render() {
+		return this.bulletsNumber > 0 ? t`
                   ${this.styleTokens}
-                  <div class=${c(this.classes)}>${this.bulletsTemplate}</div>
-              ` : d;
-  }
-};
-r.styles = [v];
-o([
-  n({ type: String, reflect: !0 })
-], r.prototype, "mode", 2);
-o([
-  n({ type: Number, attribute: "bullets-number" })
-], r.prototype, "bulletsNumber", 2);
-o([
-  n({ type: Number, attribute: "active-bullet-index", reflect: !0 })
-], r.prototype, "activeBulletIndex", 2);
-r = o([
-  h("ds-bullets")
-], r);
-export {
-  r as DsBullets
+                  <div class=${o(this.classes)}>${this.bulletsTemplate}</div>
+              ` : e;
+	}
 };
+r([n({
+	type: String,
+	reflect: !0
+})], c.prototype, "mode", void 0), r([n({
+	type: Number,
+	attribute: "bullets-number"
+})], c.prototype, "bulletsNumber", void 0), r([n({
+	type: Number,
+	attribute: "active-bullet-index",
+	reflect: !0
+})], c.prototype, "activeBulletIndex", void 0), c = r([a("ds-bullets")], c);
+//#endregion

package/dist/esm/components/ds-bullets/styles/common.styles.js

@@ -1,8 +1,7 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const l = o`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-bullets/styles/common.styles.ts
+var t = e`
     :host {
         display: block;
         width: 100%;
@@ -21,6 +20,5 @@ const l = o`
         cursor: auto;
     }
 `;
-export {
-  l as commonStyles
-};
+//#endregion
+export { t as commonStyles };

package/dist/esm/components/ds-button/ds-button.js

@@ -1,71 +1,80 @@
-import { UiKitElement as f } from "../base/UiKitElement.js";
-import { customUiKitElement as y } from "../../decorators/customUiKitElement.js";
-import { ViewportMixin as g } from "../../mixins/ViewportMixin.js";
-import { booleanConverter as a } from "../../utils/booleanConverter.js";
-import { htmlWithTokens as b } from "../../utils/htmlWithTokens.js";
-import { objectConverter as v } from "../../utils/objectConverter.js";
-import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as u, html as o } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { property as s } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as $ } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
-import { choose as T } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
-import { classMap as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
-import { when as p } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
-import { buttonStyles as S, textStyles as P, loadingDotsStyles as w } from "./styles/common.styles.js";
-var C = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (i, n, h, l) => {
-  for (var r = l > 1 ? void 0 : l ? x(n, h) : n, c = i.length - 1, m; c >= 0; c--)
-    (m = i[c]) && (r = (l ? m(n, h, r) : m(r)) || r);
-  return l && r && C(n, h, r), r;
-};
-let t = class extends g(f) {
-  constructor() {
-    super(...arguments), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.destructive = !1, this.htmlTagName = "button", this.type = "button", this.iconPosition = "left", this.rounded = !1, this.fullWidth = !1, this.loading = !1;
-  }
-  firstUpdated() {
-    this.closestForm = this.closest("form");
-  }
-  get classes() {
-    const i = typeof this.size == "string" ? this.size : this.size[this.viewport];
-    return {
-      button: !0,
-      custom: this.htmlTagName === "custom",
-      [i]: !!i,
-      [this.mode]: !!this.mode,
-      [this.variant]: !!this.variant,
-      rounded: this.rounded,
-      disabled: this.disabled || this.loading,
-      destructive: this.destructive,
-      "full-width": this.fullWidth
-    };
-  }
-  handleClick(i) {
-    if (this.href || i.preventDefault(), this.closestForm && this.type === "submit") {
-      const n = new Event("submit", {
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0
-      });
-      this.closestForm.dispatchEvent(n);
-    }
-  }
-  get iconTemplate() {
-    return this.iconName ? this.componentFactory.createIcon({
-      class: "icon",
-      "icon-name": this.iconName
-    }) : u;
-  }
-  get loadingTemplate() {
-    return this.loading ? o`
+import { E as e, x as t } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+import { n } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/decorators.js";
+import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { UiKitElement as i } from "../base/UiKitElement.js";
+import { customUiKitElement as a } from "../../decorators/customUiKitElement.js";
+import "../ds-icon/ds-icon.js";
+import { booleanConverter as o } from "../../utils/booleanConverter.js";
+import { uiKitHtml as s } from "../../utils/uiKitHtml.js";
+import { e as c } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/directives/class-map.js";
+import { ViewportMixin as l } from "../../mixins/ViewportMixin.js";
+import { objectConverter as u } from "../../utils/objectConverter.js";
+import { r as d } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/choose.js";
+import { n as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.js";
+import { buttonStyles as p, loadingDotsStyles as m, textStyles as h } from "./styles/common.styles.js";
+//#region src/components/ds-button/ds-button.ts
+var g = class extends l(i) {
+	constructor(...e) {
+		super(...e), this.variant = "primary", this.mode = "light", this.size = "large", this.disabled = !1, this.destructive = !1, this.htmlTagName = "button", this.type = "button", this.iconPosition = "left", this.rounded = !1, this.fullWidth = !1, this.loading = !1;
+	}
+	static {
+		this.styles = [
+			p,
+			h,
+			m
+		];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.closestForm = this.closest("form");
+	}
+	get classes() {
+		let e = typeof this.size == "string" ? this.size : this.size[this.viewport];
+		return {
+			button: !0,
+			[`tag-${this.htmlTagName}`]: !0,
+			[`variant-${this.variant}`]: !0,
+			[e]: !!e,
+			[this.mode]: !!this.mode,
+			rounded: this.rounded,
+			disabled: this.disabled || this.loading,
+			destructive: this.destructive,
+			"full-width": this.fullWidth
+		};
+	}
+	handleClick(e) {
+		if (this.href || e.preventDefault(), this.closestForm && this.type === "submit") {
+			let e = new Event("submit", {
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0
+			});
+			this.closestForm.dispatchEvent(e);
+		}
+	}
+	handleCustomClick(e) {
+		let t = (this.shadowRoot?.querySelector("slot"))?.assignedElements()[0];
+		t && !t.contains(e.composedPath()[0]) && (e.stopPropagation(), t.click());
+	}
+	get iconTemplate() {
+		return this.iconName ? s`<ds-icon class="icon" icon-name=${this.iconName}></ds-icon>` : e;
+	}
+	get loadingTemplate() {
+		return this.loading ? t`
             <span class="loading-dots">
                 <span>.</span>
                 <span>.</span>
                 <span>.</span>
             </span>
-        ` : u;
-  }
-  get cssTokens() {
-    return b`
+        ` : e;
+	}
+	get contentTemplate() {
+		return this.loading && this.textLoading ? t`${this.textLoading}` : t`<slot></slot>`;
+	}
+	get cssTokens() {
+		return t`
             <style>
                 :host{
                     color-scheme: ${this.mode};
@@ -76,121 +85,101 @@ let t = class extends g(f) {
                     pointer-events: none;
                 }
             </style>`;
-  }
-  render() {
-    return o`
+	}
+	render() {
+		return t`
             ${this.cssTokens}
-            ${T(this.htmlTagName || "button", [
-      [
-        "button",
-        () => {
-          var i;
-          return o`
+            ${d(this.htmlTagName || "button", [
+			["button", () => t`
                         <button
-                            aria-label=${(i = this.textContent) == null ? void 0 : i.replace(/^\s+|\s+$/g, "")}
-                            class=${d(this.classes)}
+                            class=${c(this.classes)}
+                            aria-label=${this.textContent?.replace(/^\s+|\s+$/g, "")}
                             type=${this.type}
                             @click=${this.handleClick}
                             ?disabled=${this.disabled}
                         >
-                            ${p(this.iconPosition === "left", () => o` ${this.iconTemplate} `)}
+                            ${f(this.iconPosition === "left", () => t` ${this.iconTemplate} `)}
                             <span class="container">
-                                <slot></slot>
+                                ${this.contentTemplate}
                                 ${this.loadingTemplate}
                             </span>
-                            ${p(this.iconPosition === "right", () => o` ${this.iconTemplate} `)}
+                            ${f(this.iconPosition === "right", () => t` ${this.iconTemplate} `)}
                         </button>
-                    `;
-        }
-      ],
-      [
-        "a",
-        () => {
-          var i;
-          return o`
+                    `],
+			["a", () => t`
                         <a
-                            aria-label=${(i = this.textContent) == null ? void 0 : i.replace(/^\s+|\s+$/g, "")}
-                            class=${d(this.classes)}
+                            class=${c(this.classes)}
+                            aria-label=${this.textContent?.replace(/^\s+|\s+$/g, "")}
                             href=${this.href}
                             rel=${this.rel}
                             target=${this.target}
                             @click=${this.handleClick}
-                            ?disabled=${this.disabled}
                         >
-                            ${p(this.iconPosition === "left", () => o`${this.iconTemplate}`)}
+                            ${f(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
                             <span class="container">
-                                <slot></slot>
+                                ${this.contentTemplate}
                                 ${this.loadingTemplate}
                             </span>
-                            ${p(this.iconPosition === "right", () => o`${this.iconTemplate}`)}
+                            ${f(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
                         </a>
-                    `;
-        }
-      ],
-      [
-        "custom",
-        () => o`
-                        <div class=${d(this.classes)}>
-                            <slot></slot>
+                    `],
+			["custom", () => t`
+                        <div class=${c(this.classes)} @click=${this.handleCustomClick}>
+                            ${f(this.iconPosition === "left", () => t`${this.iconTemplate}`)}
+                            ${this.loading && this.textLoading ? t`<span class="container">${this.textLoading}${this.loadingTemplate}</span>` : t`<slot></slot>${this.loadingTemplate}`}
+                            ${f(this.iconPosition === "right", () => t`${this.iconTemplate}`)}
                         </div>
-                    `
-      ]
-    ])}
+                    `]
+		])}
         `;
-  }
-};
-t.styles = [S, P, w];
-e([
-  s({ type: String })
-], t.prototype, "variant", 2);
-e([
-  s({ type: String, reflect: !0 })
-], t.prototype, "mode", 2);
-e([
-  s({ type: String, converter: v })
-], t.prototype, "size", 2);
-e([
-  s({ type: Boolean, converter: a })
-], t.prototype, "disabled", 2);
-e([
-  s({ type: Boolean, converter: a })
-], t.prototype, "destructive", 2);
-e([
-  s({ type: String, attribute: "icon-name" })
-], t.prototype, "iconName", 2);
-e([
-  s({ type: String, attribute: "html-tag-name" })
-], t.prototype, "htmlTagName", 2);
-e([
-  s({ type: String, reflect: !0 })
-], t.prototype, "href", 2);
-e([
-  s({ type: String, reflect: !0 })
-], t.prototype, "rel", 2);
-e([
-  s({ type: String, reflect: !0 })
-], t.prototype, "target", 2);
-e([
-  s({ type: String })
-], t.prototype, "type", 2);
-e([
-  s({ type: String, attribute: "icon-position" })
-], t.prototype, "iconPosition", 2);
-e([
-  s({ type: Boolean, converter: a })
-], t.prototype, "rounded", 2);
-e([
-  s({ type: Boolean, converter: a, attribute: "full-width" })
-], t.prototype, "fullWidth", 2);
-e([
-  s({ type: Boolean, converter: a })
-], t.prototype, "loading", 2);
-e([
-  $()
-], t.prototype, "closestForm", 2);
-t = e([
-  y("ds-button")
-], t);
-export {
-  t as DsButton
+	}
 };
+r([n({
+	type: String,
+	reflect: !0
+})], g.prototype, "variant", void 0), r([n({
+	type: String,
+	reflect: !0
+})], g.prototype, "mode", void 0), r([n({
+	type: String,
+	converter: u
+})], g.prototype, "size", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], g.prototype, "disabled", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], g.prototype, "destructive", void 0), r([n({
+	type: String,
+	attribute: "icon-name"
+})], g.prototype, "iconName", void 0), r([n({
+	type: String,
+	attribute: "html-tag-name"
+})], g.prototype, "htmlTagName", void 0), r([n({
+	type: String,
+	reflect: !0
+})], g.prototype, "href", void 0), r([n({
+	type: String,
+	reflect: !0
+})], g.prototype, "rel", void 0), r([n({
+	type: String,
+	reflect: !0
+})], g.prototype, "target", void 0), r([n({ type: String })], g.prototype, "type", void 0), r([n({
+	type: String,
+	attribute: "icon-position"
+})], g.prototype, "iconPosition", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], g.prototype, "rounded", void 0), r([n({
+	type: Boolean,
+	converter: o,
+	attribute: "full-width"
+})], g.prototype, "fullWidth", void 0), r([n({
+	type: Boolean,
+	converter: o
+})], g.prototype, "loading", void 0), r([n({
+	type: String,
+	attribute: "text-loading"
+})], g.prototype, "textLoading", void 0), g = r([a("ds-button")], g);
+//#endregion
+export { g as DsButton };

package/dist/esm/components/ds-button/styles/common.styles.js

@@ -1,8 +1,7 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
-import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
-const e = t`
+import { i as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+import "../../../node_modules/.pnpm/lit@3.3.1/node_modules/lit/index.js";
+//#region src/components/ds-button/styles/common.styles.ts
+var t = e`
     :host {
         display: contents;
     }
@@ -14,6 +13,15 @@ const e = t`
         box-sizing: border-box;
         justify-content: center;
         align-items: center;
+        gap: var(--ui-kit-private-button-gap, 0);
+        padding: 0;
+        margin: 0;
+        background: transparent;
+        border: none;
+        color: inherit;
+        font: inherit;
+        text-transform: inherit;
+        letter-spacing: inherit;
         cursor: pointer;
         outline-style: solid;
         max-width: 100%;
@@ -22,7 +30,39 @@ const e = t`
     .button.full-width {
         width: 100%;
     }
-`, s = t`
+
+    .tag-custom ::slotted(*) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        flex: 1;
+        min-width: 0;
+        gap: var(--ui-kit-private-button-gap, 0);
+        padding: 0;
+        margin: 0;
+        background: transparent;
+        border: none;
+        color: inherit;
+        font: inherit;
+        text-transform: inherit;
+        letter-spacing: inherit;
+        text-decoration: none;
+        cursor: inherit;
+        outline: none;
+        box-sizing: border-box;
+    }
+
+    .tag-custom ::slotted(*:disabled),
+    .tag-custom.disabled ::slotted(*) {
+        pointer-events: none;
+        cursor: default;
+    }
+
+    .tag-custom ::slotted(*:focus-visible) {
+        outline: none;
+    }
+`, n = e`
     .naked.container {
         display: inline-flex;
     }
@@ -32,7 +72,7 @@ const e = t`
         text-overflow: ellipsis;
         white-space: nowrap;
     }
-`, l = t`
+`, r = e`
     .loading-dots {
         display: inline-flex;
         align-items: baseline;
@@ -109,8 +149,5 @@ const e = t`
         }
     }
 `;
-export {
-  e as buttonStyles,
-  l as loadingDotsStyles,
-  s as textStyles
-};
+//#endregion
+export { t as buttonStyles, r as loadingDotsStyles, n as textStyles };