@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-button/diwa-button-styles.js

@@ -0,0 +1,245 @@
+/**
+ * diwa-button-styles.ts
+ * ======================
+ * CSS-in-JS style function for <diwa-button>.
+ *
+ * Returns a complete, scoped CSS string injected into the component's Shadow DOM
+ * via a <style innerHTML={...}> element in render(). This follows the shared
+ * Diwa component styling architecture used across web components.
+ *
+ * All colour values use CSS custom properties (--diwa-*) — raw values are never
+ * hardcoded. This means theming is entirely handled by the token cascade: when the
+ * host element carries data-theme="light", the [data-theme="light"] overrides
+ * defined in app.css cascade into the Shadow DOM via custom property inheritance.
+ *
+ * The function accepts the full prop surface for future conditional optimisation
+ * (e.g. generating only variant- or size-specific CSS to reduce payload), but
+ * currently outputs the complete ruleset regardless of prop values.
+ */
+import { getFocusStyle, getReducedMotionStyle } from "../../utils/styles";
+/**
+ * Generates scoped CSS for the <diwa-button> shadow tree.
+ *
+ * @param _variant  — current ButtonVariant (reserved for conditional CSS)
+ * @param _size     — current ButtonSize    (reserved for conditional CSS)
+ * @param _disabled — disabled state        (reserved for conditional CSS)
+ * @param _loading  — loading state         (reserved for conditional CSS)
+ */
+export const getComponentCss = (_variant, _size, _disabled, _loading) => `
+  /* ── Host ──────────────────────────────────────────────────────────── */
+
+  :host {
+    display: inline-flex;
+    position: relative;
+    font-family: var(--diwa-font-family-base);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Inner element (the real <button> or <a> in Shadow DOM) ─────────── */
+
+  .inner {
+    /* Layout */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--diwa-space-2);
+
+    /* Sizing defaults (md) */
+    height: var(--diwa-button-height, 40px);
+    padding: 0 var(--diwa-button-padding-x, 16px);
+    box-sizing: border-box;
+    width: 100%;
+
+    /* Shape */
+    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));
+    border: var(--diwa-border-width-thin) solid transparent;
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));
+    font-family: inherit;
+    line-height: 1;
+    white-space: nowrap;
+    text-decoration: none;
+
+    /* Interaction */
+    cursor: pointer;
+    user-select: none;
+    -webkit-font-smoothing: antialiased;
+    position: relative;
+
+    /* Motion */
+    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);
+
+    /* Reset native button styles */
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  /* ── Focus ring ─────────────────────────────────────────────────────── */
+
+  ${getFocusStyle('.inner')}
+
+  /* ── Variant: primary ───────────────────────────────────────────────── */
+
+  :host([variant="primary"]) .inner {
+    background-color: var(--diwa-button-bg, var(--diwa-accent));
+    color: var(--diwa-button-color, var(--diwa-text-inverse));
+    border-color: transparent;
+  }
+
+  :host([variant="primary"]) .inner:hover:not(:disabled) {
+    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));
+  }
+
+  :host([variant="primary"]) .inner:active:not(:disabled) {
+    background-color: var(--diwa-accent-active);
+    transform: translateY(1px);
+  }
+
+  /* ── Variant: secondary ─────────────────────────────────────────────── */
+
+  :host([variant="secondary"]) .inner {
+    background-color: transparent;
+    color: var(--diwa-accent);
+    border-color: var(--diwa-accent);
+  }
+
+  :host([variant="secondary"]) .inner:hover:not(:disabled) {
+    background-color: var(--diwa-accent-bg);
+    border-color: var(--diwa-accent-hover);
+  }
+
+  :host([variant="secondary"]) .inner:active:not(:disabled) {
+    background-color: var(--diwa-accent-muted);
+    transform: translateY(1px);
+  }
+
+  /* ── Variant: ghost ─────────────────────────────────────────────────── */
+
+  :host([variant="ghost"]) .inner {
+    background-color: transparent;
+    color: var(--diwa-text-secondary);
+    border-color: transparent;
+  }
+
+  :host([variant="ghost"]) .inner:hover:not(:disabled) {
+    background-color: var(--diwa-bg-hover);
+    color: var(--diwa-text-primary);
+  }
+
+  :host([variant="ghost"]) .inner:active:not(:disabled) {
+    background-color: var(--diwa-bg-active);
+    transform: translateY(1px);
+  }
+
+  /* ── Variant: danger ────────────────────────────────────────────────── */
+
+  :host([variant="danger"]) .inner {
+    background-color: var(--diwa-danger);
+    color: var(--diwa-text-inverse);
+    border-color: transparent;
+  }
+
+  :host([variant="danger"]) .inner:hover:not(:disabled) {
+    background-color: var(--diwa-danger-hover);
+  }
+
+  :host([variant="danger"]) .inner:active:not(:disabled) {
+    background-color: var(--diwa-danger-active);
+    transform: translateY(1px);
+  }
+
+  /* ── Size: sm ───────────────────────────────────────────────────────── */
+
+  :host([size="sm"]) .inner {
+    height: var(--diwa-button-height-sm, 32px);
+    padding: 0 var(--diwa-button-padding-x-sm, 10px);
+    font-size: var(--diwa-font-size-md);
+  }
+
+  /* ── Size: lg ───────────────────────────────────────────────────────── */
+
+  :host([size="lg"]) .inner {
+    height: var(--diwa-button-height-lg, 44px);
+    padding: 0 var(--diwa-space-10);
+    font-size: var(--diwa-font-size-lg);
+  }
+
+  /* ── State: disabled ────────────────────────────────────────────────── */
+
+  :host([disabled]) .inner,
+  .inner:disabled {
+    opacity: var(--diwa-opacity-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ── State: loading ─────────────────────────────────────────────────── */
+
+  :host([loading]) .inner {
+    cursor: wait;
+    pointer-events: none;
+  }
+
+  /* ── Spinner ────────────────────────────────────────────────────────── */
+
+  .spinner {
+    width: var(--diwa-spinner-size-sm);
+    height: var(--diwa-spinner-size-sm);
+    flex-shrink: 0;
+    border: var(--diwa-border-width-base) solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: diwa-spin var(--diwa-spinner-duration, 0.7s) linear infinite;
+  }
+
+  @keyframes diwa-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  /* ── Icon slots ─────────────────────────────────────────────────────── */
+
+  .icon-start,
+  .icon-end {
+    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;
+  }
+
+  /* ── Icon-only mode ─────────────────────────────────────────────────── */
+
+  :host([hide-label]) .inner {
+    width: var(--diwa-button-height, 40px);
+    padding: 0;
+  }
+
+  :host([hide-label][size="sm"]) .inner {
+    width: var(--diwa-button-height-sm, 32px);
+  }
+
+  :host([hide-label][size="lg"]) .inner {
+    width: var(--diwa-button-height-lg, 44px);
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────── */
+
+  ${getReducedMotionStyle('.inner', '.label', '.spinner')}
+`;
+//# sourceMappingURL=diwa-button-styles.js.map

