@diwacopilot/components 1.0.0

package/dist/cjs/diwa-button-pure.cjs.entry.js

@@ -0,0 +1,286 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+const styles = require('./styles-6342300d.js');
+
+/**
+ * diwa-button-pure-styles.ts
+ * ===========================
+ * CSS-in-JS styles for <diwa-button-pure>.
+ *
+ * A minimal, transparent button: icon + label only, no background or border.
+ * Mirrors the PDS p-button-pure aesthetic.
+ *
+ * Layout rules:
+ *   alignLabel='end'   (default) → icon  label
+ *   alignLabel='start'           → label icon  (via flex-direction: row-reverse)
+ *   stretch=true                 → fills container width, gap between icon and label
+ */
+const getComponentCss = (_size, _disabled, _loading, _underline, _active, _hideLabel, _alignLabel, _stretch) => `
+
+  /* ── Host ──────────────────────────────────────────────────────────── */
+
+  :host {
+    display: inline-flex;
+    position: relative;
+    font-family: var(--diwa-font-family-base);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* Stretch: fill the parent's inline axis */
+  :host([stretch]) {
+    display: flex;
+    width: 100%;
+  }
+
+  /* ── Root element (<button> or <a>) ─────────────────────────────────── */
+
+  .root {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--diwa-space-2);
+    flex-direction: row; /* overridden by alignLabel=start below */
+
+    background: transparent;
+    border: none;
+    padding: var(--diwa-space-0-5) var(--diwa-space-1);
+    margin: 0;
+    cursor: pointer;
+
+    font-family: inherit;
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-font-weight-regular);
+    line-height: 1;
+    color: var(--diwa-text-primary);
+    text-decoration: none;
+    white-space: nowrap;
+
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-font-smoothing: antialiased;
+
+    border-radius: var(--diwa-radius-sm);
+  }
+
+  /* Stretch: push icon and label to opposite edges */
+  :host([stretch]) .root {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  /* ── Focus ring ─────────────────────────────────────────────────────── */
+
+  ${styles.getFocusStyle('.root')}
+
+  /* ── Size ───────────────────────────────────────────────────────────── */
+
+  :host([size="sm"]) .root {
+    font-size: var(--diwa-font-size-sm);
+  }
+
+  :host([size="lg"]) .root {
+    font-size: var(--diwa-font-size-lg);
+  }
+
+  /* ── Hover / Active ─────────────────────────────────────────────────── */
+
+  .root:hover:not(:disabled) {
+    background-color: var(--diwa-bg-hover);
+  }
+
+  /* ── Active state (CSS :active + [active] prop) ─────────────────────── */
+
+  :host([active]) .root,
+  .root:active:not(:disabled) {
+    background-color: var(--diwa-bg-active);
+  }
+
+  /* ── Disabled ───────────────────────────────────────────────────────── */
+
+  :host([disabled]) .root,
+  .root:disabled {
+    opacity: var(--diwa-opacity-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ── Loading ────────────────────────────────────────────────────────── */
+
+  :host([loading]) .root {
+    cursor: wait;
+    pointer-events: none;
+  }
+
+  /* ── alignLabel: start → label on left, icon on right ──────────────── */
+
+  :host([align-label="start"]) .root {
+    flex-direction: row-reverse;
+  }
+
+  /* ── Underline label text ───────────────────────────────────────────── */
+
+  :host([underline]) .label {
+    text-decoration: underline;
+  }
+
+  /* ── Icon wrapper ───────────────────────────────────────────────────── */
+
+  .icon {
+    display: contents;
+    flex-shrink: 0;
+    line-height: 0;
+  }
+
+  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */
+
+  .label--hidden {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  /* ── Spinner ────────────────────────────────────────────────────────── */
+
+  .spinner {
+    /* Size relative to current font-size so it scales with the button size tier */
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    border: var(--diwa-border-width-base) solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: diwa-bp-spin var(--diwa-spinner-duration, 0.7s) linear infinite;
+  }
+
+  @keyframes diwa-bp-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────── */
+
+  ${styles.getReducedMotionStyle('.root', '.spinner')}
+`;
+
+/**
+ * diwa-button-pure-utils.ts
+ * ==========================
+ * ARIA helpers for <diwa-button-pure>.
+ */
+const getButtonPureAriaAttributes = (disabled, loading, label, isLink) => {
+    const attrs = {};
+    if (label) {
+        attrs['aria-label'] = label;
+    }
+    if (loading) {
+        attrs['aria-busy'] = 'true';
+    }
+    if (isLink && (disabled || loading)) {
+        attrs['aria-disabled'] = 'true';
+    }
+    return attrs;
+};
+
+const DiwaButtonPure = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Per-component theme override (light / dark). */
+        this.theme = "dark";
+        /** Text size tier. Controls both font-size and icon size. */
+        this.size = "md";
+        /**
+         * Lucide icon name in kebab-case (e.g. `"arrow-right"`, `"star"`), or `"none"`
+         * to render with no icon. Defaults to `"arrow-right"` — matching PDS.
+         */
+        this.icon = "arrow-right";
+        /** Disabled state. Blocks all pointer and keyboard interaction. */
+        this.disabled = false;
+        /**
+         * Loading state. Replaces the icon with a spinner, blocks interaction,
+         * and announces aria-busy to screen readers.
+         */
+        this.loading = false;
+        /**
+         * When `true`, the label slot is visually hidden (icon-only mode).
+         * Always pair with the `label` prop for screen-reader accessible name.
+         */
+        this.hideLabel = false;
+        /** Forces the button into its active/pressed visual state. */
+        this.active = false;
+        /** Adds an underline decoration to the label text. */
+        this.underline = false;
+        /**
+         * Controls which side the label appears on relative to the icon.
+         * - `"end"` (default): [icon] [label]
+         * - `"start"`:         [label] [icon]
+         */
+        this.alignLabel = "end";
+        /**
+         * When `true`, the button stretches to fill its container and the space
+         * between icon and label expands to fill remaining width.
+         */
+        this.stretch = false;
+        /** Native button type. Only applies when rendered as `<button>`. */
+        this.type = "button";
+        this.handleClick = (e) => {
+            if (!this.isInteractive) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Private helpers
+    // ──────────────────────────────────────────────────────────────
+    get isInteractive() {
+        return !this.disabled && !this.loading;
+    }
+    /** Icon pixel size scaled to the current size tier. */
+    get iconSize() {
+        return this.size === "sm" ? 14 : this.size === "lg" ? 20 : 16;
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        const isLink = !!this.href;
+        const Tag = isLink ? "a" : "button";
+        const ariaAttrs = getButtonPureAriaAttributes(this.disabled, this.loading, this.label, isLink);
+        const commonProps = Object.assign({ class: "root", onClick: this.handleClick }, ariaAttrs);
+        const buttonProps = isLink
+            ? {
+                href: this.href,
+                target: this.target,
+                rel: this.target === "_blank" ? "noopener noreferrer" : undefined,
+                tabIndex: this.disabled || this.loading ? -1 : undefined,
+            }
+            : {
+                type: this.type,
+                name: this.name,
+                value: this.value,
+                disabled: this.disabled || this.loading,
+            };
+        const hasIcon = this.icon !== "none";
+        return (index.h(index.Host, { key: 'e5e00513cc1ceafdf7291b57d8458e52e187c527', "data-theme": this.theme }, index.h("style", { key: 'af00274b62bdfd75958eeb1b03f4b951b8cbf987', innerHTML: getComponentCss() }), index.h(Tag, Object.assign({ key: 'ec7e751f5f9190a525cf9d9bae61a6ea62c01a88' }, commonProps, buttonProps, { part: "base" }), this.loading ? (index.h("span", { class: "spinner", "aria-hidden": "true", part: "spinner" })) : (hasIcon && (index.h("span", { class: "icon", "aria-hidden": "true" }, index.h("diwa-icon", { name: this.icon, size: this.iconSize })))), index.h("span", { key: '2fcb3075fee28a67f9c4379b01cf5f16baeed26b', class: `label${this.hideLabel ? " label--hidden" : ""}`, part: "label" }, index.h("slot", { key: 'e53e29638f01d75ee33e331fe43212ee7e569fcf' })))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return index.getElement(this); }
+};
+
+exports.diwa_button_pure = DiwaButtonPure;
+
+//# sourceMappingURL=diwa-button-pure.cjs.entry.js.map

package/dist/cjs/diwa-button-pure.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-button-pure.entry.cjs.js","mappings":"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","names":["getFocusStyle","getReducedMotionStyle","h","Host"],"sources":["src/components/diwa-button-pure/diwa-button-pure-styles.ts","src/components/diwa-button-pure/diwa-button-pure-utils.ts","src/components/diwa-button-pure/diwa-button-pure.tsx"],"sourcesContent":["/**\r\n * diwa-button-pure-styles.ts\r\n * ===========================\r\n * CSS-in-JS styles for <diwa-button-pure>.\r\n *\r\n * A minimal, transparent button: icon + label only, no background or border.\r\n * Mirrors the PDS p-button-pure aesthetic.\r\n *\r\n * Layout rules:\r\n *   alignLabel='end'   (default) → icon  label\r\n *   alignLabel='start'           → label icon  (via flex-direction: row-reverse)\r\n *   stretch=true                 → fills container width, gap between icon and label\r\n */\r\n\r\nimport type { ButtonPureSize, ButtonPureAlignLabel } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (\r\n  _size: ButtonPureSize,\r\n  _disabled: boolean,\r\n  _loading: boolean,\r\n  _underline: boolean,\r\n  _active: boolean,\r\n  _hideLabel: boolean,\r\n  _alignLabel: ButtonPureAlignLabel,\r\n  _stretch: boolean,\r\n): string => `\r\n\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: inline-flex;\r\n    position: relative;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* Stretch: fill the parent's inline axis */\r\n  :host([stretch]) {\r\n    display: flex;\r\n    width: 100%;\r\n  }\r\n\r\n  /* ── Root element (<button> or <a>) ─────────────────────────────────── */\r\n\r\n  .root {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-2);\r\n    flex-direction: row; /* overridden by alignLabel=start below */\r\n\r\n    background: transparent;\r\n    border: none;\r\n    padding: var(--diwa-space-0-5) var(--diwa-space-1);\r\n    margin: 0;\r\n    cursor: pointer;\r\n\r\n    font-family: inherit;\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-regular);\r\n    line-height: 1;\r\n    color: var(--diwa-text-primary);\r\n    text-decoration: none;\r\n    white-space: nowrap;\r\n\r\n    -webkit-appearance: none;\r\n    appearance: none;\r\n    -webkit-font-smoothing: antialiased;\r\n\r\n    border-radius: var(--diwa-radius-sm);\r\n  }\r\n\r\n  /* Stretch: push icon and label to opposite edges */\r\n  :host([stretch]) .root {\r\n    width: 100%;\r\n    justify-content: space-between;\r\n  }\r\n\r\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('.root')}\r\n\r\n  /* ── Size ───────────────────────────────────────────────────────────── */\r\n\r\n  :host([size=\"sm\"]) .root {\r\n    font-size: var(--diwa-font-size-sm);\r\n  }\r\n\r\n  :host([size=\"lg\"]) .root {\r\n    font-size: var(--diwa-font-size-lg);\r\n  }\r\n\r\n  /* ── Hover / Active ─────────────────────────────────────────────────── */\r\n\r\n  .root:hover:not(:disabled) {\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  /* ── Active state (CSS :active + [active] prop) ─────────────────────── */\r\n\r\n  :host([active]) .root,\r\n  .root:active:not(:disabled) {\r\n    background-color: var(--diwa-bg-active);\r\n  }\r\n\r\n  /* ── Disabled ───────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) .root,\r\n  .root:disabled {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── Loading ────────────────────────────────────────────────────────── */\r\n\r\n  :host([loading]) .root {\r\n    cursor: wait;\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── alignLabel: start → label on left, icon on right ──────────────── */\r\n\r\n  :host([align-label=\"start\"]) .root {\r\n    flex-direction: row-reverse;\r\n  }\r\n\r\n  /* ── Underline label text ───────────────────────────────────────────── */\r\n\r\n  :host([underline]) .label {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  /* ── Icon wrapper ───────────────────────────────────────────────────── */\r\n\r\n  .icon {\r\n    display: contents;\r\n    flex-shrink: 0;\r\n    line-height: 0;\r\n  }\r\n\r\n  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\r\n\r\n  .label--hidden {\r\n    border: 0;\r\n    clip: rect(0, 0, 0, 0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    white-space: nowrap;\r\n    width: 1px;\r\n  }\r\n\r\n  /* ── Spinner ────────────────────────────────────────────────────────── */\r\n\r\n  .spinner {\r\n    /* Size relative to current font-size so it scales with the button size tier */\r\n    width: 1em;\r\n    height: 1em;\r\n    flex-shrink: 0;\r\n    border: var(--diwa-border-width-base) solid currentColor;\r\n    border-top-color: transparent;\r\n    border-radius: 50%;\r\n    animation: diwa-bp-spin var(--diwa-spinner-duration, 0.7s) linear infinite;\r\n  }\r\n\r\n  @keyframes diwa-bp-spin {\r\n    to { transform: rotate(360deg); }\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.root', '.spinner')}\r\n`;\r\n","/**\r\n * diwa-button-pure-utils.ts\r\n * ==========================\r\n * ARIA helpers for <diwa-button-pure>.\r\n */\r\n\r\nexport interface ButtonPureAriaAttributes {\r\n  'aria-label'?: string;\r\n  'aria-busy'?: 'true';\r\n  'aria-disabled'?: 'true';\r\n}\r\n\r\nexport const getButtonPureAriaAttributes = (\r\n  disabled: boolean,\r\n  loading: boolean,\r\n  label: string | undefined,\r\n  isLink: boolean,\r\n): ButtonPureAriaAttributes => {\r\n  const attrs: ButtonPureAriaAttributes = {};\r\n\r\n  if (label) {\r\n    attrs['aria-label'] = label;\r\n  }\r\n\r\n  if (loading) {\r\n    attrs['aria-busy'] = 'true';\r\n  }\r\n\r\n  if (isLink && (disabled || loading)) {\r\n    attrs['aria-disabled'] = 'true';\r\n  }\r\n\r\n  return attrs;\r\n};\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\nimport type { ButtonPureSize, ButtonPureAlignLabel, ButtonPureType } from \"./types\";\r\nimport type { Theme } from \"../../utils/styles\";\r\nimport { getComponentCss } from \"./diwa-button-pure-styles\";\r\nimport { getButtonPureAriaAttributes } from \"./diwa-button-pure-utils\";\r\n\r\n/**\r\n * @component diwa-button-pure\r\n *\r\n * A transparent, text+icon action button — no background or border.\r\n * Mirrors the PDS `p-button-pure` component.\r\n *\r\n * Default layout: [icon] [label]  (alignLabel=\"end\")\r\n * Reversed layout: [label] [icon] (alignLabel=\"start\")\r\n * Stretched layout: [icon] ·····  [label] (stretch + alignLabel=\"end\")\r\n *\r\n * Usage:\r\n *   <diwa-button-pure>Read more</diwa-button-pure>\r\n *   <diwa-button-pure icon=\"arrow-left\" align-label=\"start\">Back</diwa-button-pure>\r\n *   <diwa-button-pure hide-label label=\"Close\" icon=\"x\" />\r\n *\r\n * @slot default — Button label text\r\n */\r\n@Component({\r\n  tag: \"diwa-button-pure\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaButtonPure {\r\n  @Element() host!: HTMLDiwaButtonPureElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override (light / dark). */\r\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\r\n\r\n  /** Text size tier. Controls both font-size and icon size. */\r\n  @Prop({ reflect: true }) size: ButtonPureSize = \"md\";\r\n\r\n  /**\r\n   * Lucide icon name in kebab-case (e.g. `\"arrow-right\"`, `\"star\"`), or `\"none\"`\r\n   * to render with no icon. Defaults to `\"arrow-right\"` — matching PDS.\r\n   */\r\n  @Prop() icon: string = \"arrow-right\";\r\n\r\n  /** Disabled state. Blocks all pointer and keyboard interaction. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Loading state. Replaces the icon with a spinner, blocks interaction,\r\n   * and announces aria-busy to screen readers.\r\n   */\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n  /**\r\n   * When `true`, the label slot is visually hidden (icon-only mode).\r\n   * Always pair with the `label` prop for screen-reader accessible name.\r\n   */\r\n  @Prop({ reflect: true }) hideLabel: boolean = false;\r\n\r\n  /** Forces the button into its active/pressed visual state. */\r\n  @Prop({ reflect: true }) active: boolean = false;\r\n\r\n  /** Adds an underline decoration to the label text. */\r\n  @Prop({ reflect: true }) underline: boolean = false;\r\n\r\n  /**\r\n   * Controls which side the label appears on relative to the icon.\r\n   * - `\"end\"` (default): [icon] [label]\r\n   * - `\"start\"`:         [label] [icon]\r\n   */\r\n  @Prop({ reflect: true }) alignLabel: ButtonPureAlignLabel = \"end\";\r\n\r\n  /**\r\n   * When `true`, the button stretches to fill its container and the space\r\n   * between icon and label expands to fill remaining width.\r\n   */\r\n  @Prop({ reflect: true }) stretch: boolean = false;\r\n\r\n  /** Native button type. Only applies when rendered as `<button>`. */\r\n  @Prop() type: ButtonPureType = \"button\";\r\n\r\n  /** Native button name — submitted with form data. */\r\n  @Prop() name?: string;\r\n\r\n  /** Native button value — submitted with form data. */\r\n  @Prop() value?: string;\r\n\r\n  /**\r\n   * When set, renders as an `<a>` element (link semantics).\r\n   * Pair with `target` for external links.\r\n   */\r\n  @Prop() href?: string;\r\n\r\n  /** Link target — only meaningful when `href` is set. */\r\n  @Prop() target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\r\n\r\n  /**\r\n   * Accessible label for icon-only buttons.\r\n   * Required when `hideLabel` is `true`.\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private get isInteractive(): boolean {\r\n    return !this.disabled && !this.loading;\r\n  }\r\n\r\n  /** Icon pixel size scaled to the current size tier. */\r\n  private get iconSize(): number {\r\n    return this.size === \"sm\" ? 14 : this.size === \"lg\" ? 20 : 16;\r\n  }\r\n\r\n  private readonly handleClick = (e: MouseEvent): void => {\r\n    if (!this.isInteractive) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n    }\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const isLink = !!this.href;\r\n    const Tag = isLink ? \"a\" : \"button\";\r\n\r\n    const ariaAttrs = getButtonPureAriaAttributes(\r\n      this.disabled,\r\n      this.loading,\r\n      this.label,\r\n      isLink,\r\n    );\r\n\r\n    const commonProps = {\r\n      class: \"root\",\r\n      onClick: this.handleClick,\r\n      ...ariaAttrs,\r\n    };\r\n\r\n    const buttonProps = isLink\r\n      ? {\r\n          href: this.href,\r\n          target: this.target,\r\n          rel: this.target === \"_blank\" ? \"noopener noreferrer\" : undefined,\r\n          tabIndex: this.disabled || this.loading ? -1 : undefined,\r\n        }\r\n      : {\r\n          type: this.type,\r\n          name: this.name,\r\n          value: this.value,\r\n          disabled: this.disabled || this.loading,\r\n        };\r\n\r\n    const hasIcon = this.icon !== \"none\";\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style\r\n          innerHTML={getComponentCss(\r\n            this.size,\r\n            this.disabled,\r\n            this.loading,\r\n            this.underline,\r\n            this.active,\r\n            this.hideLabel,\r\n            this.alignLabel,\r\n            this.stretch,\r\n          )}\r\n        />\r\n\r\n        <Tag {...commonProps} {...buttonProps} part=\"base\">\r\n          {/* Spinner replaces the icon during loading */}\r\n          {this.loading ? (\r\n            <span class=\"spinner\" aria-hidden=\"true\" part=\"spinner\" />\r\n          ) : (\r\n            hasIcon && (\r\n              <span class=\"icon\" aria-hidden=\"true\">\r\n                <diwa-icon name={this.icon} size={this.iconSize} />\r\n              </span>\r\n            )\r\n          )}\r\n\r\n          {/* Label — visually hidden when hideLabel=true but kept for AT */}\r\n          <span\r\n            class={`label${this.hideLabel ? \" label--hidden\" : \"\"}`}\r\n            part=\"label\"\r\n          >\r\n            <slot />\r\n          </span>\r\n        </Tag>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}