@cas-smartdesign/button 7.1.2 → 7.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/button.d.ts +3 -0
  2. package/dist/button.d.ts.map +1 -1
  3. package/dist/button.mjs +12 -4
  4. package/dist/button.mjs.map +1 -1
  5. package/dist/docs/doc.mjs +1 -1
  6. package/package.json +3 -3
package/dist/button.d.ts CHANGED
@@ -27,6 +27,9 @@ export declare class Button extends ElementBase {
27
27
  private isSpaceOrEnter;
28
28
  click(): void;
29
29
  connectedCallback(): void;
30
+ disconnectedCallback(): void;
31
+ private get contentSlot();
32
+ private readonly onContentSlotChanged;
30
33
  attributeChangedCallback(name: string, oldValue: string | null): void;
31
34
  private updateIcon;
32
35
  }
package/dist/button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAK1D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;KACvB;CACJ;AAED,MAAM,MAAM,aAAa,GACnB,SAAS,GACT,SAAS,GACT,UAAU,GACV,OAAO,GACP,gBAAgB,GAChB,cAAc,GACd,WAAW,GACX,QAAQ,GACR,UAAU,CAAC;AACjB,eAAO,MAAM,eAAe,EAAE,aAAa,EAU1C,CAAC;AAMF,qBAAa,MAAO,SAAQ,WAAW;IACnC,gBAAuB,EAAE,eAAe;IACxC,OAAc,aAAa,aAKzB;IAEF,MAAM,CAAC,UAAU,gBAAuB;IAMxC,OAAO,CAAC,MAAM,CAAC,CAAgC;IAC/C,OAAO,CAAC,sBAAsB,CAAS;IAEvC,IAAW,YAAY,8CAEtB;IAED,IAAW,IAAI,IAAI,MAAM,GAAG,SAAS,GAAG,IAAI,CAE3C;IAED,IAAW,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,EAS9C;IAED,IAAI,OAAO,IAAI,aAAa,CAG3B;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,aAAa,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,IAAI,EAEtD;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,IAAW,QAAQ,CAAC,QAAQ,EAAE,OAAO,EAEpC;IAED,MAAM,KAAK,kBAAkB,aAE5B;IAEM,EAAE,IAAI,MAAM;IAInB,SAAS,CAAC,QAAQ,IAAI,mBAAmB;;IAiDzC,OAAO,CAAC,cAAc;IAWN,KAAK;IAML,iBAAiB;IAmBjB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAqBrF,OAAO,CAAC,UAAU;CAQrB"}
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAK1D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;KACvB;CACJ;AAED,MAAM,MAAM,aAAa,GACnB,SAAS,GACT,SAAS,GACT,UAAU,GACV,OAAO,GACP,gBAAgB,GAChB,cAAc,GACd,WAAW,GACX,QAAQ,GACR,UAAU,CAAC;AACjB,eAAO,MAAM,eAAe,EAAE,aAAa,EAU1C,CAAC;AAMF,qBAAa,MAAO,SAAQ,WAAW;IACnC,gBAAuB,EAAE,eAAe;IACxC,OAAc,aAAa,aAKzB;IAEF,MAAM,CAAC,UAAU,gBAAuB;IAMxC,OAAO,CAAC,MAAM,CAAC,CAAgC;IAC/C,OAAO,CAAC,sBAAsB,CAAS;IAEvC,IAAW,YAAY,8CAEtB;IAED,IAAW,IAAI,IAAI,MAAM,GAAG,SAAS,GAAG,IAAI,CAE3C;IAED,IAAW,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,EAS9C;IAED,IAAI,OAAO,IAAI,aAAa,CAG3B;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,aAAa,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,IAAI,EAEtD;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,IAAW,QAAQ,CAAC,QAAQ,EAAE,OAAO,EAEpC;IAED,MAAM,KAAK,kBAAkB,aAE5B;IAEM,EAAE,IAAI,MAAM;IAInB,SAAS,CAAC,QAAQ,IAAI,mBAAmB;;IAiDzC,OAAO,CAAC,cAAc;IAWN,KAAK;IAML,iBAAiB;IAqBxB,oBAAoB,IAAI,IAAI;IAIrC,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAOnC;IAEc,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAqBrF,OAAO,CAAC,UAAU;CAMrB"}
package/dist/button.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ElementBase as e } from "@cas-smartdesign/element-base";
2
2
  import { ImageEmbed as t } from "@cas-smartdesign/image-embed";
3
3
  //#region button.html?raw