package/dist/collection/components/diwa-button/diwa-button-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-button-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-button/diwa-button-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE1E;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,QAAuB,EACvB,KAAiB,EACjB,SAAkB,EAClB,QAAiB,EACT,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuDT,aAAa,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgKvB,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC;CACxD,CAAC","sourcesContent":["/**\r\n * diwa-button-styles.ts\r\n * ======================\r\n * CSS-in-JS style function for <diwa-button>.\r\n *\r\n * Returns a complete, scoped CSS string injected into the component's Shadow DOM\r\n * via a <style innerHTML={...}> element in render(). This follows the shared\n * Diwa component styling architecture used across web components.\n *\r\n * All colour values use CSS custom properties (--diwa-*) — raw values are never\r\n * hardcoded. This means theming is entirely handled by the token cascade: when the\r\n * host element carries data-theme=\"light\", the [data-theme=\"light\"] overrides\r\n * defined in app.css cascade into the Shadow DOM via custom property inheritance.\r\n *\r\n * The function accepts the full prop surface for future conditional optimisation\r\n * (e.g. generating only variant- or size-specific CSS to reduce payload), but\r\n * currently outputs the complete ruleset regardless of prop values.\r\n */\r\n\r\nimport type { ButtonSize, ButtonVariant } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\n/**\r\n * Generates scoped CSS for the <diwa-button> shadow tree.\r\n *\r\n * @param _variant  — current ButtonVariant (reserved for conditional CSS)\r\n * @param _size     — current ButtonSize    (reserved for conditional CSS)\r\n * @param _disabled — disabled state        (reserved for conditional CSS)\r\n * @param _loading  — loading state         (reserved for conditional CSS)\r\n */\r\nexport const getComponentCss = (\r\n  _variant: ButtonVariant,\r\n  _size: ButtonSize,\r\n  _disabled: boolean,\r\n  _loading: boolean,\r\n): string => `\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  /* ── Inner element (the real <button> or <a> in Shadow DOM) ─────────── */\r\n\r\n  .inner {\r\n    /* Layout */\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: var(--diwa-space-2);\r\n\r\n    /* Sizing defaults (md) */\r\n    height: var(--diwa-button-height, 40px);\r\n    padding: 0 var(--diwa-button-padding-x, 16px);\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n\r\n    /* Shape */\r\n    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));\r\n    border: var(--diwa-border-width-thin) solid transparent;\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));\r\n    font-family: inherit;\r\n    line-height: 1;\r\n    white-space: nowrap;\r\n    text-decoration: none;\r\n\r\n    /* Interaction */\r\n    cursor: pointer;\r\n    user-select: none;\r\n    -webkit-font-smoothing: antialiased;\r\n    position: relative;\r\n\r\n    /* Motion */\r\n    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\r\n\r\n    /* Reset native button styles */\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n  }\r\n\r\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('.inner')}\r\n\r\n  /* ── Variant: primary ───────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"primary\"]) .inner {\r\n    background-color: var(--diwa-button-bg, var(--diwa-accent));\r\n    color: var(--diwa-button-color, var(--diwa-text-inverse));\r\n    border-color: transparent;\r\n  }\r\n\r\n  :host([variant=\"primary\"]) .inner:hover:not(:disabled) {\r\n    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));\r\n  }\r\n\r\n  :host([variant=\"primary\"]) .inner:active:not(:disabled) {\r\n    background-color: var(--diwa-accent-active);\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  /* ── Variant: secondary ─────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"secondary\"]) .inner {\r\n    background-color: transparent;\r\n    color: var(--diwa-accent);\r\n    border-color: var(--diwa-accent);\r\n  }\r\n\r\n  :host([variant=\"secondary\"]) .inner:hover:not(:disabled) {\r\n    background-color: var(--diwa-accent-bg);\r\n    border-color: var(--diwa-accent-hover);\r\n  }\r\n\r\n  :host([variant=\"secondary\"]) .inner:active:not(:disabled) {\r\n    background-color: var(--diwa-accent-muted);\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  /* ── Variant: ghost ─────────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"ghost\"]) .inner {\r\n    background-color: transparent;\r\n    color: var(--diwa-text-secondary);\r\n    border-color: transparent;\r\n  }\r\n\r\n  :host([variant=\"ghost\"]) .inner:hover:not(:disabled) {\r\n    background-color: var(--diwa-bg-hover);\r\n    color: var(--diwa-text-primary);\r\n  }\r\n\r\n  :host([variant=\"ghost\"]) .inner:active:not(:disabled) {\r\n    background-color: var(--diwa-bg-active);\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  /* ── Variant: danger ────────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"danger\"]) .inner {\r\n    background-color: var(--diwa-danger);\r\n    color: var(--diwa-text-inverse);\r\n    border-color: transparent;\r\n  }\r\n\r\n  :host([variant=\"danger\"]) .inner:hover:not(:disabled) {\r\n    background-color: var(--diwa-danger-hover);\r\n  }\r\n\r\n  :host([variant=\"danger\"]) .inner:active:not(:disabled) {\r\n    background-color: var(--diwa-danger-active);\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  /* ── Size: sm ───────────────────────────────────────────────────────── */\r\n\r\n  :host([size=\"sm\"]) .inner {\r\n    height: var(--diwa-button-height-sm, 32px);\r\n    padding: 0 var(--diwa-button-padding-x-sm, 10px);\r\n    font-size: var(--diwa-font-size-md);\r\n  }\r\n\r\n  /* ── Size: lg ───────────────────────────────────────────────────────── */\r\n\r\n  :host([size=\"lg\"]) .inner {\r\n    height: var(--diwa-button-height-lg, 44px);\r\n    padding: 0 var(--diwa-space-10);\r\n    font-size: var(--diwa-font-size-lg);\r\n  }\r\n\r\n  /* ── State: disabled ────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) .inner,\r\n  .inner:disabled {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── State: loading ─────────────────────────────────────────────────── */\r\n\r\n  :host([loading]) .inner {\r\n    cursor: wait;\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── Spinner ────────────────────────────────────────────────────────── */\r\n\r\n  .spinner {\r\n    width: var(--diwa-spinner-size-sm);\r\n    height: var(--diwa-spinner-size-sm);\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-spin var(--diwa-spinner-duration, 0.7s) linear infinite;\r\n  }\r\n\r\n  @keyframes diwa-spin {\r\n    to { transform: rotate(360deg); }\r\n  }\r\n\r\n  /* ── Icon slots ─────────────────────────────────────────────────────── */\r\n\r\n  .icon-start,\r\n  .icon-end {\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  /* ── Icon-only mode ─────────────────────────────────────────────────── */\r\n\r\n  :host([hide-label]) .inner {\r\n    width: var(--diwa-button-height, 40px);\r\n    padding: 0;\r\n  }\r\n\r\n  :host([hide-label][size=\"sm\"]) .inner {\r\n    width: var(--diwa-button-height-sm, 32px);\r\n  }\r\n\r\n  :host([hide-label][size=\"lg\"]) .inner {\r\n    width: var(--diwa-button-height-lg, 44px);\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.inner', '.label', '.spinner')}\r\n`;\r\n"]}

package/dist/collection/components/diwa-button/diwa-button-utils.js

@@ -0,0 +1,43 @@
+/**
+ * diwa-button-utils.ts
+ * =====================
+ * Utility types and helper functions for <diwa-button>.
+ *
+ * Mirrors the PDS pattern used in:
+ *   packages/components/src/components/button/button-utils.ts
+ *
+ * Separating ARIA logic into a dedicated utility file keeps the main component
+ * lean and makes the accessibility mapping independently testable.
+ */
+/**
+ * Assembles ARIA attributes for the inner interactive element.
+ *
+ * Decision table:
+ * - `aria-label`    → set when `label` prop is provided (icon-only or supplemental name)
+ * - `aria-busy`     → set when `loading` is true (announces async activity to AT)
+ * - `aria-disabled` → set when disabled **and** the element is an <a> (links have no
+ *                     native disabled — we simulate it with aria + tabIndex=-1)
+ *
+ * For native <button>: disabled/loading are expressed via the `disabled` HTML attribute
+ * (handled in the calling component's render), so `aria-disabled` is not needed there.
+ *
+ * @param disabled — whether the button interaction is blocked
+ * @param loading  — whether the button is performing an async operation
+ * @param label    — accessible label string (optional)
+ * @param isLink   — true when the component renders as <a> (href is provided)
+ */
+export const getButtonAriaAttributes = (disabled, loading, label, isLink) => {
+    const attrs = {};
+    if (label) {
+        attrs['aria-label'] = label;
+    }
+    if (loading) {
+        attrs['aria-busy'] = 'true';
+    }
+    // <a> elements have no native `disabled` attribute — express it via ARIA.
+    if (isLink && (disabled || loading)) {
+        attrs['aria-disabled'] = 'true';
+    }
+    return attrs;
+};
+//# sourceMappingURL=diwa-button-utils.js.map