4
- var n = "<slot name=\"icon\">\n <sd-image-embed class=\"icon\" part=\"icon\" exportparts=\"img, svg\"></sd-image-embed>\n</slot>\n<div class=\"content\">\n <slot></slot>\n</div>\n", r = ":host{contain:content;box-sizing:border-box;vertical-align:middle;height:min-content;min-height:36px;padding:var(--spacing-x3,6px) var(--spacing-x4,8px);border-radius:var(--radius-s,4px);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:inline-flex}:host:focus-visible{outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px)}:host:is(:disabled,[disabled],[aria-disabled=true]){cursor:default}:host{background-color:var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4));color:var(--sd-button-color,var(--color-fg-action-neutral-default,#111))}:host:after{content:\"\";border:var(--sd-button-border,none);border-radius:inherit;pointer-events:none;position:absolute;inset:0}:host(:is(:focus,:hover)){background-color:var(--sd-button-background-color-hover,var(--color-bg-action-neutral-default-hover,#c6c6c6));color:var(--sd-button-color-hover,var(--color-fg-action-neutral-default-hover,#1b1b1b))}:host(:is(:focus,:hover)):after{border-color:var(--sd-button-border-color-hover,transparent)}:host(:active){background-color:var(--sd-button-background-color-pressed,var(--color-bg-action-neutral-default-pressed,#b3b3b3));color:var(--sd-button-color-pressed,var(--color-fg-action-neutral-default-pressed,#242424))}:host(:active):after{border-color:var(--sd-button-border-color-pressed,transparent)}:host(:is([aria-disabled=true],[disabled])){background-color:var(--sd-button-background-color-disabled,var(--color-bg-interaction-disabled,#e7e7e7));color:var(--sd-button-color-disabled,var(--color-fg-interaction-disabled,#999))}:host(:is([aria-disabled=true],[disabled])):after{border-color:var(--sd-button-border-color-disabled,transparent)}:host(:is([aria-disabled=true],[disabled])){cursor:default}:host(:focus-visible){outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px)}:host([variant=primary i]){--sd-button-background-color:var(--color-bg-action-accent-default,#1467ba);--sd-button-color:var(--color-fg-interaction-on-color,#fff);--sd-button-background-color-hover:var(--color-bg-action-accent-default-hover,#0f4d8b);--sd-button-color-hover:var(--color-fg-interaction-on-color,#fff);--sd-button-background-color-pressed:var(--color-bg-action-accent-default-pressed,#0b3a69);--sd-button-color-pressed:var(--color-fg-interaction-on-color,#fff)}:host([variant=outline i]){--sd-button-background-color:var(--color-bg-action-accent-weak,#e0ebf6);--sd-button-color:var(--color-fg-action-accent-default,#1467ba);--sd-button-border:1px solid var(--color-border-action-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-action-accent-weak-hover,#d5e4f3);--sd-button-color-hover:var(--color-fg-action-accent-default-hover,#0f4d8b);--sd-button-border-color-hover:var(--color-border-action-accent-default-hover,#0f4d8b);--sd-button-background-color-pressed:var(--color-bg-action-accent-weak-pressed,#c7dbef);--sd-button-color-pressed:var(--color-fg-action-accent-default-pressed,#0b3a69);--sd-button-border-color-pressed:var(--color-border-action-accent-default-pressed,#0b3a69);--sd-button-background-color-disabled:transparent;--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=ghost i]){--sd-button-background-color:transparent;--sd-button-color:var(--color-fg-action-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-action-accent-weakest-hover,#e0ebf6);--sd-button-color-hover:var(--color-fg-action-accent-default-hover,#0f4d8b);--sd-button-background-color-pressed:var(--color-bg-action-accent-weakest-pressed,#c7dbef);--sd-button-color-pressed:var(--color-fg-action-accent-default-pressed,#0b3a69);--sd-button-background-color-disabled:transparent}:host([variant=outline-danger i]){--sd-button-background-color:var(--color-bg-action-danger-default,#fbdde0);--sd-button-color:var(--color-fg-action-danger-default,#a90014);--sd-button-border:1px solid var(--color-border-action-danger-default,#a90014);--sd-button-background-color-hover:var(--color-bg-action-danger-default-hover,#fad2d6);--sd-button-color-hover:var(--color-fg-action-danger-default-hover,#7f000f);--sd-button-border-color-hover:var(--color-border-action-danger-default-hover,#7f000f);--sd-button-background-color-pressed:var(--color-bg-action-danger-default-pressed,#f8c3c9);--sd-button-color-pressed:var(--color-fg-action-danger-default-pressed,#5f000b);--sd-button-border-color-pressed:var(--color-border-action-danger-default-pressed,#5f000b);--sd-button-background-color-disabled:transparent;--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=ghost-danger i]){--sd-button-background-color:transparent;--sd-button-color:var(--color-fg-action-danger-default,#a90014);--sd-button-background-color-hover:var(--color-bg-action-danger-default-hover,#fad2d6);--sd-button-color-hover:var(--color-fg-action-danger-default-hover,#7f000f);--sd-button-background-color-pressed:var(--color-bg-action-danger-default-pressed,#f8c3c9);--sd-button-color-pressed:var(--color-fg-action-danger-default-pressed,#5f000b);--sd-button-background-color-disabled:transparent}:host([variant=selection i]){--sd-button-background-color:var(--color-bg-selection-neutral-weakest,#fff);--sd-button-color:var(--color-fg-selection-neutral-default,#111);--sd-button-border:1px solid var(--color-border-selection-neutral-default,#999);--sd-button-background-color-hover:var(--color-bg-selection-accent-weak-hover,#e0ebf6);--sd-button-color-hover:var(--color-fg-selection-neutral-default,#111);--sd-button-border-color-hover:var(--color-border-selection-neutral-default,#999);--sd-button-background-color-pressed:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-color-pressed:var(--color-fg-selection-neutral-default,#111);--sd-button-border-color-pressed:var(--color-border-selection-accent-default,#1467ba);--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=custom i]){--sd-button-background-color-hover:color-mix(in oklab, var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4)), var(--color-fg-default,#111) 10%);--sd-button-color-hover:var(--sd-button-color,var(--color-fg-action-neutral-default,#111));--sd-button-background-color-pressed:color-mix(in oklab, var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4)), var(--color-fg-default,#111) 20%);--sd-button-color-pressed:var(--sd-button-color,var(--color-fg-action-neutral-default,#111))}:host([variant=contrast i]){--sd-button-contrast-color:color-mix(in oklab, color(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) xyz round(up, min(1, max(0, .18 - y)), 1) round(up, min(1, max(0, .18 - y)), 1) round(up, min(1, max(0, .18 - y)), 1)), #fff 17.6%);--sd-button-background-color:transparent;--sd-button-color:var(--sd-button-contrast-color);--sd-button-background-color-hover:oklab(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) calc(l + sign(.5 - l) * .1) a b);--sd-button-color-hover:var(--sd-button-contrast-color);--sd-button-background-color-pressed:oklab(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) calc(l + sign(.5 - l) * .2) a b);--sd-button-color-pressed:var(--sd-button-contrast-color);--sd-button-background-color-disabled:transparent}:host([variant=selection i][aria-pressed=true]){--sd-button-background-color:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-border:1px solid var(--color-border-selection-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-border-color-hover:var(--color-border-selection-accent-default,#1467ba)}.icon:is(:not([src]),[src=\"\"],[src=\"data:,\"]){display:none}.content{align-items:center;width:100%;min-width:0;display:flex}.content ::slotted(*){font:var(--text-body,400 15px/20px Inter);margin-left:var(--sd-button-content-padding,8px)}.content ::slotted(:last-child){margin-right:var(--sd-button-content-padding,8px)}.icon{max-height:var(--sd-button-max-icon-size,24px);max-width:var(--sd-button-max-icon-size,24px);color:inherit;flex-shrink:0}::slotted([slot=icon]){flex-shrink:0}", i = [
4
+ var n = "<slot name=\"icon\">\n <sd-image-embed class=\"icon\" part=\"icon\" exportparts=\"img, svg\"></sd-image-embed>\n</slot>\n<div class=\"content\">\n <slot></slot>\n</div>\n", r = ":host{contain:content;box-sizing:border-box;vertical-align:middle;height:min-content;min-height:36px;padding:var(--spacing-x3,6px) var(--spacing-x4,8px);border-radius:var(--radius-s,4px);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:inline-flex}:host:focus-visible{outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px)}:host:is(:disabled,[disabled],[aria-disabled=true]){cursor:default}:host{background-color:var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4));color:var(--sd-button-color,var(--color-fg-action-neutral-default,#111))}:host:after{content:\"\";border:var(--sd-button-border,none);border-radius:inherit;pointer-events:none;position:absolute;inset:0}:host(:is(:focus,:hover)){background-color:var(--sd-button-background-color-hover,var(--color-bg-action-neutral-default-hover,#c6c6c6));color:var(--sd-button-color-hover,var(--color-fg-action-neutral-default-hover,#1b1b1b))}:host(:is(:focus,:hover)):after{border-color:var(--sd-button-border-color-hover,transparent)}:host(:active){background-color:var(--sd-button-background-color-pressed,var(--color-bg-action-neutral-default-pressed,#b3b3b3));color:var(--sd-button-color-pressed,var(--color-fg-action-neutral-default-pressed,#242424))}:host(:active):after{border-color:var(--sd-button-border-color-pressed,transparent)}:host(:is([aria-disabled=true],[disabled])){background-color:var(--sd-button-background-color-disabled,var(--color-bg-interaction-disabled,#e7e7e7));color:var(--sd-button-color-disabled,var(--color-fg-interaction-disabled,#999))}:host(:is([aria-disabled=true],[disabled])):after{border-color:var(--sd-button-border-color-disabled,transparent)}:host(:is([aria-disabled=true],[disabled])){cursor:default}:host(:focus-visible){outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px)}:host([variant=primary i]){--sd-button-background-color:var(--color-bg-action-accent-default,#1467ba);--sd-button-color:var(--color-fg-interaction-on-color,#fff);--sd-button-background-color-hover:var(--color-bg-action-accent-default-hover,#0f4d8b);--sd-button-color-hover:var(--color-fg-interaction-on-color,#fff);--sd-button-background-color-pressed:var(--color-bg-action-accent-default-pressed,#0b3a69);--sd-button-color-pressed:var(--color-fg-interaction-on-color,#fff)}:host([variant=outline i]){--sd-button-background-color:var(--color-bg-action-accent-weak,#e0ebf6);--sd-button-color:var(--color-fg-action-accent-default,#1467ba);--sd-button-border:1px solid var(--color-border-action-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-action-accent-weak-hover,#d5e4f3);--sd-button-color-hover:var(--color-fg-action-accent-default-hover,#0f4d8b);--sd-button-border-color-hover:var(--color-border-action-accent-default-hover,#0f4d8b);--sd-button-background-color-pressed:var(--color-bg-action-accent-weak-pressed,#c7dbef);--sd-button-color-pressed:var(--color-fg-action-accent-default-pressed,#0b3a69);--sd-button-border-color-pressed:var(--color-border-action-accent-default-pressed,#0b3a69);--sd-button-background-color-disabled:transparent;--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=ghost i]){--sd-button-background-color:transparent;--sd-button-color:var(--color-fg-action-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-action-accent-weakest-hover,#e0ebf6);--sd-button-color-hover:var(--color-fg-action-accent-default-hover,#0f4d8b);--sd-button-background-color-pressed:var(--color-bg-action-accent-weakest-pressed,#c7dbef);--sd-button-color-pressed:var(--color-fg-action-accent-default-pressed,#0b3a69);--sd-button-background-color-disabled:transparent}:host([variant=outline-danger i]){--sd-button-background-color:var(--color-bg-action-danger-default,#fbdde0);--sd-button-color:var(--color-fg-action-danger-default,#a90014);--sd-button-border:1px solid var(--color-border-action-danger-default,#a90014);--sd-button-background-color-hover:var(--color-bg-action-danger-default-hover,#fad2d6);--sd-button-color-hover:var(--color-fg-action-danger-default-hover,#7f000f);--sd-button-border-color-hover:var(--color-border-action-danger-default-hover,#7f000f);--sd-button-background-color-pressed:var(--color-bg-action-danger-default-pressed,#f8c3c9);--sd-button-color-pressed:var(--color-fg-action-danger-default-pressed,#5f000b);--sd-button-border-color-pressed:var(--color-border-action-danger-default-pressed,#5f000b);--sd-button-background-color-disabled:transparent;--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=ghost-danger i]){--sd-button-background-color:transparent;--sd-button-color:var(--color-fg-action-danger-default,#a90014);--sd-button-background-color-hover:var(--color-bg-action-danger-default-hover,#fad2d6);--sd-button-color-hover:var(--color-fg-action-danger-default-hover,#7f000f);--sd-button-background-color-pressed:var(--color-bg-action-danger-default-pressed,#f8c3c9);--sd-button-color-pressed:var(--color-fg-action-danger-default-pressed,#5f000b);--sd-button-background-color-disabled:transparent}:host([variant=selection i]){--sd-button-background-color:var(--color-bg-selection-neutral-weakest,#fff);--sd-button-color:var(--color-fg-selection-neutral-default,#111);--sd-button-border:1px solid var(--color-border-selection-neutral-default,#999);--sd-button-background-color-hover:var(--color-bg-selection-accent-weak-hover,#e0ebf6);--sd-button-color-hover:var(--color-fg-selection-neutral-default,#111);--sd-button-border-color-hover:var(--color-border-selection-neutral-default,#999);--sd-button-background-color-pressed:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-color-pressed:var(--color-fg-selection-neutral-default,#111);--sd-button-border-color-pressed:var(--color-border-selection-accent-default,#1467ba);--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=custom i]){--sd-button-background-color-hover:color-mix(in oklab, var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4)), var(--color-fg-default,#111) 10%);--sd-button-color-hover:var(--sd-button-color,var(--color-fg-action-neutral-default,#111));--sd-button-background-color-pressed:color-mix(in oklab, var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4)), var(--color-fg-default,#111) 20%);--sd-button-color-pressed:var(--sd-button-color,var(--color-fg-action-neutral-default,#111))}:host([variant=contrast i]){--sd-button-contrast-color:color-mix(in oklab, color(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) xyz round(up, min(1, max(0, .18 - y)), 1) round(up, min(1, max(0, .18 - y)), 1) round(up, min(1, max(0, .18 - y)), 1)), #fff 17.6%);--sd-button-background-color:transparent;--sd-button-color:var(--sd-button-contrast-color);--sd-button-background-color-hover:oklab(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) calc(l + sign(.5 - l) * .1) a b);--sd-button-color-hover:var(--sd-button-contrast-color);--sd-button-background-color-pressed:oklab(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) calc(l + sign(.5 - l) * .2) a b);--sd-button-color-pressed:var(--sd-button-contrast-color);--sd-button-background-color-disabled:transparent}:host([variant=selection i][aria-pressed=true]){--sd-button-background-color:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-border:1px solid var(--color-border-selection-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-border-color-hover:var(--color-border-selection-accent-default,#1467ba)}.icon:is(:not([src]),[src=\"\"],[src=\"data:,\"]){display:none}:host([has-content]) .content{display:flex}.content{align-items:center;width:100%;min-width:0;display:none}.content ::slotted(*){font:var(--text-body,400 15px/20px Inter);margin-left:var(--sd-button-content-padding,8px)}.content ::slotted(:last-child){margin-right:var(--sd-button-content-padding,8px)}.icon{max-height:var(--sd-button-max-icon-size,24px);max-width:var(--sd-button-max-icon-size,24px);color:inherit;flex-shrink:0}::slotted([slot=icon]){flex-shrink:0}", i = [
5
5
  "primary",
6
6
  "outline",
7
7
  "standard",
@@ -63,7 +63,9 @@ var s = class i extends e {
63
63
  return e.innerHTML = n, e;
64
64
  }
65
65
  constructor() {
66
- super(), this._isSpaceOrEnterKeyDown = !1, this.addEventListener("keydown", (e) => {
66
+ super(), this._isSpaceOrEnterKeyDown = !1, this.onContentSlotChanged = () => {
67
+ this.contentSlot.assignedElements().length > 0 ? this.setAttribute("has-content", "") : this.removeAttribute("has-content");
68
+ }, this.addEventListener("keydown", (e) => {
67
69
  this.isSpaceOrEnter(e) && (this._isSpaceOrEnterKeyDown = !0, e.preventDefault());
68
70
  }), this.addEventListener("keyup", (e) => {
69
71
  this.isSpaceOrEnter(e) && this._isSpaceOrEnterKeyDown == 1 && (this._isSpaceOrEnterKeyDown = !1, this.click());
@@ -91,7 +93,13 @@ var s = class i extends e {
91
93
  }
92
94
  connectedCallback() {
93
95
  let e = this.shadowRoot == null;
94
- super.connectedCallback(), e && (this.shadowRoot.adoptedStyleSheets = [i.styleSheet]), this.hasAttribute("tabIndex") || (this.tabIndex = 0), this._image = this.shadowRoot.querySelector(".icon"), this.updateIcon(), this.hasAttribute("role") || this.setAttribute("role", "button");
96
+ super.connectedCallback(), e && (this.shadowRoot.adoptedStyleSheets = [i.styleSheet]), this.hasAttribute("tabIndex") || (this.tabIndex = 0), this._image = this.shadowRoot.querySelector(".icon"), this.updateIcon(), this.hasAttribute("role") || this.setAttribute("role", "button"), this.contentSlot.addEventListener("slotchange", this.onContentSlotChanged);
97
+ }
98
+ disconnectedCallback() {
99
+ this.contentSlot.removeEventListener("slotchange", this.onContentSlotChanged);
100
+ }
101
+ get contentSlot() {
102
+ return this.shadowRoot.querySelector(".content > slot");
95
103
  }
96
104
  attributeChangedCallback(e, t) {
97
105
  switch (e) {
@@ -106,7 +114,7 @@ var s = class i extends e {
106
114
  updateIcon() {
107
115
  if (this._image) {
108
116
  let e = this.getAttribute("icon");
109
- e && (this._image.src = e);
117
+ this._image.src = e;
110
118
  }
111
119
  }
112
120
  };
package/dist/button.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.mjs","names":[],"sources":["../button.html?raw","../styles.scss?inline","../button.ts"],"sourcesContent":["export default \"<slot name=\\\"icon\\\">\\n\\t<sd-image-embed class=\\\"icon\\\" part=\\\"icon\\\" exportparts=\\\"img, svg\\\"></sd-image-embed>\\n</slot>\\n<div class=\\\"content\\\">\\n\\t<slot></slot>\\n</div>\\n\"","@use \"scss/config\";\n@use \"scss/button\";\n\n:host {\n\tcontain: content;\n\n\t@include button.base;\n\t@include config.state(\"base\");\n\t&::after {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder: var(--sd-button-border, none);\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t}\n}\n\n:host(:is(:focus, :hover)) {\n\t@include config.state(\"hover\");\n}\n\n:host(:active) {\n\t@include config.state(\"pressed\");\n}\n\n:host(:is([aria-disabled=\"true\"], [disabled])) {\n\t@include config.state(\"disabled\");\n\tcursor: default;\n}\n\n:host(:focus-visible) {\n\toutline: 1px solid var(--color-border-interaction-focus, #111);\n\toutline-offset: var(--spacing-x1, 2px);\n}\n\n@each $name, $props in config.$variants {\n\t:host([variant=\"#{$name}\" i]) {\n\t\t@include config.variant-vars($name);\n\t}\n}\n\n:host([variant=\"selection\" i][aria-pressed=\"true\"]) {\n\t@include config.selection-checked-vars;\n}\n\n.icon:is(:not([src]), [src=\"\"], [src=\"data:,\"]) {\n\tdisplay: none;\n}\n\n.content {\n\tdisplay: flex;\n\talign-items: center;\n\tmin-width: 0px;\n\twidth: 100%;\n}\n\n.content ::slotted(*) {\n\tfont: var(--text-body, 400 15px/20px Inter);\n\tmargin-left: var(--sd-button-content-padding, 8px);\n}\n\n.content ::slotted(*:last-child) {\n\tmargin-right: var(--sd-button-content-padding, 8px);\n}\n\n.icon {\n\tmax-height: var(--sd-button-max-icon-size, 24px);\n\tmax-width: var(--sd-button-max-icon-size, 24px);\n\tcolor: inherit;\n\tflex-shrink: 0;\n}\n\n::slotted([slot=\"icon\"]) {\n\tflex-shrink: 0;\n}\n","import { ElementBase } from \"@cas-smartdesign/element-base\";\nimport { ImageEmbed } from \"@cas-smartdesign/image-embed\";\n\nimport { default as htmlTemplate } from \"./button.html?raw\";\nimport { default as styles } from \"./styles.scss?inline\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [Button.ID]: Button;\n }\n}\n\nexport type ButtonVariant =\n | \"primary\"\n | \"outline\"\n | \"standard\"\n | \"ghost\"\n | \"outline-danger\"\n | \"ghost-danger\"\n | \"selection\"\n | \"custom\"\n | \"contrast\";\nexport const BUTTON_VARIANTS: ButtonVariant[] = [\n \"primary\",\n \"outline\",\n \"standard\",\n \"ghost\",\n \"outline-danger\",\n \"ghost-danger\",\n \"selection\",\n \"custom\",\n \"contrast\",\n];\nconst DEFAULT_BUTTON_VARIANT: ButtonVariant = \"standard\";\nfunction isButtonVariant(value: string | null): value is ButtonVariant {\n return BUTTON_VARIANTS.includes(value as ButtonVariant);\n}\n\nexport class Button extends ElementBase {\n public static readonly ID = \"sd-button\";\n public static ensureDefined = () => {\n if (!customElements.get(Button.ID)) {\n customElements.define(Button.ID, Button);\n ImageEmbed.ensureDefined();\n }\n };\n\n static styleSheet = new CSSStyleSheet();\n\n static {\n this.styleSheet.replaceSync(styles);\n }\n\n private _image?: ImageEmbed | HTMLImageElement;\n private _isSpaceOrEnterKeyDown = false;\n\n public get imageElement() {\n return this._image;\n }\n\n public get icon(): string | undefined | null {\n return this.getAttribute(\"icon\");\n }\n\n public set icon(icon: string | undefined | null) {\n if (this.icon !== icon) {\n if (icon) {\n this.setAttribute(\"icon\", icon);\n } else {\n this.removeAttribute(\"icon\");\n }\n this.updateIcon();\n }\n }\n\n get variant(): ButtonVariant {\n const attr = this.getAttribute(\"variant\");\n return isButtonVariant(attr) ? attr : DEFAULT_BUTTON_VARIANT;\n }\n\n set variant(value: ButtonVariant | (string & {}) | null) {\n this.setAttribute(\"variant\", isButtonVariant(value) ? value : DEFAULT_BUTTON_VARIANT);\n }\n\n public get disabled(): boolean {\n return this.getAttribute(\"aria-disabled\") == \"true\";\n }\n\n public set disabled(disabled: boolean) {\n this.setAttribute(\"aria-disabled\", disabled.toString());\n }\n\n static get observedAttributes() {\n return [\"icon\", \"variant\"];\n }\n\n public is(): string {\n return Button.ID;\n }\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n constructor() {\n super();\n this.addEventListener(\"keydown\", (e) => {\n if (this.isSpaceOrEnter(e)) {\n this._isSpaceOrEnterKeyDown = true;\n e.preventDefault(); // prevent potential scroll-down triggered by space\n }\n });\n this.addEventListener(\"keyup\", (e) => {\n if (this.isSpaceOrEnter(e) && this._isSpaceOrEnterKeyDown == true) {\n this._isSpaceOrEnterKeyDown = false;\n this.click();\n }\n });\n // As Button is not an input element, click is fired even in disabled state\n this.addEventListener(\n \"click\",\n (event) => {\n if (this.disabled || this.hasAttribute(\"disabled\")) {\n event.stopImmediatePropagation();\n return;\n }\n\n const type = this.getAttribute(\"type\")?.toLowerCase()?.trim();\n\n if (type !== \"submit\" && type !== \"reset\") {\n return;\n }\n\n const form = this.closest(\"form\");\n\n if (form && type === \"submit\") {\n form.requestSubmit();\n }\n\n if (form && type === \"reset\") {\n form.reset();\n }\n },\n { capture: true },\n );\n }\n\n private isSpaceOrEnter(event: KeyboardEvent): boolean {\n switch (event.key) {\n case \" \":\n case \"Space\":\n case \"Enter\":\n return true;\n default:\n return false;\n }\n }\n\n public override click() {\n if (!this.disabled && !this.hasAttribute(\"disabled\")) {\n super.click();\n }\n }\n\n public override connectedCallback() {\n const initStyles = this.shadowRoot == null;\n super.connectedCallback();\n if (initStyles) {\n this.shadowRoot!.adoptedStyleSheets = [Button.styleSheet];\n }\n\n if (!this.hasAttribute(\"tabIndex\")) {\n this.tabIndex = 0;\n }\n\n this._image = this.shadowRoot!.querySelector(\".icon\") as HTMLImageElement;\n\n this.updateIcon();\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"button\");\n }\n }\n\n public override attributeChangedCallback(name: string, oldValue: string | null): void {\n switch (name) {\n case \"icon\": {\n this.updateIcon();\n break;\n }\n case \"variant\": {\n if (this.variant === \"selection\") {\n // Expose toggle semantics, but don't clobber an\n // aria-pressed value already managed by the consumer.\n if (!this.hasAttribute(\"aria-pressed\")) {\n this.setAttribute(\"aria-pressed\", \"false\");\n }\n } else if (oldValue?.toLowerCase() === \"selection\") {\n this.removeAttribute(\"aria-pressed\");\n }\n break;\n }\n }\n }\n\n private updateIcon() {\n if (this._image) {\n const iconSrc = this.getAttribute(\"icon\");\n if (iconSrc) {\n this._image.src = iconSrc;\n }\n }\n }\n}\nButton.ensureDefined();\n"],"mappings":"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"}
1
+ {"version":3,"file":"button.mjs","names":[],"sources":["../button.html?raw","../styles.scss?inline","../button.ts"],"sourcesContent":["export default \"<slot name=\\\"icon\\\">\\n\\t<sd-image-embed class=\\\"icon\\\" part=\\\"icon\\\" exportparts=\\\"img, svg\\\"></sd-image-embed>\\n</slot>\\n<div class=\\\"content\\\">\\n\\t<slot></slot>\\n</div>\\n\"","@use \"scss/config\";\n@use \"scss/button\";\n\n:host {\n\tcontain: content;\n\n\t@include button.base;\n\t@include config.state(\"base\");\n\t&::after {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder: var(--sd-button-border, none);\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t}\n}\n\n:host(:is(:focus, :hover)) {\n\t@include config.state(\"hover\");\n}\n\n:host(:active) {\n\t@include config.state(\"pressed\");\n}\n\n:host(:is([aria-disabled=\"true\"], [disabled])) {\n\t@include config.state(\"disabled\");\n\tcursor: default;\n}\n\n:host(:focus-visible) {\n\toutline: 1px solid var(--color-border-interaction-focus, #111);\n\toutline-offset: var(--spacing-x1, 2px);\n}\n\n@each $name, $props in config.$variants {\n\t:host([variant=\"#{$name}\" i]) {\n\t\t@include config.variant-vars($name);\n\t}\n}\n\n:host([variant=\"selection\" i][aria-pressed=\"true\"]) {\n\t@include config.selection-checked-vars;\n}\n\n.icon:is(:not([src]), [src=\"\"], [src=\"data:,\"]) {\n\tdisplay: none;\n}\n\n:host([has-content]) {\n\t.content {\n\t\tdisplay: flex;\n\t}\n}\n\n.content {\n\tdisplay: none;\n\talign-items: center;\n\tmin-width: 0px;\n\twidth: 100%;\n}\n\n.content ::slotted(*) {\n\tfont: var(--text-body, 400 15px/20px Inter);\n\tmargin-left: var(--sd-button-content-padding, 8px);\n}\n\n.content ::slotted(*:last-child) {\n\tmargin-right: var(--sd-button-content-padding, 8px);\n}\n\n.icon {\n\tmax-height: var(--sd-button-max-icon-size, 24px);\n\tmax-width: var(--sd-button-max-icon-size, 24px);\n\tcolor: inherit;\n\tflex-shrink: 0;\n}\n\n::slotted([slot=\"icon\"]) {\n\tflex-shrink: 0;\n}\n","import { ElementBase } from \"@cas-smartdesign/element-base\";\nimport { ImageEmbed } from \"@cas-smartdesign/image-embed\";\n\nimport { default as htmlTemplate } from \"./button.html?raw\";\nimport { default as styles } from \"./styles.scss?inline\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [Button.ID]: Button;\n }\n}\n\nexport type ButtonVariant =\n | \"primary\"\n | \"outline\"\n | \"standard\"\n | \"ghost\"\n | \"outline-danger\"\n | \"ghost-danger\"\n | \"selection\"\n | \"custom\"\n | \"contrast\";\nexport const BUTTON_VARIANTS: ButtonVariant[] = [\n \"primary\",\n \"outline\",\n \"standard\",\n \"ghost\",\n \"outline-danger\",\n \"ghost-danger\",\n \"selection\",\n \"custom\",\n \"contrast\",\n];\nconst DEFAULT_BUTTON_VARIANT: ButtonVariant = \"standard\";\nfunction isButtonVariant(value: string | null): value is ButtonVariant {\n return BUTTON_VARIANTS.includes(value as ButtonVariant);\n}\n\nexport class Button extends ElementBase {\n public static readonly ID = \"sd-button\";\n public static ensureDefined = () => {\n if (!customElements.get(Button.ID)) {\n customElements.define(Button.ID, Button);\n ImageEmbed.ensureDefined();\n }\n };\n\n static styleSheet = new CSSStyleSheet();\n\n static {\n this.styleSheet.replaceSync(styles);\n }\n\n private _image?: ImageEmbed | HTMLImageElement;\n private _isSpaceOrEnterKeyDown = false;\n\n public get imageElement() {\n return this._image;\n }\n\n public get icon(): string | undefined | null {\n return this.getAttribute(\"icon\");\n }\n\n public set icon(icon: string | undefined | null) {\n if (this.icon !== icon) {\n if (icon) {\n this.setAttribute(\"icon\", icon);\n } else {\n this.removeAttribute(\"icon\");\n }\n this.updateIcon();\n }\n }\n\n get variant(): ButtonVariant {\n const attr = this.getAttribute(\"variant\");\n return isButtonVariant(attr) ? attr : DEFAULT_BUTTON_VARIANT;\n }\n\n set variant(value: ButtonVariant | (string & {}) | null) {\n this.setAttribute(\"variant\", isButtonVariant(value) ? value : DEFAULT_BUTTON_VARIANT);\n }\n\n public get disabled(): boolean {\n return this.getAttribute(\"aria-disabled\") == \"true\";\n }\n\n public set disabled(disabled: boolean) {\n this.setAttribute(\"aria-disabled\", disabled.toString());\n }\n\n static get observedAttributes() {\n return [\"icon\", \"variant\"];\n }\n\n public is(): string {\n return Button.ID;\n }\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n constructor() {\n super();\n this.addEventListener(\"keydown\", (e) => {\n if (this.isSpaceOrEnter(e)) {\n this._isSpaceOrEnterKeyDown = true;\n e.preventDefault(); // prevent potential scroll-down triggered by space\n }\n });\n this.addEventListener(\"keyup\", (e) => {\n if (this.isSpaceOrEnter(e) && this._isSpaceOrEnterKeyDown == true) {\n this._isSpaceOrEnterKeyDown = false;\n this.click();\n }\n });\n // As Button is not an input element, click is fired even in disabled state\n this.addEventListener(\n \"click\",\n (event) => {\n if (this.disabled || this.hasAttribute(\"disabled\")) {\n event.stopImmediatePropagation();\n return;\n }\n\n const type = this.getAttribute(\"type\")?.toLowerCase()?.trim();\n\n if (type !== \"submit\" && type !== \"reset\") {\n return;\n }\n\n const form = this.closest(\"form\");\n\n if (form && type === \"submit\") {\n form.requestSubmit();\n }\n\n if (form && type === \"reset\") {\n form.reset();\n }\n },\n { capture: true },\n );\n }\n\n private isSpaceOrEnter(event: KeyboardEvent): boolean {\n switch (event.key) {\n case \" \":\n case \"Space\":\n case \"Enter\":\n return true;\n default:\n return false;\n }\n }\n\n public override click() {\n if (!this.disabled && !this.hasAttribute(\"disabled\")) {\n super.click();\n }\n }\n\n public override connectedCallback() {\n const initStyles = this.shadowRoot == null;\n super.connectedCallback();\n if (initStyles) {\n this.shadowRoot!.adoptedStyleSheets = [Button.styleSheet];\n }\n\n if (!this.hasAttribute(\"tabIndex\")) {\n this.tabIndex = 0;\n }\n\n this._image = this.shadowRoot!.querySelector(\".icon\") as HTMLImageElement;\n\n this.updateIcon();\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"button\");\n }\n\n this.contentSlot.addEventListener(\"slotchange\", this.onContentSlotChanged);\n }\n\n override disconnectedCallback(): void {\n this.contentSlot.removeEventListener(\"slotchange\", this.onContentSlotChanged);\n }\n\n private get contentSlot() {\n return this.shadowRoot!.querySelector<HTMLSlotElement>(\".content > slot\")!;\n }\n\n private readonly onContentSlotChanged = () => {\n const hasCaption = this.contentSlot.assignedElements().length > 0;\n if (hasCaption) {\n this.setAttribute(\"has-content\", \"\");\n } else {\n this.removeAttribute(\"has-content\");\n }\n };\n\n public override attributeChangedCallback(name: string, oldValue: string | null): void {\n switch (name) {\n case \"icon\": {\n this.updateIcon();\n break;\n }\n case \"variant\": {\n if (this.variant === \"selection\") {\n // Expose toggle semantics, but don't clobber an\n // aria-pressed value already managed by the consumer.\n if (!this.hasAttribute(\"aria-pressed\")) {\n this.setAttribute(\"aria-pressed\", \"false\");\n }\n } else if (oldValue?.toLowerCase() === \"selection\") {\n this.removeAttribute(\"aria-pressed\");\n }\n break;\n }\n }\n }\n\n private updateIcon() {\n if (this._image) {\n const iconSrc = this.getAttribute(\"icon\");\n this._image.src = iconSrc;\n }\n }\n}\nButton.ensureDefined();\n"],"mappings":"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"}
package/dist/docs/doc.mjs CHANGED
@@ -368,7 +368,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
368
368
  <div class="content">
369
369
  <slot></slot>
370
370
  </div>
371
- `,dt=`:host{contain:content;box-sizing:border-box;vertical-align:middle;height:min-content;min-height:36px;padding:var(--spacing-x3,6px) var(--spacing-x4,8px);border-radius:var(--radius-s,4px);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:inline-flex}:host:focus-visible{outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px)}:host:is(:disabled,[disabled],[aria-disabled=true]){cursor:default}:host{background-color:var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4));color:var(--sd-button-color,var(--color-fg-action-neutral-default,#111))}:host:after{content:"";border:var(--sd-button-border,none);border-radius:inherit;pointer-events:none;position:absolute;inset:0}:host(:is(:focus,:hover)){background-color:var(--sd-button-background-color-hover,var(--color-bg-action-neutral-default-hover,#c6c6c6));color:var(--sd-button-color-hover,var(--color-fg-action-neutral-default-hover,#1b1b1b))}:host(:is(:focus,:hover)):after{border-color:var(--sd-button-border-color-hover,transparent)}:host(:active){background-color:var(--sd-button-background-color-pressed,var(--color-bg-action-neutral-default-pressed,#b3b3b3));color:var(--sd-button-color-pressed,var(--color-fg-action-neutral-default-pressed,#242424))}:host(:active):after{border-color:var(--sd-button-border-color-pressed,transparent)}:host(:is([aria-disabled=true],[disabled])){background-color:var(--sd-button-background-color-disabled,var(--color-bg-interaction-disabled,#e7e7e7));color:var(--sd-button-color-disabled,var(--color-fg-interaction-disabled,#999))}:host(:is([aria-disabled=true],[disabled])):after{border-color:var(--sd-button-border-color-disabled,transparent)}:host(:is([aria-disabled=true],[disabled])){cursor:default}:host(:focus-visible){outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px)}:host([variant=primary i]){--sd-button-background-color:var(--color-bg-action-accent-default,#1467ba);--sd-button-color:var(--color-fg-interaction-on-color,#fff);--sd-button-background-color-hover:var(--color-bg-action-accent-default-hover,#0f4d8b);--sd-button-color-hover:var(--color-fg-interaction-on-color,#fff);--sd-button-background-color-pressed:var(--color-bg-action-accent-default-pressed,#0b3a69);--sd-button-color-pressed:var(--color-fg-interaction-on-color,#fff)}:host([variant=outline i]){--sd-button-background-color:var(--color-bg-action-accent-weak,#e0ebf6);--sd-button-color:var(--color-fg-action-accent-default,#1467ba);--sd-button-border:1px solid var(--color-border-action-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-action-accent-weak-hover,#d5e4f3);--sd-button-color-hover:var(--color-fg-action-accent-default-hover,#0f4d8b);--sd-button-border-color-hover:var(--color-border-action-accent-default-hover,#0f4d8b);--sd-button-background-color-pressed:var(--color-bg-action-accent-weak-pressed,#c7dbef);--sd-button-color-pressed:var(--color-fg-action-accent-default-pressed,#0b3a69);--sd-button-border-color-pressed:var(--color-border-action-accent-default-pressed,#0b3a69);--sd-button-background-color-disabled:transparent;--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=ghost i]){--sd-button-background-color:transparent;--sd-button-color:var(--color-fg-action-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-action-accent-weakest-hover,#e0ebf6);--sd-button-color-hover:var(--color-fg-action-accent-default-hover,#0f4d8b);--sd-button-background-color-pressed:var(--color-bg-action-accent-weakest-pressed,#c7dbef);--sd-button-color-pressed:var(--color-fg-action-accent-default-pressed,#0b3a69);--sd-button-background-color-disabled:transparent}:host([variant=outline-danger i]){--sd-button-background-color:var(--color-bg-action-danger-default,#fbdde0);--sd-button-color:var(--color-fg-action-danger-default,#a90014);--sd-button-border:1px solid var(--color-border-action-danger-default,#a90014);--sd-button-background-color-hover:var(--color-bg-action-danger-default-hover,#fad2d6);--sd-button-color-hover:var(--color-fg-action-danger-default-hover,#7f000f);--sd-button-border-color-hover:var(--color-border-action-danger-default-hover,#7f000f);--sd-button-background-color-pressed:var(--color-bg-action-danger-default-pressed,#f8c3c9);--sd-button-color-pressed:var(--color-fg-action-danger-default-pressed,#5f000b);--sd-button-border-color-pressed:var(--color-border-action-danger-default-pressed,#5f000b);--sd-button-background-color-disabled:transparent;--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=ghost-danger i]){--sd-button-background-color:transparent;--sd-button-color:var(--color-fg-action-danger-default,#a90014);--sd-button-background-color-hover:var(--color-bg-action-danger-default-hover,#fad2d6);--sd-button-color-hover:var(--color-fg-action-danger-default-hover,#7f000f);--sd-button-background-color-pressed:var(--color-bg-action-danger-default-pressed,#f8c3c9);--sd-button-color-pressed:var(--color-fg-action-danger-default-pressed,#5f000b);--sd-button-background-color-disabled:transparent}:host([variant=selection i]){--sd-button-background-color:var(--color-bg-selection-neutral-weakest,#fff);--sd-button-color:var(--color-fg-selection-neutral-default,#111);--sd-button-border:1px solid var(--color-border-selection-neutral-default,#999);--sd-button-background-color-hover:var(--color-bg-selection-accent-weak-hover,#e0ebf6);--sd-button-color-hover:var(--color-fg-selection-neutral-default,#111);--sd-button-border-color-hover:var(--color-border-selection-neutral-default,#999);--sd-button-background-color-pressed:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-color-pressed:var(--color-fg-selection-neutral-default,#111);--sd-button-border-color-pressed:var(--color-border-selection-accent-default,#1467ba);--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=custom i]){--sd-button-background-color-hover:color-mix(in oklab, var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4)), var(--color-fg-default,#111) 10%);--sd-button-color-hover:var(--sd-button-color,var(--color-fg-action-neutral-default,#111));--sd-button-background-color-pressed:color-mix(in oklab, var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4)), var(--color-fg-default,#111) 20%);--sd-button-color-pressed:var(--sd-button-color,var(--color-fg-action-neutral-default,#111))}:host([variant=contrast i]){--sd-button-contrast-color:color-mix(in oklab, color(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) xyz round(up, min(1, max(0, .18 - y)), 1) round(up, min(1, max(0, .18 - y)), 1) round(up, min(1, max(0, .18 - y)), 1)), #fff 17.6%);--sd-button-background-color:transparent;--sd-button-color:var(--sd-button-contrast-color);--sd-button-background-color-hover:oklab(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) calc(l + sign(.5 - l) * .1) a b);--sd-button-color-hover:var(--sd-button-contrast-color);--sd-button-background-color-pressed:oklab(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) calc(l + sign(.5 - l) * .2) a b);--sd-button-color-pressed:var(--sd-button-contrast-color);--sd-button-background-color-disabled:transparent}:host([variant=selection i][aria-pressed=true]){--sd-button-background-color:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-border:1px solid var(--color-border-selection-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-border-color-hover:var(--color-border-selection-accent-default,#1467ba)}.icon:is(:not([src]),[src=""],[src="data:,"]){display:none}.content{align-items:center;width:100%;min-width:0;display:flex}.content ::slotted(*){font:var(--text-body,400 15px/20px Inter);margin-left:var(--sd-button-content-padding,8px)}.content ::slotted(:last-child){margin-right:var(--sd-button-content-padding,8px)}.icon{max-height:var(--sd-button-max-icon-size,24px);max-width:var(--sd-button-max-icon-size,24px);color:inherit;flex-shrink:0}::slotted([slot=icon]){flex-shrink:0}`,ft=[`primary`,`outline`,`standard`,`ghost`,`outline-danger`,`ghost-danger`,`selection`,`custom`,`contrast`],pt=`standard`;function mt(e){return ft.includes(e)}var ht=class e extends ne{static{this.ID=`sd-button`}static{this.ensureDefined=()=>{customElements.get(e.ID)||(customElements.define(e.ID,e),X.ensureDefined())}}static{this.styleSheet=new CSSStyleSheet}static{this.styleSheet.replaceSync(dt)}get imageElement(){return this._image}get icon(){return this.getAttribute(`icon`)}set icon(e){this.icon!==e&&(e?this.setAttribute(`icon`,e):this.removeAttribute(`icon`),this.updateIcon())}get variant(){let e=this.getAttribute(`variant`);return mt(e)?e:pt}set variant(e){this.setAttribute(`variant`,mt(e)?e:pt)}get disabled(){return this.getAttribute(`aria-disabled`)==`true`}set disabled(e){this.setAttribute(`aria-disabled`,e.toString())}static get observedAttributes(){return[`icon`,`variant`]}is(){return e.ID}template(){let e=document.createElement(`template`);return e.innerHTML=ut,e}constructor(){super(),this._isSpaceOrEnterKeyDown=!1,this.addEventListener(`keydown`,e=>{this.isSpaceOrEnter(e)&&(this._isSpaceOrEnterKeyDown=!0,e.preventDefault())}),this.addEventListener(`keyup`,e=>{this.isSpaceOrEnter(e)&&this._isSpaceOrEnterKeyDown==1&&(this._isSpaceOrEnterKeyDown=!1,this.click())}),this.addEventListener(`click`,e=>{if(this.disabled||this.hasAttribute(`disabled`)){e.stopImmediatePropagation();return}let t=this.getAttribute(`type`)?.toLowerCase()?.trim();if(t!==`submit`&&t!==`reset`)return;let n=this.closest(`form`);n&&t===`submit`&&n.requestSubmit(),n&&t===`reset`&&n.reset()},{capture:!0})}isSpaceOrEnter(e){switch(e.key){case` `:case`Space`:case`Enter`:return!0;default:return!1}}click(){!this.disabled&&!this.hasAttribute(`disabled`)&&super.click()}connectedCallback(){let t=this.shadowRoot==null;super.connectedCallback(),t&&(this.shadowRoot.adoptedStyleSheets=[e.styleSheet]),this.hasAttribute(`tabIndex`)||(this.tabIndex=0),this._image=this.shadowRoot.querySelector(`.icon`),this.updateIcon(),this.hasAttribute(`role`)||this.setAttribute(`role`,`button`)}attributeChangedCallback(e,t){switch(e){case`icon`:this.updateIcon();break;case`variant`:this.variant===`selection`?this.hasAttribute(`aria-pressed`)||this.setAttribute(`aria-pressed`,`false`):t?.toLowerCase()===`selection`&&this.removeAttribute(`aria-pressed`);break}}updateIcon(){if(this._image){let e=this.getAttribute(`icon`);e&&(this._image.src=e)}}};ht.ensureDefined();var gt=o(((e,t)=>{var n=String,r=function(){return{isColorSupported:!1,reset:n,bold:n,dim:n,italic:n,underline:n,inverse:n,hidden:n,strikethrough:n,black:n,red:n,green:n,yellow:n,blue:n,magenta:n,cyan:n,white:n,gray:n,bgBlack:n,bgRed:n,bgGreen:n,bgYellow:n,bgBlue:n,bgMagenta:n,bgCyan:n,bgWhite:n,blackBright:n,redBright:n,greenBright:n,yellowBright:n,blueBright:n,magentaBright:n,cyanBright:n,whiteBright:n,bgBlackBright:n,bgRedBright:n,bgGreenBright:n,bgYellowBright:n,bgBlueBright:n,bgMagentaBright:n,bgCyanBright:n,bgWhiteBright:n}};t.exports=r(),t.exports.createColors=r})),Z=o(((e,t)=>{t.exports={}})),_t=o(((e,t)=>{var n=gt(),r=Z(),i=class e extends Error{constructor(t,n,r,i,a,o){super(t),this.name=`CssSyntaxError`,this.reason=t,a&&(this.file=a),i&&(this.source=i),o&&(this.plugin=o),n!==void 0&&r!==void 0&&(typeof n==`number`?(this.line=n,this.column=r):(this.line=n.line,this.column=n.column,this.endLine=r.line,this.endColumn=r.column)),this.setMessage(),Error.captureStackTrace&&Error.captureStackTrace(this,e)}setMessage(){this.message=this.plugin?this.plugin+`: `:``,this.message+=this.file?this.file:`<css input>`,this.line!==void 0&&(this.message+=`:`+this.line+`:`+this.column),this.message+=`: `+this.reason}showSourceCode(e){if(!this.source)return``;let t=this.source;e??=n.isColorSupported;let i=e=>e,a=e=>e,o=e=>e;if(e){let{bold:e,gray:t,red:s}=n.createColors(!0);a=t=>e(s(t)),i=e=>t(e),r&&(o=e=>r(e))}let s=t.split(/\r?\n/),c=Math.max(this.line-3,0),l=Math.min(this.line+2,s.length),u=String(l).length;return s.slice(c,l).map((e,t)=>{let n=c+1+t,r=` `+(` `+n).slice(-u)+` | `;if(n===this.line){if(e.length>160){let t=Math.max(0,this.column-20),n=Math.max(this.column+20,this.endColumn+20),s=e.slice(t,n),c=i(r.replace(/\d/g,` `))+e.slice(0,Math.min(this.column-1,19)).replace(/[^\t]/g,` `);return a(`>`)+i(r)+o(s)+`
371
+ `,dt=`:host{contain:content;box-sizing:border-box;vertical-align:middle;height:min-content;min-height:36px;padding:var(--spacing-x3,6px) var(--spacing-x4,8px);border-radius:var(--radius-s,4px);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:inline-flex}:host:focus-visible{outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px)}:host:is(:disabled,[disabled],[aria-disabled=true]){cursor:default}:host{background-color:var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4));color:var(--sd-button-color,var(--color-fg-action-neutral-default,#111))}:host:after{content:"";border:var(--sd-button-border,none);border-radius:inherit;pointer-events:none;position:absolute;inset:0}:host(:is(:focus,:hover)){background-color:var(--sd-button-background-color-hover,var(--color-bg-action-neutral-default-hover,#c6c6c6));color:var(--sd-button-color-hover,var(--color-fg-action-neutral-default-hover,#1b1b1b))}:host(:is(:focus,:hover)):after{border-color:var(--sd-button-border-color-hover,transparent)}:host(:active){background-color:var(--sd-button-background-color-pressed,var(--color-bg-action-neutral-default-pressed,#b3b3b3));color:var(--sd-button-color-pressed,var(--color-fg-action-neutral-default-pressed,#242424))}:host(:active):after{border-color:var(--sd-button-border-color-pressed,transparent)}:host(:is([aria-disabled=true],[disabled])){background-color:var(--sd-button-background-color-disabled,var(--color-bg-interaction-disabled,#e7e7e7));color:var(--sd-button-color-disabled,var(--color-fg-interaction-disabled,#999))}:host(:is([aria-disabled=true],[disabled])):after{border-color:var(--sd-button-border-color-disabled,transparent)}:host(:is([aria-disabled=true],[disabled])){cursor:default}:host(:focus-visible){outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px)}:host([variant=primary i]){--sd-button-background-color:var(--color-bg-action-accent-default,#1467ba);--sd-button-color:var(--color-fg-interaction-on-color,#fff);--sd-button-background-color-hover:var(--color-bg-action-accent-default-hover,#0f4d8b);--sd-button-color-hover:var(--color-fg-interaction-on-color,#fff);--sd-button-background-color-pressed:var(--color-bg-action-accent-default-pressed,#0b3a69);--sd-button-color-pressed:var(--color-fg-interaction-on-color,#fff)}:host([variant=outline i]){--sd-button-background-color:var(--color-bg-action-accent-weak,#e0ebf6);--sd-button-color:var(--color-fg-action-accent-default,#1467ba);--sd-button-border:1px solid var(--color-border-action-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-action-accent-weak-hover,#d5e4f3);--sd-button-color-hover:var(--color-fg-action-accent-default-hover,#0f4d8b);--sd-button-border-color-hover:var(--color-border-action-accent-default-hover,#0f4d8b);--sd-button-background-color-pressed:var(--color-bg-action-accent-weak-pressed,#c7dbef);--sd-button-color-pressed:var(--color-fg-action-accent-default-pressed,#0b3a69);--sd-button-border-color-pressed:var(--color-border-action-accent-default-pressed,#0b3a69);--sd-button-background-color-disabled:transparent;--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=ghost i]){--sd-button-background-color:transparent;--sd-button-color:var(--color-fg-action-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-action-accent-weakest-hover,#e0ebf6);--sd-button-color-hover:var(--color-fg-action-accent-default-hover,#0f4d8b);--sd-button-background-color-pressed:var(--color-bg-action-accent-weakest-pressed,#c7dbef);--sd-button-color-pressed:var(--color-fg-action-accent-default-pressed,#0b3a69);--sd-button-background-color-disabled:transparent}:host([variant=outline-danger i]){--sd-button-background-color:var(--color-bg-action-danger-default,#fbdde0);--sd-button-color:var(--color-fg-action-danger-default,#a90014);--sd-button-border:1px solid var(--color-border-action-danger-default,#a90014);--sd-button-background-color-hover:var(--color-bg-action-danger-default-hover,#fad2d6);--sd-button-color-hover:var(--color-fg-action-danger-default-hover,#7f000f);--sd-button-border-color-hover:var(--color-border-action-danger-default-hover,#7f000f);--sd-button-background-color-pressed:var(--color-bg-action-danger-default-pressed,#f8c3c9);--sd-button-color-pressed:var(--color-fg-action-danger-default-pressed,#5f000b);--sd-button-border-color-pressed:var(--color-border-action-danger-default-pressed,#5f000b);--sd-button-background-color-disabled:transparent;--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=ghost-danger i]){--sd-button-background-color:transparent;--sd-button-color:var(--color-fg-action-danger-default,#a90014);--sd-button-background-color-hover:var(--color-bg-action-danger-default-hover,#fad2d6);--sd-button-color-hover:var(--color-fg-action-danger-default-hover,#7f000f);--sd-button-background-color-pressed:var(--color-bg-action-danger-default-pressed,#f8c3c9);--sd-button-color-pressed:var(--color-fg-action-danger-default-pressed,#5f000b);--sd-button-background-color-disabled:transparent}:host([variant=selection i]){--sd-button-background-color:var(--color-bg-selection-neutral-weakest,#fff);--sd-button-color:var(--color-fg-selection-neutral-default,#111);--sd-button-border:1px solid var(--color-border-selection-neutral-default,#999);--sd-button-background-color-hover:var(--color-bg-selection-accent-weak-hover,#e0ebf6);--sd-button-color-hover:var(--color-fg-selection-neutral-default,#111);--sd-button-border-color-hover:var(--color-border-selection-neutral-default,#999);--sd-button-background-color-pressed:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-color-pressed:var(--color-fg-selection-neutral-default,#111);--sd-button-border-color-pressed:var(--color-border-selection-accent-default,#1467ba);--sd-button-border-color-disabled:var(--color-border-interaction-disabled,#c6c6c6)}:host([variant=custom i]){--sd-button-background-color-hover:color-mix(in oklab, var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4)), var(--color-fg-default,#111) 10%);--sd-button-color-hover:var(--sd-button-color,var(--color-fg-action-neutral-default,#111));--sd-button-background-color-pressed:color-mix(in oklab, var(--sd-button-background-color,var(--color-bg-action-neutral-default,#d4d4d4)), var(--color-fg-default,#111) 20%);--sd-button-color-pressed:var(--sd-button-color,var(--color-fg-action-neutral-default,#111))}:host([variant=contrast i]){--sd-button-contrast-color:color-mix(in oklab, color(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) xyz round(up, min(1, max(0, .18 - y)), 1) round(up, min(1, max(0, .18 - y)), 1) round(up, min(1, max(0, .18 - y)), 1)), #fff 17.6%);--sd-button-background-color:transparent;--sd-button-color:var(--sd-button-contrast-color);--sd-button-background-color-hover:oklab(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) calc(l + sign(.5 - l) * .1) a b);--sd-button-color-hover:var(--sd-button-contrast-color);--sd-button-background-color-pressed:oklab(from var(--sd-button-contrast-source,var(--color-bg-default,#fff)) calc(l + sign(.5 - l) * .2) a b);--sd-button-color-pressed:var(--sd-button-contrast-color);--sd-button-background-color-disabled:transparent}:host([variant=selection i][aria-pressed=true]){--sd-button-background-color:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-border:1px solid var(--color-border-selection-accent-default,#1467ba);--sd-button-background-color-hover:var(--color-bg-selection-accent-weak,#c7dbef);--sd-button-border-color-hover:var(--color-border-selection-accent-default,#1467ba)}.icon:is(:not([src]),[src=""],[src="data:,"]){display:none}:host([has-content]) .content{display:flex}.content{align-items:center;width:100%;min-width:0;display:none}.content ::slotted(*){font:var(--text-body,400 15px/20px Inter);margin-left:var(--sd-button-content-padding,8px)}.content ::slotted(:last-child){margin-right:var(--sd-button-content-padding,8px)}.icon{max-height:var(--sd-button-max-icon-size,24px);max-width:var(--sd-button-max-icon-size,24px);color:inherit;flex-shrink:0}::slotted([slot=icon]){flex-shrink:0}`,ft=[`primary`,`outline`,`standard`,`ghost`,`outline-danger`,`ghost-danger`,`selection`,`custom`,`contrast`],pt=`standard`;function mt(e){return ft.includes(e)}var ht=class e extends ne{static{this.ID=`sd-button`}static{this.ensureDefined=()=>{customElements.get(e.ID)||(customElements.define(e.ID,e),X.ensureDefined())}}static{this.styleSheet=new CSSStyleSheet}static{this.styleSheet.replaceSync(dt)}get imageElement(){return this._image}get icon(){return this.getAttribute(`icon`)}set icon(e){this.icon!==e&&(e?this.setAttribute(`icon`,e):this.removeAttribute(`icon`),this.updateIcon())}get variant(){let e=this.getAttribute(`variant`);return mt(e)?e:pt}set variant(e){this.setAttribute(`variant`,mt(e)?e:pt)}get disabled(){return this.getAttribute(`aria-disabled`)==`true`}set disabled(e){this.setAttribute(`aria-disabled`,e.toString())}static get observedAttributes(){return[`icon`,`variant`]}is(){return e.ID}template(){let e=document.createElement(`template`);return e.innerHTML=ut,e}constructor(){super(),this._isSpaceOrEnterKeyDown=!1,this.onContentSlotChanged=()=>{this.contentSlot.assignedElements().length>0?this.setAttribute(`has-content`,``):this.removeAttribute(`has-content`)},this.addEventListener(`keydown`,e=>{this.isSpaceOrEnter(e)&&(this._isSpaceOrEnterKeyDown=!0,e.preventDefault())}),this.addEventListener(`keyup`,e=>{this.isSpaceOrEnter(e)&&this._isSpaceOrEnterKeyDown==1&&(this._isSpaceOrEnterKeyDown=!1,this.click())}),this.addEventListener(`click`,e=>{if(this.disabled||this.hasAttribute(`disabled`)){e.stopImmediatePropagation();return}let t=this.getAttribute(`type`)?.toLowerCase()?.trim();if(t!==`submit`&&t!==`reset`)return;let n=this.closest(`form`);n&&t===`submit`&&n.requestSubmit(),n&&t===`reset`&&n.reset()},{capture:!0})}isSpaceOrEnter(e){switch(e.key){case` `:case`Space`:case`Enter`:return!0;default:return!1}}click(){!this.disabled&&!this.hasAttribute(`disabled`)&&super.click()}connectedCallback(){let t=this.shadowRoot==null;super.connectedCallback(),t&&(this.shadowRoot.adoptedStyleSheets=[e.styleSheet]),this.hasAttribute(`tabIndex`)||(this.tabIndex=0),this._image=this.shadowRoot.querySelector(`.icon`),this.updateIcon(),this.hasAttribute(`role`)||this.setAttribute(`role`,`button`),this.contentSlot.addEventListener(`slotchange`,this.onContentSlotChanged)}disconnectedCallback(){this.contentSlot.removeEventListener(`slotchange`,this.onContentSlotChanged)}get contentSlot(){return this.shadowRoot.querySelector(`.content > slot`)}attributeChangedCallback(e,t){switch(e){case`icon`:this.updateIcon();break;case`variant`:this.variant===`selection`?this.hasAttribute(`aria-pressed`)||this.setAttribute(`aria-pressed`,`false`):t?.toLowerCase()===`selection`&&this.removeAttribute(`aria-pressed`);break}}updateIcon(){if(this._image){let e=this.getAttribute(`icon`);this._image.src=e}}};ht.ensureDefined();var gt=o(((e,t)=>{var n=String,r=function(){return{isColorSupported:!1,reset:n,bold:n,dim:n,italic:n,underline:n,inverse:n,hidden:n,strikethrough:n,black:n,red:n,green:n,yellow:n,blue:n,magenta:n,cyan:n,white:n,gray:n,bgBlack:n,bgRed:n,bgGreen:n,bgYellow:n,bgBlue:n,bgMagenta:n,bgCyan:n,bgWhite:n,blackBright:n,redBright:n,greenBright:n,yellowBright:n,blueBright:n,magentaBright:n,cyanBright:n,whiteBright:n,bgBlackBright:n,bgRedBright:n,bgGreenBright:n,bgYellowBright:n,bgBlueBright:n,bgMagentaBright:n,bgCyanBright:n,bgWhiteBright:n}};t.exports=r(),t.exports.createColors=r})),Z=o(((e,t)=>{t.exports={}})),_t=o(((e,t)=>{var n=gt(),r=Z(),i=class e extends Error{constructor(t,n,r,i,a,o){super(t),this.name=`CssSyntaxError`,this.reason=t,a&&(this.file=a),i&&(this.source=i),o&&(this.plugin=o),n!==void 0&&r!==void 0&&(typeof n==`number`?(this.line=n,this.column=r):(this.line=n.line,this.column=n.column,this.endLine=r.line,this.endColumn=r.column)),this.setMessage(),Error.captureStackTrace&&Error.captureStackTrace(this,e)}setMessage(){this.message=this.plugin?this.plugin+`: `:``,this.message+=this.file?this.file:`<css input>`,this.line!==void 0&&(this.message+=`:`+this.line+`:`+this.column),this.message+=`: `+this.reason}showSourceCode(e){if(!this.source)return``;let t=this.source;e??=n.isColorSupported;let i=e=>e,a=e=>e,o=e=>e;if(e){let{bold:e,gray:t,red:s}=n.createColors(!0);a=t=>e(s(t)),i=e=>t(e),r&&(o=e=>r(e))}let s=t.split(/\r?\n/),c=Math.max(this.line-3,0),l=Math.min(this.line+2,s.length),u=String(l).length;return s.slice(c,l).map((e,t)=>{let n=c+1+t,r=` `+(` `+n).slice(-u)+` | `;if(n===this.line){if(e.length>160){let t=Math.max(0,this.column-20),n=Math.max(this.column+20,this.endColumn+20),s=e.slice(t,n),c=i(r.replace(/\d/g,` `))+e.slice(0,Math.min(this.column-1,19)).replace(/[^\t]/g,` `);return a(`>`)+i(r)+o(s)+`
372
372
  `+c+a(`^`)}let t=i(r.replace(/\d/g,` `))+e.slice(0,this.column-1).replace(/[^\t]/g,` `);return a(`>`)+i(r)+o(e)+`
373
373
  `+t+a(`^`)}return` `+i(r)+o(e)}).join(`
374
374
  `)}toString(){let e=this.showSourceCode();return e&&=`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cas-smartdesign/button",
3
- "version": "7.1.2",
3
+ "version": "7.1.3",
4
4
  "description": "A button element which encloses the look and feel of the smartdesign button",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "files": [
@@ -17,8 +17,8 @@
17
17
  "registry": "https://registry.npmjs.org/"
18
18
  },
19
19
  "dependencies": {
20
- "@cas-smartdesign/image-embed": "^1.0.2",
21
- "@cas-smartdesign/element-base": "^6.0.0"
20
+ "@cas-smartdesign/element-base": "^6.0.0",
21
+ "@cas-smartdesign/image-embed": "^1.0.2"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@cas-smartdesign/element-preview": "^1.1.0",