package/dist/collection/components/diwa-button/diwa-button-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-button-utils.js","sourceRoot":"","sources":["../../../src/components/diwa-button/diwa-button-utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAeH;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,QAAiB,EACjB,OAAgB,EAChB,KAAyB,EACzB,MAAe,EACO,EAAE;IACxB,MAAM,KAAK,GAAyB,EAAE,CAAC;IAEvC,IAAI,KAAK,EAAE,CAAC;QACV,KAAK,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAC9B,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,KAAK,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;IAC9B,CAAC;IAED,0EAA0E;IAC1E,IAAI,MAAM,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,EAAE,CAAC;QACpC,KAAK,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;IAClC,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["/**\r\n * diwa-button-utils.ts\r\n * =====================\r\n * Utility types and helper functions for <diwa-button>.\r\n *\r\n * Mirrors the PDS pattern used in:\r\n *   packages/components/src/components/button/button-utils.ts\r\n *\r\n * Separating ARIA logic into a dedicated utility file keeps the main component\r\n * lean and makes the accessibility mapping independently testable.\r\n */\r\n\r\n/**\r\n * ARIA attributes applied to the inner interactive element (<button> or <a>).\r\n * All keys are optional — only set when semantically appropriate.\r\n */\r\nexport interface ButtonAriaAttributes {\r\n  /** Accessible text label — overrides slot content for AT. */\r\n  'aria-label'?: string;\r\n  /** Signals that the button is performing an async operation. */\r\n  'aria-busy'?: 'true';\r\n  /** Used on <a> elements (which have no native disabled attribute). */\r\n  'aria-disabled'?: 'true';\r\n}\r\n\r\n/**\r\n * Assembles ARIA attributes for the inner interactive element.\r\n *\r\n * Decision table:\r\n * - `aria-label`    → set when `label` prop is provided (icon-only or supplemental name)\r\n * - `aria-busy`     → set when `loading` is true (announces async activity to AT)\r\n * - `aria-disabled` → set when disabled **and** the element is an <a> (links have no\r\n *                     native disabled — we simulate it with aria + tabIndex=-1)\r\n *\r\n * For native <button>: disabled/loading are expressed via the `disabled` HTML attribute\r\n * (handled in the calling component's render), so `aria-disabled` is not needed there.\r\n *\r\n * @param disabled — whether the button interaction is blocked\r\n * @param loading  — whether the button is performing an async operation\r\n * @param label    — accessible label string (optional)\r\n * @param isLink   — true when the component renders as <a> (href is provided)\r\n */\r\nexport const getButtonAriaAttributes = (\r\n  disabled: boolean,\r\n  loading: boolean,\r\n  label: string | undefined,\r\n  isLink: boolean,\r\n): ButtonAriaAttributes => {\r\n  const attrs: ButtonAriaAttributes = {};\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  // <a> elements have no native `disabled` attribute — express it via ARIA.\r\n  if (isLink && (disabled || loading)) {\r\n    attrs['aria-disabled'] = 'true';\r\n  }\r\n\r\n  return attrs;\r\n};\r\n"]}