@cas-smartdesign/button 7.0.0 → 7.0.2
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.
- package/dist/button.mjs +1 -1
- package/dist/button.mjs.map +1 -1
- package/dist/docs/doc.mjs +4 -4
- package/package.json +4 -4
- package/scss/_button.scss +1 -0
- package/scss/_config.scss +2 -2
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\"></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;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;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,#111))}: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,#111))}: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)
|
|
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;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,#111))}: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,#111))}: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=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;min-width:0;display:flex}.content ::slotted(*){font:var(--text-body);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}", i = [
|
|
5
5
|
"primary",
|
|
6
6
|
"outline",
|
|
7
7
|
"standard",
|
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\\\"></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}\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}\n\n.content ::slotted(*) {\n\tfont: var(--text-body);\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}\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\";\nexport const BUTTON_VARIANTS: ButtonVariant[] = [\n \"primary\",\n \"outline\",\n \"standard\",\n \"ghost\",\n \"outline-danger\",\n \"ghost-danger\",\n \"selection\",\n \"custom\",\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":";;;AAAA,IAAA,IAAe,0zOEqBF,IAAmC;CAC5C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACH,EACK,IAAwC;AAC9C,SAAS,EAAgB,GAA8C;AACnE,QAAO,EAAgB,SAAS,EAAuB;;AAG3D,IAAa,IAAb,MAAa,UAAe,EAAY;;YACR;;;6BACQ;AAChC,GAAK,eAAe,IAAI,EAAO,GAAG,KAC9B,eAAe,OAAO,EAAO,IAAI,EAAO,EACxC,EAAW,eAAe;;;;oBAId,IAAI,eAAe;;CAEvC;AACI,OAAK,WAAW,YAAY,EAAO;;CAMvC,IAAW,eAAe;AACtB,SAAO,KAAK;;CAGhB,IAAW,OAAkC;AACzC,SAAO,KAAK,aAAa,OAAO;;CAGpC,IAAW,KAAK,GAAiC;AAC7C,EAAI,KAAK,SAAS,MACV,IACA,KAAK,aAAa,QAAQ,EAAK,GAE/B,KAAK,gBAAgB,OAAO,EAEhC,KAAK,YAAY;;CAIzB,IAAI,UAAyB;EACzB,IAAM,IAAO,KAAK,aAAa,UAAU;AACzC,SAAO,EAAgB,EAAK,GAAG,IAAO;;CAG1C,IAAI,QAAQ,GAA6C;AACrD,OAAK,aAAa,WAAW,EAAgB,EAAM,GAAG,IAAQ,EAAuB;;CAGzF,IAAW,WAAoB;AAC3B,SAAO,KAAK,aAAa,gBAAgB,IAAI;;CAGjD,IAAW,SAAS,GAAmB;AACnC,OAAK,aAAa,iBAAiB,EAAS,UAAU,CAAC;;CAG3D,WAAW,qBAAqB;AAC5B,SAAO,CAAC,QAAQ,UAAU;;CAG9B,KAAoB;AAChB,SAAO,EAAO;;CAGlB,WAA0C;EACtC,IAAM,IAAW,SAAS,cAAc,WAAW;AAEnD,SADA,EAAS,YAAY,GACd;;CAGX,cAAc;AAeV,EAdA,OAAO,gCArDsB,IAsD7B,KAAK,iBAAiB,YAAY,MAAM;AACpC,GAAI,KAAK,eAAe,EAAE,KACtB,KAAK,yBAAyB,IAC9B,EAAE,gBAAgB;IAExB,EACF,KAAK,iBAAiB,UAAU,MAAM;AAClC,GAAI,KAAK,eAAe,EAAE,IAAI,KAAK,0BAA0B,MACzD,KAAK,yBAAyB,IAC9B,KAAK,OAAO;IAElB,EAEF,KAAK,iBACD,UACC,MAAU;AACP,OAAI,KAAK,YAAY,KAAK,aAAa,WAAW,EAAE;AAChD,MAAM,0BAA0B;AAChC;;GAGJ,IAAM,IAAO,KAAK,aAAa,OAAO,EAAE,aAAa,EAAE,MAAM;AAE7D,OAAI,MAAS,YAAY,MAAS,QAC9B;GAGJ,IAAM,IAAO,KAAK,QAAQ,OAAO;AAMjC,GAJI,KAAQ,MAAS,YACjB,EAAK,eAAe,EAGpB,KAAQ,MAAS,WACjB,EAAK,OAAO;KAGpB,EAAE,SAAS,IAAM,CACpB;;CAGL,eAAuB,GAA+B;AAClD,UAAQ,EAAM,KAAd;GACI,KAAK;GACL,KAAK;GACL,KAAK,QACD,QAAO;GACX,QACI,QAAO;;;CAInB,QAAwB;AACpB,EAAI,CAAC,KAAK,YAAY,CAAC,KAAK,aAAa,WAAW,IAChD,MAAM,OAAO;;CAIrB,oBAAoC;EAChC,IAAM,IAAa,KAAK,cAAc;AAatC,EAZA,MAAM,mBAAmB,EACrB,MACA,KAAK,WAAY,qBAAqB,CAAC,EAAO,WAAW,GAGxD,KAAK,aAAa,WAAW,KAC9B,KAAK,WAAW,IAGpB,KAAK,SAAS,KAAK,WAAY,cAAc,QAAQ,EAErD,KAAK,YAAY,EACZ,KAAK,aAAa,OAAO,IAC1B,KAAK,aAAa,QAAQ,SAAS;;CAI3C,yBAAyC,GAAc,GAA+B;AAClF,UAAQ,GAAR;GACI,KAAK;AACD,SAAK,YAAY;AACjB;GAEJ,KAAK;AACD,IAAI,KAAK,YAAY,cAGZ,KAAK,aAAa,eAAe,IAClC,KAAK,aAAa,gBAAgB,QAAQ,GAEvC,GAAU,aAAa,KAAK,eACnC,KAAK,gBAAgB,eAAe;AAExC;;;CAKZ,aAAqB;AACjB,MAAI,KAAK,QAAQ;GACb,IAAM,IAAU,KAAK,aAAa,OAAO;AACzC,GAAI,MACA,KAAK,OAAO,MAAM;;;;AAKlC,EAAO,eAAe"}
|
|
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}\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}\n\n.content ::slotted(*) {\n\tfont: var(--text-body);\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}\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\";\nexport const BUTTON_VARIANTS: ButtonVariant[] = [\n \"primary\",\n \"outline\",\n \"standard\",\n \"ghost\",\n \"outline-danger\",\n \"ghost-danger\",\n \"selection\",\n \"custom\",\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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"}
|
package/dist/docs/doc.mjs
CHANGED
|
@@ -246,7 +246,7 @@ export default function (root: HTMLElement) {
|
|
|
246
246
|
<button class="sd-btn sd-btn--primary" disabled>Disabled</button>
|
|
247
247
|
</div>
|
|
248
248
|
`,ee=`<h3 id="apply-the-button-styling-to-a-native-<code><button></code>-via-the-scss-mixins.">Apply the button styling to a native <code><button></code> via the SCSS mixins.</h3>
|
|
249
|
-
`,O=`.sd-btn{box-sizing:border-box;vertical-align:middle;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}.sd-btn:focus-visible{outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px)}.sd-btn:is(:disabled,[disabled],[aria-disabled=true]){cursor:default}.sd-btn{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));border:var(--sd-button-border,none)}.sd-btn: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,#111));border-color:var(--sd-button-border-color-hover,transparent)}.sd-btn: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,#111));border-color:var(--sd-button-border-color-pressed,transparent)}.sd-btn:is(:disabled,[disabled],[aria-disabled=true]){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));border-color:var(--sd-button-border-color-disabled,transparent)}.sd-btn{font:var(--text-body)}.sd-btn--primary{--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)}.sd-btn--outline{--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)}.sd-btn--ghost{--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}.sd-btn--outline-danger{--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)}.sd-btn--ghost-danger{--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}.sd-btn--selection{--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)}.sd-btn--selection[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)}`,k=`// Apply the SmartDesign button styling to your own elements — here a native <button>.
|
|
249
|
+
`,O=`.sd-btn{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}.sd-btn:focus-visible{outline:1px solid var(--color-border-interaction-focus,#111);outline-offset:var(--spacing-x1,2px)}.sd-btn:is(:disabled,[disabled],[aria-disabled=true]){cursor:default}.sd-btn{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));border:var(--sd-button-border,none)}.sd-btn: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,#111));border-color:var(--sd-button-border-color-hover,transparent)}.sd-btn: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,#111));border-color:var(--sd-button-border-color-pressed,transparent)}.sd-btn:is(:disabled,[disabled],[aria-disabled=true]){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));border-color:var(--sd-button-border-color-disabled,transparent)}.sd-btn{font:var(--text-body)}.sd-btn--primary{--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)}.sd-btn--outline{--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)}.sd-btn--ghost{--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}.sd-btn--outline-danger{--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)}.sd-btn--ghost-danger{--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}.sd-btn--selection{--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)}.sd-btn--selection[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)}`,k=`// Apply the SmartDesign button styling to your own elements — here a native <button>.
|
|
250
250
|
@use "../../../scss/button" as sd-button; /// @use "@cas-smartdesign/button/scss/button" as sd-button;
|
|
251
251
|
|
|
252
252
|
.sd-btn {
|
|
@@ -282,7 +282,7 @@ export default function (root: HTMLElement) {
|
|
|
282
282
|
}
|
|
283
283
|
`,A=s({default:()=>j}),j={mainContent:D,description:ee,css:{type:`css`,label:`Compiled CSS`,content:O},additionalSources:[{type:`source`,label:`SCSS`,language:`css`,content:k}],isolateMainContent:!0},M=class e extends HTMLElement{static{this.TEMPLATE_CACHE={}}memoizedTemplate(){let t=this.is();if(e.TEMPLATE_CACHE[t])return e.TEMPLATE_CACHE[t];let n=this.template();return window.ShadyCSS&&window.ShadyCSS.prepareTemplate(n,this.is()),e.TEMPLATE_CACHE[t]=n,n}connectedCallback(){let e=this.memoizedTemplate();window.ShadyCSS&&window.ShadyCSS.styleElement(this),this.shadowRoot||(this.attachShadow({mode:`open`}).appendChild(document.importNode(e.content,!0)),requestAnimationFrame(()=>this.dispatchEvent(new CustomEvent(`sd-element-ready`))))}disconnectedCallback(){}attributeChangedCallback(e,t,n){}adoptedCallback(){}connectedMoveCallback(){}whenReady(e){this.shadowRoot?e():this.addEventListener(`sd-element-ready`,()=>e())}};function N(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function P(e){if(Array.isArray(e))return e}function F(e,t){var n=e==null?null:typeof Symbol<`u`&&e[Symbol.iterator]||e[`@@iterator`];if(n!=null){var r,i,a,o,s=[],c=!0,l=!1;try{if(a=(n=n.call(e)).next,t!==0)for(;!(c=(r=a.call(n)).done)&&(s.push(r.value),s.length!==t);c=!0);}catch(e){l=!0,i=e}finally{try{if(!c&&n.return!=null&&(o=n.return(),Object(o)!==o))return}finally{if(l)throw i}}return s}}function te(){throw TypeError(`Invalid attempt to destructure non-iterable instance.
|
|
284
284
|
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function I(e,t){return P(e)||F(e,t)||L(e,t)||te()}function L(e,t){if(e){if(typeof e==`string`)return N(e,t);var n={}.toString.call(e).slice(8,-1);return n===`Object`&&e.constructor&&(n=e.constructor.name),n===`Map`||n===`Set`?Array.from(e):n===`Arguments`||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?N(e,t):void 0}}var ne=Object.entries,re=Object.setPrototypeOf,R=Object.isFrozen,ie=Object.getPrototypeOf,z=Object.getOwnPropertyDescriptor,B=Object.freeze,V=Object.seal,ae=Object.create,oe=typeof Reflect<`u`&&Reflect,se=oe.apply,ce=oe.construct;B||=function(e){return e},V||=function(e){return e},se||=function(e,t){var n=[...arguments].slice(2);return e.apply(t,n)},ce||=function(e){return new e(...[...arguments].slice(1))};var le=G(Array.prototype.forEach),ue=G(Array.prototype.lastIndexOf),de=G(Array.prototype.pop),fe=G(Array.prototype.push),pe=G(Array.prototype.splice),H=Array.isArray,me=G(String.prototype.toLowerCase),he=G(String.prototype.toString),ge=G(String.prototype.match),_e=G(String.prototype.replace),ve=G(String.prototype.indexOf),ye=G(String.prototype.trim),be=G(Number.prototype.toString),xe=G(Boolean.prototype.toString),Se=typeof BigInt>`u`?null:G(BigInt.prototype.toString),Ce=typeof Symbol>`u`?null:G(Symbol.prototype.toString),U=G(Object.prototype.hasOwnProperty),we=G(Object.prototype.toString),W=G(RegExp.prototype.test),Te=Ee(TypeError);function G(e){return function(t){t instanceof RegExp&&(t.lastIndex=0);var n=[...arguments].slice(1);return se(e,t,n)}}function Ee(e){return function(){return ce(e,[...arguments])}}function K(e,t){let n=arguments.length>2&&arguments[2]!==void 0?arguments[2]:me;if(re&&re(e,null),!H(t))return e;let r=t.length;for(;r--;){let i=t[r];if(typeof i==`string`){let e=n(i);e!==i&&(R(t)||(t[r]=e),i=e)}e[i]=!0}return e}function De(e){for(let t=0;t<e.length;t++)U(e,t)||(e[t]=null);return e}function q(e){let t=ae(null);for(let r of ne(e)){var n=I(r,2);let i=n[0],a=n[1];U(e,i)&&(H(a)?t[i]=De(a):a&&typeof a==`object`&&a.constructor===Object?t[i]=q(a):t[i]=a)}return t}function Oe(e){switch(typeof e){case`string`:return e;case`number`:return be(e);case`boolean`:return xe(e);case`bigint`:return Se?Se(e):`0`;case`symbol`:return Ce?Ce(e):`Symbol()`;case`undefined`:return we(e);case`function`:case`object`:{if(e===null)return we(e);let t=e,n=J(t,`toString`);if(typeof n==`function`){let e=n(t);return typeof e==`string`?e:we(e)}return we(e)}default:return we(e)}}function J(e,t){for(;e!==null;){let n=z(e,t);if(n){if(n.get)return G(n.get);if(typeof n.value==`function`)return G(n.value)}e=ie(e)}function n(){return null}return n}function ke(e){try{return W(e,``),!0}catch{return!1}}var Ae=B(`a.abbr.acronym.address.area.article.aside.audio.b.bdi.bdo.big.blink.blockquote.body.br.button.canvas.caption.center.cite.code.col.colgroup.content.data.datalist.dd.decorator.del.details.dfn.dialog.dir.div.dl.dt.element.em.fieldset.figcaption.figure.font.footer.form.h1.h2.h3.h4.h5.h6.head.header.hgroup.hr.html.i.img.input.ins.kbd.label.legend.li.main.map.mark.marquee.menu.menuitem.meter.nav.nobr.ol.optgroup.option.output.p.picture.pre.progress.q.rp.rt.ruby.s.samp.search.section.select.shadow.slot.small.source.spacer.span.strike.strong.style.sub.summary.sup.table.tbody.td.template.textarea.tfoot.th.thead.time.tr.track.tt.u.ul.var.video.wbr`.split(`.`)),je=B(`svg.a.altglyph.altglyphdef.altglyphitem.animatecolor.animatemotion.animatetransform.circle.clippath.defs.desc.ellipse.enterkeyhint.exportparts.filter.font.g.glyph.glyphref.hkern.image.inputmode.line.lineargradient.marker.mask.metadata.mpath.part.path.pattern.polygon.polyline.radialgradient.rect.stop.style.switch.symbol.text.textpath.title.tref.tspan.view.vkern`.split(`.`)),Me=B([`feBlend`,`feColorMatrix`,`feComponentTransfer`,`feComposite`,`feConvolveMatrix`,`feDiffuseLighting`,`feDisplacementMap`,`feDistantLight`,`feDropShadow`,`feFlood`,`feFuncA`,`feFuncB`,`feFuncG`,`feFuncR`,`feGaussianBlur`,`feImage`,`feMerge`,`feMergeNode`,`feMorphology`,`feOffset`,`fePointLight`,`feSpecularLighting`,`feSpotLight`,`feTile`,`feTurbulence`]),Ne=B([`animate`,`color-profile`,`cursor`,`discard`,`font-face`,`font-face-format`,`font-face-name`,`font-face-src`,`font-face-uri`,`foreignobject`,`hatch`,`hatchpath`,`mesh`,`meshgradient`,`meshpatch`,`meshrow`,`missing-glyph`,`script`,`set`,`solidcolor`,`unknown`,`use`]),Pe=B(`math.menclose.merror.mfenced.mfrac.mglyph.mi.mlabeledtr.mmultiscripts.mn.mo.mover.mpadded.mphantom.mroot.mrow.ms.mspace.msqrt.mstyle.msub.msup.msubsup.mtable.mtd.mtext.mtr.munder.munderover.mprescripts`.split(`.`)),Fe=B([`maction`,`maligngroup`,`malignmark`,`mlongdiv`,`mscarries`,`mscarry`,`msgroup`,`mstack`,`msline`,`msrow`,`semantics`,`annotation`,`annotation-xml`,`mprescripts`,`none`]),Ie=B([`#text`]),Le=B(`accept.action.align.alt.autocapitalize.autocomplete.autopictureinpicture.autoplay.background.bgcolor.border.capture.cellpadding.cellspacing.checked.cite.class.clear.color.cols.colspan.command.commandfor.controls.controlslist.coords.crossorigin.datetime.decoding.default.dir.disabled.disablepictureinpicture.disableremoteplayback.download.draggable.enctype.enterkeyhint.exportparts.face.for.headers.height.hidden.high.href.hreflang.id.inert.inputmode.integrity.ismap.kind.label.lang.list.loading.loop.low.max.maxlength.media.method.min.minlength.multiple.muted.name.nonce.noshade.novalidate.nowrap.open.optimum.part.pattern.placeholder.playsinline.popover.popovertarget.popovertargetaction.poster.preload.pubdate.radiogroup.readonly.rel.required.rev.reversed.role.rows.rowspan.spellcheck.scope.selected.shape.size.sizes.slot.span.srclang.start.src.srcset.step.style.summary.tabindex.title.translate.type.usemap.valign.value.width.wrap.xmlns`.split(`.`)),Re=B(`accent-height.accumulate.additive.alignment-baseline.amplitude.ascent.attributename.attributetype.azimuth.basefrequency.baseline-shift.begin.bias.by.class.clip.clippathunits.clip-path.clip-rule.color.color-interpolation.color-interpolation-filters.color-profile.color-rendering.cx.cy.d.dx.dy.diffuseconstant.direction.display.divisor.dur.edgemode.elevation.end.exponent.fill.fill-opacity.fill-rule.filter.filterunits.flood-color.flood-opacity.font-family.font-size.font-size-adjust.font-stretch.font-style.font-variant.font-weight.fx.fy.g1.g2.glyph-name.glyphref.gradientunits.gradienttransform.height.href.id.image-rendering.in.in2.intercept.k.k1.k2.k3.k4.kerning.keypoints.keysplines.keytimes.lang.lengthadjust.letter-spacing.kernelmatrix.kernelunitlength.lighting-color.local.marker-end.marker-mid.marker-start.markerheight.markerunits.markerwidth.maskcontentunits.maskunits.max.mask.mask-type.media.method.mode.min.name.numoctaves.offset.operator.opacity.order.orient.orientation.origin.overflow.paint-order.path.pathlength.patterncontentunits.patterntransform.patternunits.points.preservealpha.preserveaspectratio.primitiveunits.r.rx.ry.radius.refx.refy.repeatcount.repeatdur.restart.result.rotate.scale.seed.shape-rendering.slope.specularconstant.specularexponent.spreadmethod.startoffset.stddeviation.stitchtiles.stop-color.stop-opacity.stroke-dasharray.stroke-dashoffset.stroke-linecap.stroke-linejoin.stroke-miterlimit.stroke-opacity.stroke.stroke-width.style.surfacescale.systemlanguage.tabindex.tablevalues.targetx.targety.transform.transform-origin.text-anchor.text-decoration.text-rendering.textlength.type.u1.u2.unicode.values.viewbox.visibility.version.vert-adv-y.vert-origin-x.vert-origin-y.width.word-spacing.wrap.writing-mode.xchannelselector.ychannelselector.x.x1.x2.xmlns.y.y1.y2.z.zoomandpan`.split(`.`)),ze=B(`accent.accentunder.align.bevelled.close.columnalign.columnlines.columnspacing.columnspan.denomalign.depth.dir.display.displaystyle.encoding.fence.frame.height.href.id.largeop.length.linethickness.lquote.lspace.mathbackground.mathcolor.mathsize.mathvariant.maxsize.minsize.movablelimits.notation.numalign.open.rowalign.rowlines.rowspacing.rowspan.rspace.rquote.scriptlevel.scriptminsize.scriptsizemultiplier.selection.separator.separators.stretchy.subscriptshift.supscriptshift.symmetric.voffset.width.xmlns`.split(`.`)),Be=B([`xlink:href`,`xml:id`,`xlink:title`,`xml:space`,`xmlns:xlink`]),Ve=V(/{{[\w\W]*|^[\w\W]*}}/g),He=V(/<%[\w\W]*|^[\w\W]*%>/g),Ue=V(/\${[\w\W]*/g),We=V(/^data-[\-\w.\u00B7-\uFFFF]+$/),Ge=V(/^aria-[\-\w]+$/),Ke=V(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i),qe=V(/^(?:\w+script|data):/i),Je=V(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),Ye=V(/^html$/i),Xe=V(/^[a-z][.\w]*(-[.\w]+)+$/i),Ze={element:1,attribute:2,text:3,cdataSection:4,entityReference:5,entityNode:6,progressingInstruction:7,comment:8,document:9,documentType:10,documentFragment:11,notation:12},Qe=function(){return typeof window>`u`?null:window},$e=function(e,t){if(typeof e!=`object`||typeof e.createPolicy!=`function`)return null;let n=null,r=`data-tt-policy-suffix`;t&&t.hasAttribute(r)&&(n=t.getAttribute(r));let i=`dompurify`+(n?`#`+n:``);try{return e.createPolicy(i,{createHTML(e){return e},createScriptURL(e){return e}})}catch{return console.warn(`TrustedTypes policy `+i+` could not be created.`),null}},et=function(){return{afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}};function tt(){let e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:Qe(),t=e=>tt(e);if(t.version=`3.4.7`,t.removed=[],!e||!e.document||e.document.nodeType!==Ze.document||!e.Element)return t.isSupported=!1,t;let n=e.document,r=n,i=r.currentScript;e.DocumentFragment;let a=e.HTMLTemplateElement,o=e.Node,s=e.Element,c=e.NodeFilter;e.NamedNodeMap===void 0&&(e.NamedNodeMap||e.MozNamedAttrMap),e.HTMLFormElement;let l=e.DOMParser,u=e.trustedTypes,d=s.prototype,f=J(d,`cloneNode`),p=J(d,`remove`),m=J(d,`nextSibling`),h=J(d,`childNodes`),g=J(d,`parentNode`),_=J(d,`shadowRoot`),v=J(d,`attributes`),y=o&&o.prototype?J(o.prototype,`nodeType`):null,b=o&&o.prototype?J(o.prototype,`nodeName`):null;if(typeof a==`function`){let e=n.createElement(`template`);e.content&&e.content.ownerDocument&&(n=e.content.ownerDocument)}let x,S=``,C=n,w=C.implementation,T=C.createNodeIterator,E=C.createDocumentFragment,D=C.getElementsByTagName,ee=r.importNode,O=et();t.isSupported=typeof ne==`function`&&typeof g==`function`&&w&&w.createHTMLDocument!==void 0;let k=Ve,A=He,j=Ue,M=We,N=Ge,P=qe,F=Je,te=Xe,I=Ke,L=null,re=K({},[...Ae,...je,...Me,...Pe,...Ie]),R=null,ie=K({},[...Le,...Re,...ze,...Be]),z=Object.seal(ae(null,{tagNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},allowCustomizedBuiltInElements:{writable:!0,configurable:!1,enumerable:!0,value:!1}})),V=null,oe=null,se=Object.seal(ae(null,{tagCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeCheck:{writable:!0,configurable:!1,enumerable:!0,value:null}})),ce=!0,be=!0,xe=!1,Se=!0,Ce=!1,we=!0,G=!1,Ee=!1,De=!1,nt=!1,rt=!1,it=!1,at=!0,ot=!1,st=`user-content-`,ct=!0,lt=!1,ut={},Y=null,dt=K({},[`annotation-xml`,`audio`,`colgroup`,`desc`,`foreignobject`,`head`,`iframe`,`math`,`mi`,`mn`,`mo`,`ms`,`mtext`,`noembed`,`noframes`,`noscript`,`plaintext`,`script`,`style`,`svg`,`template`,`thead`,`title`,`video`,`xmp`]),ft=null,pt=K({},[`audio`,`video`,`img`,`source`,`image`,`track`]),X=null,mt=K({},[`alt`,`class`,`for`,`id`,`label`,`name`,`pattern`,`placeholder`,`role`,`summary`,`title`,`value`,`style`,`xmlns`]),ht=`http://www.w3.org/1998/Math/MathML`,gt=`http://www.w3.org/2000/svg`,Z=`http://www.w3.org/1999/xhtml`,_t=Z,vt=!1,yt=null,bt=K({},[ht,gt,Z],he),xt=K({},[`mi`,`mo`,`mn`,`ms`,`mtext`]),St=K({},[`annotation-xml`]),Ct=K({},[`title`,`style`,`font`,`a`,`script`]),wt=null,Tt=[`application/xhtml+xml`,`text/html`],Q=null,Et=null,Dt=n.createElement(`form`),Ot=function(e){return e instanceof RegExp||e instanceof Function},kt=function(){let e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};if(Et&&Et===e)return;(!e||typeof e!=`object`)&&(e={}),e=q(e),wt=Tt.indexOf(e.PARSER_MEDIA_TYPE)===-1?`text/html`:e.PARSER_MEDIA_TYPE,Q=wt===`application/xhtml+xml`?he:me,L=U(e,`ALLOWED_TAGS`)&&H(e.ALLOWED_TAGS)?K({},e.ALLOWED_TAGS,Q):re,R=U(e,`ALLOWED_ATTR`)&&H(e.ALLOWED_ATTR)?K({},e.ALLOWED_ATTR,Q):ie,yt=U(e,`ALLOWED_NAMESPACES`)&&H(e.ALLOWED_NAMESPACES)?K({},e.ALLOWED_NAMESPACES,he):bt,X=U(e,`ADD_URI_SAFE_ATTR`)&&H(e.ADD_URI_SAFE_ATTR)?K(q(mt),e.ADD_URI_SAFE_ATTR,Q):mt,ft=U(e,`ADD_DATA_URI_TAGS`)&&H(e.ADD_DATA_URI_TAGS)?K(q(pt),e.ADD_DATA_URI_TAGS,Q):pt,Y=U(e,`FORBID_CONTENTS`)&&H(e.FORBID_CONTENTS)?K({},e.FORBID_CONTENTS,Q):dt,V=U(e,`FORBID_TAGS`)&&H(e.FORBID_TAGS)?K({},e.FORBID_TAGS,Q):q({}),oe=U(e,`FORBID_ATTR`)&&H(e.FORBID_ATTR)?K({},e.FORBID_ATTR,Q):q({}),ut=U(e,`USE_PROFILES`)?e.USE_PROFILES&&typeof e.USE_PROFILES==`object`?q(e.USE_PROFILES):e.USE_PROFILES:!1,ce=e.ALLOW_ARIA_ATTR!==!1,be=e.ALLOW_DATA_ATTR!==!1,xe=e.ALLOW_UNKNOWN_PROTOCOLS||!1,Se=e.ALLOW_SELF_CLOSE_IN_ATTR!==!1,Ce=e.SAFE_FOR_TEMPLATES||!1,we=e.SAFE_FOR_XML!==!1,G=e.WHOLE_DOCUMENT||!1,nt=e.RETURN_DOM||!1,rt=e.RETURN_DOM_FRAGMENT||!1,it=e.RETURN_TRUSTED_TYPE||!1,De=e.FORCE_BODY||!1,at=e.SANITIZE_DOM!==!1,ot=e.SANITIZE_NAMED_PROPS||!1,ct=e.KEEP_CONTENT!==!1,lt=e.IN_PLACE||!1,I=ke(e.ALLOWED_URI_REGEXP)?e.ALLOWED_URI_REGEXP:Ke,_t=typeof e.NAMESPACE==`string`?e.NAMESPACE:Z,xt=U(e,`MATHML_TEXT_INTEGRATION_POINTS`)&&e.MATHML_TEXT_INTEGRATION_POINTS&&typeof e.MATHML_TEXT_INTEGRATION_POINTS==`object`?q(e.MATHML_TEXT_INTEGRATION_POINTS):K({},[`mi`,`mo`,`mn`,`ms`,`mtext`]),St=U(e,`HTML_INTEGRATION_POINTS`)&&e.HTML_INTEGRATION_POINTS&&typeof e.HTML_INTEGRATION_POINTS==`object`?q(e.HTML_INTEGRATION_POINTS):K({},[`annotation-xml`]);let t=U(e,`CUSTOM_ELEMENT_HANDLING`)&&e.CUSTOM_ELEMENT_HANDLING&&typeof e.CUSTOM_ELEMENT_HANDLING==`object`?q(e.CUSTOM_ELEMENT_HANDLING):ae(null);if(z=ae(null),U(t,`tagNameCheck`)&&Ot(t.tagNameCheck)&&(z.tagNameCheck=t.tagNameCheck),U(t,`attributeNameCheck`)&&Ot(t.attributeNameCheck)&&(z.attributeNameCheck=t.attributeNameCheck),U(t,`allowCustomizedBuiltInElements`)&&typeof t.allowCustomizedBuiltInElements==`boolean`&&(z.allowCustomizedBuiltInElements=t.allowCustomizedBuiltInElements),Ce&&(be=!1),rt&&(nt=!0),ut&&(L=K({},Ie),R=ae(null),ut.html===!0&&(K(L,Ae),K(R,Le)),ut.svg===!0&&(K(L,je),K(R,Re),K(R,Be)),ut.svgFilters===!0&&(K(L,Me),K(R,Re),K(R,Be)),ut.mathMl===!0&&(K(L,Pe),K(R,ze),K(R,Be))),se.tagCheck=null,se.attributeCheck=null,U(e,`ADD_TAGS`)&&(typeof e.ADD_TAGS==`function`?se.tagCheck=e.ADD_TAGS:H(e.ADD_TAGS)&&(L===re&&(L=q(L)),K(L,e.ADD_TAGS,Q))),U(e,`ADD_ATTR`)&&(typeof e.ADD_ATTR==`function`?se.attributeCheck=e.ADD_ATTR:H(e.ADD_ATTR)&&(R===ie&&(R=q(R)),K(R,e.ADD_ATTR,Q))),U(e,`ADD_URI_SAFE_ATTR`)&&H(e.ADD_URI_SAFE_ATTR)&&K(X,e.ADD_URI_SAFE_ATTR,Q),U(e,`FORBID_CONTENTS`)&&H(e.FORBID_CONTENTS)&&(Y===dt&&(Y=q(Y)),K(Y,e.FORBID_CONTENTS,Q)),U(e,`ADD_FORBID_CONTENTS`)&&H(e.ADD_FORBID_CONTENTS)&&(Y===dt&&(Y=q(Y)),K(Y,e.ADD_FORBID_CONTENTS,Q)),ct&&(L[`#text`]=!0),G&&K(L,[`html`,`head`,`body`]),L.table&&(K(L,[`tbody`]),delete V.tbody),e.TRUSTED_TYPES_POLICY){if(typeof e.TRUSTED_TYPES_POLICY.createHTML!=`function`)throw Te(`TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.`);if(typeof e.TRUSTED_TYPES_POLICY.createScriptURL!=`function`)throw Te(`TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.`);x=e.TRUSTED_TYPES_POLICY,S=x.createHTML(``)}else x===void 0&&(x=$e(u,i)),x!==null&&typeof S==`string`&&(S=x.createHTML(``));(O.uponSanitizeElement.length>0||O.uponSanitizeAttribute.length>0)&&L===re&&(L=q(L)),O.uponSanitizeAttribute.length>0&&R===ie&&(R=q(R)),B&&B(e),Et=e},At=K({},[...je,...Me,...Ne]),jt=K({},[...Pe,...Fe]),Mt=function(e){let t=g(e);(!t||!t.tagName)&&(t={namespaceURI:_t,tagName:`template`});let n=me(e.tagName),r=me(t.tagName);return yt[e.namespaceURI]?e.namespaceURI===gt?t.namespaceURI===Z?n===`svg`:t.namespaceURI===ht?n===`svg`&&(r===`annotation-xml`||xt[r]):!!At[n]:e.namespaceURI===ht?t.namespaceURI===Z?n===`math`:t.namespaceURI===gt?n===`math`&&St[r]:!!jt[n]:e.namespaceURI===Z?t.namespaceURI===gt&&!St[r]||t.namespaceURI===ht&&!xt[r]?!1:!jt[n]&&(Ct[n]||!At[n]):!!(wt===`application/xhtml+xml`&&yt[e.namespaceURI]):!1},Nt=function(e){fe(t.removed,{element:e});try{g(e).removeChild(e)}catch{p(e)}},Pt=function(e,n){try{fe(t.removed,{attribute:n.getAttributeNode(e),from:n})}catch{fe(t.removed,{attribute:null,from:n})}if(n.removeAttribute(e),e===`is`)if(nt||rt)try{Nt(n)}catch{}else try{n.setAttribute(e,``)}catch{}},Ft=function(e){let t=null,r=null;if(De)e=`<remove></remove>`+e;else{let t=ge(e,/^[\r\n\t ]+/);r=t&&t[0]}wt===`application/xhtml+xml`&&_t===Z&&(e=`<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>`+e+`</body></html>`);let i=x?x.createHTML(e):e;if(_t===Z)try{t=new l().parseFromString(i,wt)}catch{}if(!t||!t.documentElement){t=w.createDocument(_t,`template`,null);try{t.documentElement.innerHTML=vt?S:i}catch{}}let a=t.body||t.documentElement;return e&&r&&a.insertBefore(n.createTextNode(r),a.childNodes[0]||null),_t===Z?D.call(t,G?`html`:`body`)[0]:G?t.documentElement:a},It=function(e){return T.call(e.ownerDocument||e,e,c.SHOW_ELEMENT|c.SHOW_COMMENT|c.SHOW_TEXT|c.SHOW_PROCESSING_INSTRUCTION|c.SHOW_CDATA_SECTION,null)},Lt=function(e){e.normalize();let t=T.call(e.ownerDocument||e,e,c.SHOW_TEXT|c.SHOW_COMMENT|c.SHOW_CDATA_SECTION|c.SHOW_PROCESSING_INSTRUCTION,null),n=t.nextNode();for(;n;){let e=n.data;le([k,A,j],t=>{e=_e(e,t,` `)}),n.data=e,n=t.nextNode()}},Rt=function(e){let t=b?b(e):null;return typeof t!=`string`||Q(t)!==`form`?!1:typeof e.nodeName!=`string`||typeof e.textContent!=`string`||typeof e.removeChild!=`function`||e.attributes!==v(e)||typeof e.removeAttribute!=`function`||typeof e.setAttribute!=`function`||typeof e.namespaceURI!=`string`||typeof e.insertBefore!=`function`||typeof e.hasChildNodes!=`function`||e.nodeType!==y(e)||e.childNodes!==h(e)},$=function(e){if(!y||typeof e!=`object`||!e)return!1;try{return y(e)===Ze.documentFragment}catch{return!1}},zt=function(e){if(!y||typeof e!=`object`||!e)return!1;try{return typeof y(e)==`number`}catch{return!1}};function Bt(e,n,r){le(e,e=>{e.call(t,n,r,Et)})}let Vt=function(e){let n=null;if(Bt(O.beforeSanitizeElements,e,null),Rt(e))return Nt(e),!0;let r=Q(e.nodeName);if(Bt(O.uponSanitizeElement,e,{tagName:r,allowedTags:L}),we&&e.hasChildNodes()&&!zt(e.firstElementChild)&&W(/<[/\w!]/g,e.innerHTML)&&W(/<[/\w!]/g,e.textContent)||we&&e.namespaceURI===Z&&r===`style`&&zt(e.firstElementChild)||e.nodeType===Ze.progressingInstruction||we&&e.nodeType===Ze.comment&&W(/<[/\w]/g,e.data))return Nt(e),!0;if(V[r]||!(se.tagCheck instanceof Function&&se.tagCheck(r))&&!L[r]){if(!V[r]&&Wt(r)&&(z.tagNameCheck instanceof RegExp&&W(z.tagNameCheck,r)||z.tagNameCheck instanceof Function&&z.tagNameCheck(r)))return!1;if(ct&&!Y[r]){let t=g(e),n=h(e);if(n&&t){let r=n.length;for(let i=r-1;i>=0;--i){let r=f(n[i],!0);t.insertBefore(r,m(e))}}}return Nt(e),!0}return(y?y(e):e.nodeType)===Ze.element&&!Mt(e)||(r===`noscript`||r===`noembed`||r===`noframes`)&&W(/<\/no(script|embed|frames)/i,e.innerHTML)?(Nt(e),!0):(Ce&&e.nodeType===Ze.text&&(n=e.textContent,le([k,A,j],e=>{n=_e(n,e,` `)}),e.textContent!==n&&(fe(t.removed,{element:e.cloneNode()}),e.textContent=n)),Bt(O.afterSanitizeElements,e,null),!1)},Ht=function(e,t,r){if(oe[t]||at&&(t===`id`||t===`name`)&&(r in n||r in Dt))return!1;let i=R[t]||se.attributeCheck instanceof Function&&se.attributeCheck(t,e);if(!(be&&!oe[t]&&W(M,t))&&!(ce&&W(N,t))){if(!i||oe[t]){if(!(Wt(e)&&(z.tagNameCheck instanceof RegExp&&W(z.tagNameCheck,e)||z.tagNameCheck instanceof Function&&z.tagNameCheck(e))&&(z.attributeNameCheck instanceof RegExp&&W(z.attributeNameCheck,t)||z.attributeNameCheck instanceof Function&&z.attributeNameCheck(t,e))||t===`is`&&z.allowCustomizedBuiltInElements&&(z.tagNameCheck instanceof RegExp&&W(z.tagNameCheck,r)||z.tagNameCheck instanceof Function&&z.tagNameCheck(r))))return!1}else if(!X[t]&&!W(I,_e(r,F,``))&&!((t===`src`||t===`xlink:href`||t===`href`)&&e!==`script`&&ve(r,`data:`)===0&&ft[e])&&!(xe&&!W(P,_e(r,F,``)))&&r)return!1}return!0},Ut=K({},[`annotation-xml`,`color-profile`,`font-face`,`font-face-format`,`font-face-name`,`font-face-src`,`font-face-uri`,`missing-glyph`]),Wt=function(e){return!Ut[me(e)]&&W(te,e)},Gt=function(e){Bt(O.beforeSanitizeAttributes,e,null);let n=e.attributes;if(!n||Rt(e))return;let r={attrName:``,attrValue:``,keepAttr:!0,allowedAttributes:R,forceKeepAttr:void 0},i=n.length;for(;i--;){let a=n[i],o=a.name,s=a.namespaceURI,c=a.value,l=Q(o),d=c,f=o===`value`?d:ye(d);if(r.attrName=l,r.attrValue=f,r.keepAttr=!0,r.forceKeepAttr=void 0,Bt(O.uponSanitizeAttribute,e,r),f=r.attrValue,ot&&(l===`id`||l===`name`)&&ve(f,st)!==0&&(Pt(o,e),f=st+f),we&&W(/((--!?|])>)|<\/(style|script|title|xmp|textarea|noscript|iframe|noembed|noframes)/i,f)){Pt(o,e);continue}if(l===`attributename`&&ge(f,`href`)){Pt(o,e);continue}if(r.forceKeepAttr)continue;if(!r.keepAttr){Pt(o,e);continue}if(!Se&&W(/\/>/i,f)){Pt(o,e);continue}Ce&&le([k,A,j],e=>{f=_e(f,e,` `)});let p=Q(e.nodeName);if(!Ht(p,l,f)){Pt(o,e);continue}if(x&&typeof u==`object`&&typeof u.getAttributeType==`function`&&!s)switch(u.getAttributeType(p,l)){case`TrustedHTML`:f=x.createHTML(f);break;case`TrustedScriptURL`:f=x.createScriptURL(f);break}if(f!==d)try{s?e.setAttributeNS(s,o,f):e.setAttribute(o,f),Rt(e)?Nt(e):de(t.removed)}catch{Pt(o,e)}}Bt(O.afterSanitizeAttributes,e,null)},Kt=function(e){let t=null,n=It(e);for(Bt(O.beforeSanitizeShadowDOM,e,null);t=n.nextNode();)if(Bt(O.uponSanitizeShadowNode,t,null),Vt(t),Gt(t),$(t.content)&&Kt(t.content),(y?y(t):t.nodeType)===Ze.element){let e=_?_(t):t.shadowRoot;$(e)&&(qt(e),Kt(e))}Bt(O.afterSanitizeShadowDOM,e,null)},qt=function(e){let t=y?y(e):e.nodeType;if(t===Ze.element){let t=_?_(e):e.shadowRoot;$(t)&&(qt(t),Kt(t))}let n=h?h(e):e.childNodes;if(!n)return;let r=[];le(n,e=>{fe(r,e)});for(let e of r)qt(e);if(t===Ze.element){let t=b?b(e):null;if(typeof t==`string`&&Q(t)===`template`){let t=e.content;$(t)&&qt(t)}}};return t.sanitize=function(e){let n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},i=null,a=null,o=null,s=null;if(vt=!e,vt&&(e=`<!-->`),typeof e!=`string`&&!zt(e)&&(e=Oe(e),typeof e!=`string`))throw Te(`dirty is not a string, aborting`);if(!t.isSupported)return e;if(Ee||kt(n),t.removed=[],typeof e==`string`&&(lt=!1),lt){let t=b?b(e):e.nodeName;if(typeof t==`string`){let e=Q(t);if(!L[e]||V[e])throw Te(`root node is forbidden and cannot be sanitized in-place`)}if(Rt(e))throw Te(`root node is clobbered and cannot be sanitized in-place`);qt(e)}else if(zt(e))i=Ft(`<!---->`),a=i.ownerDocument.importNode(e,!0),a.nodeType===Ze.element&&a.nodeName===`BODY`||a.nodeName===`HTML`?i=a:i.appendChild(a),qt(a);else{if(!nt&&!Ce&&!G&&e.indexOf(`<`)===-1)return x&&it?x.createHTML(e):e;if(i=Ft(e),!i)return nt?null:it?S:``}i&&De&&Nt(i.firstChild);let c=It(lt?e:i);for(;o=c.nextNode();)Vt(o),Gt(o),$(o.content)&&Kt(o.content);if(lt)return Ce&&Lt(e),e;if(nt){if(Ce&&Lt(i),rt)for(s=E.call(i.ownerDocument);i.firstChild;)s.appendChild(i.firstChild);else s=i;return(R.shadowroot||R.shadowrootmode)&&(s=ee.call(r,s,!0)),s}let l=G?i.outerHTML:i.innerHTML;return G&&L[`!doctype`]&&i.ownerDocument&&i.ownerDocument.doctype&&i.ownerDocument.doctype.name&&W(Ye,i.ownerDocument.doctype.name)&&(l=`<!DOCTYPE `+i.ownerDocument.doctype.name+`>
|
|
285
|
-
`+l),Ce&&le([k,A,j],e=>{l=_e(l,e,` `)}),x&&it?x.createHTML(l):l},t.setConfig=function(){kt(arguments.length>0&&arguments[0]!==void 0?arguments[0]:{}),Ee=!0},t.clearConfig=function(){Et=null,Ee=!1},t.isValidAttribute=function(e,t,n){return Et||kt({}),Ht(Q(e),Q(t),n)},t.addHook=function(e,t){typeof t==`function`&&fe(O[e],t)},t.removeHook=function(e,t){if(t!==void 0){let n=ue(O[e],t);return n===-1?void 0:pe(O[e],n,1)[0]}return de(O[e])},t.removeHooks=function(e){O[e]=[]},t.removeAllHooks=function(){O=et()},t}var nt=tt(),rt={USE_PROFILES:{svg:!0},FORBID_TAGS:[`script`,`use`],RETURN_TRUSTED_TYPE:!0},it=/url\s*\(\s*['"]?\s*(javascript|data|vbscript)\s*:/gi,at=[`fill`,`stroke`,`filter`,`clip-path`,`mask`,`marker-start`,`marker-mid`,`marker-end`];nt.addHook(`afterSanitizeAttributes`,e=>{let t=e.getAttribute(`style`);t&&(it.lastIndex=0,it.test(t)&&e.removeAttribute(`style`));for(let t of at){let n=e.getAttribute(t);n&&(it.lastIndex=0,it.test(n)&&e.removeAttribute(t))}});var ot=class{constructor(){this._internalPolicy=null}get trustedTypePolicy(){return this._internalPolicy===null?window.trustedTypes?.createPolicy?(this._internalPolicy=window.trustedTypes.createPolicy(st.ID,{createHTML(e){return nt.sanitize(e,rt)}}),this._internalPolicy):null:this._internalPolicy}sanitize(e,t){if(e!=null)return e.createHTML(t);let n=this.trustedTypePolicy;return n==null?nt.sanitize(t,rt):n.createHTML(t)}},st=class e extends HTMLElement{static{this.ID=`sd-image-embed`}static{this.ensureDefined=()=>{customElements.get(e.ID)||customElements.define(e.ID,e)}}static{this.styleSheet=new CSSStyleSheet}static{this.styleSheet.replaceSync(`
|
|
285
|
+
`+l),Ce&&le([k,A,j],e=>{l=_e(l,e,` `)}),x&&it?x.createHTML(l):l},t.setConfig=function(){kt(arguments.length>0&&arguments[0]!==void 0?arguments[0]:{}),Ee=!0},t.clearConfig=function(){Et=null,Ee=!1},t.isValidAttribute=function(e,t,n){return Et||kt({}),Ht(Q(e),Q(t),n)},t.addHook=function(e,t){typeof t==`function`&&fe(O[e],t)},t.removeHook=function(e,t){if(t!==void 0){let n=ue(O[e],t);return n===-1?void 0:pe(O[e],n,1)[0]}return de(O[e])},t.removeHooks=function(e){O[e]=[]},t.removeAllHooks=function(){O=et()},t}var nt=tt(),rt={USE_PROFILES:{svg:!0},FORBID_TAGS:[`script`,`use`],ADD_ATTR:[`from`,`to`,`calcmode`],RETURN_TRUSTED_TYPE:!0},it=/url\s*\(\s*['"]?\s*(javascript|data|vbscript)\s*:/gi,at=[`fill`,`stroke`,`filter`,`clip-path`,`mask`,`marker-start`,`marker-mid`,`marker-end`];nt.addHook(`afterSanitizeAttributes`,e=>{let t=e.getAttribute(`style`);t&&(it.lastIndex=0,it.test(t)&&e.removeAttribute(`style`));for(let t of at){let n=e.getAttribute(t);n&&(it.lastIndex=0,it.test(n)&&e.removeAttribute(t))}});var ot=class{constructor(){this._internalPolicy=null}get trustedTypePolicy(){return this._internalPolicy===null?window.trustedTypes?.createPolicy?(this._internalPolicy=window.trustedTypes.createPolicy(st.ID,{createHTML(e){return nt.sanitize(e,rt)}}),this._internalPolicy):null:this._internalPolicy}sanitize(e,t){if(e!=null)return e.createHTML(t);let n=this.trustedTypePolicy;return n==null?nt.sanitize(t,rt):n.createHTML(t)}},st=class e extends HTMLElement{static{this.ID=`sd-image-embed`}static{this.ensureDefined=()=>{customElements.get(e.ID)||customElements.define(e.ID,e)}}static{this.styleSheet=new CSSStyleSheet}static{this.styleSheet.replaceSync(`
|
|
286
286
|
:host {
|
|
287
287
|
display: inline-flex;
|
|
288
288
|
align-items: center;
|
|
@@ -305,12 +305,12 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
305
305
|
min-width: min(100%, var(--natural-width));
|
|
306
306
|
object-fit: scale-down;
|
|
307
307
|
}`)}static get observedAttributes(){return[`src`,`placeholder-src`]}constructor(){super(),this._loadPending=null,this._renderedPlaceholder=null,this._renderedSrc=null,this.trustedTypePolicy=null;let t=this.attachShadow({mode:`open`});this._privateStyleSheet=new CSSStyleSheet,t.adoptedStyleSheets=[e.styleSheet,this._privateStyleSheet],this._sanitizer=new ot}connectedCallback(){this.svgContent&&this.inlineSVG(this.svgContent),this.role||=`img`,this.updateContentDependentStyle()}attributeChangedCallback(e,t,n){(e===`src`||e===`placeholder-src`)&&t!==n&&this._loadPending==null&&(this._loadPending=window.requestAnimationFrame(()=>{this._loadPending=null,this.loadSvg()}))}updateContentDependentStyle(){let e=!!this.src||!!this.placeholderSrc||this.shadowRoot?.querySelector(`svg`)!=null;this.classList.toggle(`no-image`,!e)}async loadSvg(){this.shadowRoot&&(this._renderedSrc===this.src&&this.shadowRoot.querySelector(`img:not(.placeholder),svg:not(.placeholder)`)!=null||(this.placeholderSrc!=this._renderedPlaceholder&&(this._renderedPlaceholder=this.placeholderSrc,this.placeholderSrc&&this.renderUrl(this.placeholderSrc,!0)),this.src!=this._renderedSrc&&(this._renderedSrc=this.src,this.src&&this.renderUrl(this.src,!1))))}async renderUrl(e,t){let n=new URL(e,document.baseURI);if(n.protocol===`data:`){this.renderDataUrl(e,t);return}n.protocol.startsWith(`http`)&&n.origin===new URL(document.baseURI).origin&&n.searchParams.set(`skip-token-processing`,``);try{let r=await fetch(n);if(!r.ok)if(r.status==404){this.updateContentDependentStyle();return}else throw Error();if(r.headers.get(`content-type`)?.includes(`image/svg+xml`)){let n=await r.text();this.isRelevantRendering(e,t)&&this.inlineSVG(n,t);return}r.status==204?this.updateContentDependentStyle():this.handleImageFallback(e,t,await r.blob())}catch{this.handleImageFallback(e,t)}}renderDataUrl(e,t){let n=/^data:([^,]*),(.*)$/s.exec(e);if(n&&/^image\/svg\+xml/i.test(n[1])){let r=/;base64/i.test(n[1])?atob(n[2]):decodeURIComponent(n[2]);this.isRelevantRendering(e,t)&&this.inlineSVG(r,t)}else this.handleImageFallback(e,t)}get src(){return this.getAttribute(`src`)}set src(e){e?this.setAttribute(`src`,e):this.removeAttribute(`src`)}get placeholderSrc(){return this.getAttribute(`placeholder-src`)}set placeholderSrc(e){e?this.setAttribute(`placeholder-src`,e):this.removeAttribute(`placeholder-src`)}get svgContent(){return this._svgContent}set svgContent(e){this.inlineSVG(e)}inlineSVG(e,t){if(this._svgContent=this.svgContent,!this.shadowRoot)return;this.initShadowRoot();let n=new DOMParser,r=(e?n.parseFromString(this._sanitizer.sanitize(this.trustedTypePolicy,e),`image/svg+xml`):void 0)?.querySelector(`svg`);if(r){let e=parseFloat(r.getAttribute(`width`)||`0`),n=parseFloat(r.getAttribute(`height`)||`0`),i=r.getAttribute(`viewBox`);if((!e||!n)&&i){let t=i.split(/\s+/);t.length===4&&(e||=parseFloat(t[2]),n||=parseFloat(t[3]))}e&&n&&(this.style.setProperty(`--image-aspect-ratio`,`${e} / ${n}`),this.style.setProperty(`--natural-width`,`${e}px`),this.style.maxWidth=`${e}px`),r.setAttribute(`preserveAspectRatio`,`xMidYMid meet`),r.removeAttribute(`width`),r.removeAttribute(`height`),(i==null||i.trim()==``&&e&&n)&&r.setAttribute(`viewBox`,`0 0 ${e} ${n}`);let a=r.getAttribute(`color`);r.removeAttribute(`color`),a?this._privateStyleSheet.replaceSync(`:host {color: var(--sd-image-embed-color, ${a})}`):this._privateStyleSheet.replaceSync(`:host {color: var(--sd-image-embed-color)}`),this.shadowRoot.appendChild(r),r.classList.toggle(`placeholder`,t),r.part=`svg`,this.dispatchEvent(new CustomEvent(`load`))}else this.dispatchEvent(new CustomEvent(`error`));this.updateContentDependentStyle()}handleImageFallback(e,t,n){if(this.shadowRoot&&(this.initShadowRoot(),this.isRelevantRendering(e,t))){if(!t){let e=this.shadowRoot.querySelector(`.placeholder`);e&&e.remove()}let r=document.createElement(`img`);r.classList.toggle(`placeholder`,t),r.src=n==null?e:URL.createObjectURL(n),r.part=`img`;let i=()=>{n!=null&&URL.revokeObjectURL(r.src)};r.onload=()=>{this.style.setProperty(`--image-aspect-ratio`,`${r.naturalWidth} / ${r.naturalHeight}`),this.style.maxWidth=`${r.naturalWidth}px`,this.style.setProperty(`--natural-width`,`${r.naturalWidth}px`),this.dispatchEvent(new CustomEvent(`load`)),i()},r.onerror=()=>{this.dispatchEvent(new CustomEvent(`error`)),i()},this.shadowRoot.appendChild(r),this.updateContentDependentStyle()}}isRelevantRendering(e,t){return this.shadowRoot?t?this.placeholderSrc==e&&this.shadowRoot.querySelector(`svg,img`)==null:this.src==e:!1}initShadowRoot(){this.shadowRoot&&(this.shadowRoot.innerHTML=``)}};st.ensureDefined();var ct=`<slot name="icon">
|
|
308
|
-
<sd-image-embed class="icon" part="icon"></sd-image-embed>
|
|
308
|
+
<sd-image-embed class="icon" part="icon" exportparts="img, svg"></sd-image-embed>
|
|
309
309
|
</slot>
|
|
310
310
|
<div class="content">
|
|
311
311
|
<slot></slot>
|
|
312
312
|
</div>
|
|
313
|
-
`,lt=`:host{contain:content;box-sizing:border-box;vertical-align:middle;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;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,#111))}: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,#111))}: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) 12%);--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) 22%);--sd-button-color-pressed:var(--sd-button-color,var(--color-fg-action-neutral-default,#111))}: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;min-width:0;display:flex}.content ::slotted(*){font:var(--text-body);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)}`,ut=[`primary`,`outline`,`standard`,`ghost`,`outline-danger`,`ghost-danger`,`selection`,`custom`],Y=`standard`;function dt(e){return ut.includes(e)}var ft=class e extends M{static{this.ID=`sd-button`}static{this.ensureDefined=()=>{customElements.get(e.ID)||(customElements.define(e.ID,e),st.ensureDefined())}}static{this.styleSheet=new CSSStyleSheet}static{this.styleSheet.replaceSync(lt)}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 dt(e)?e:Y}set variant(e){this.setAttribute(`variant`,dt(e)?e:Y)}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=ct,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)}}};ft.ensureDefined();var pt=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})),X=o(((e,t)=>{t.exports={}})),mt=o(((e,t)=>{var n=pt(),r=X(),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)+`
|
|
313
|
+
`,lt=`: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;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,#111))}: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,#111))}: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=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;min-width:0;display:flex}.content ::slotted(*){font:var(--text-body);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}`,ut=[`primary`,`outline`,`standard`,`ghost`,`outline-danger`,`ghost-danger`,`selection`,`custom`],Y=`standard`;function dt(e){return ut.includes(e)}var ft=class e extends M{static{this.ID=`sd-button`}static{this.ensureDefined=()=>{customElements.get(e.ID)||(customElements.define(e.ID,e),st.ensureDefined())}}static{this.styleSheet=new CSSStyleSheet}static{this.styleSheet.replaceSync(lt)}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 dt(e)?e:Y}set variant(e){this.setAttribute(`variant`,dt(e)?e:Y)}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=ct,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)}}};ft.ensureDefined();var pt=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})),X=o(((e,t)=>{t.exports={}})),mt=o(((e,t)=>{var n=pt(),r=X(),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)+`
|
|
314
314
|
`+c+a(`^`)}let t=i(r.replace(/\d/g,` `))+e.slice(0,this.column-1).replace(/[^\t]/g,` `);return a(`>`)+i(r)+o(e)+`
|
|
315
315
|
`+t+a(`^`)}return` `+i(r)+o(e)}).join(`
|
|
316
316
|
`)}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.0.
|
|
3
|
+
"version": "7.0.2",
|
|
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": [
|
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@cas-smartdesign/element-base": "^6.0.0",
|
|
21
|
-
"@cas-smartdesign/image-embed": "^1.0.
|
|
21
|
+
"@cas-smartdesign/image-embed": "^1.0.2"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
|
-
"@cas-smartdesign/
|
|
25
|
-
"@cas-smartdesign/
|
|
24
|
+
"@cas-smartdesign/license-generator": "^1.10.0",
|
|
25
|
+
"@cas-smartdesign/element-preview": "^1.1.0"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@cas-smartdesign/design-tokens": "^3.0.1"
|
package/scss/_button.scss
CHANGED
package/scss/_config.scss
CHANGED
|
@@ -104,9 +104,9 @@ $variants: (
|
|
|
104
104
|
// and --sd-button-color, and hover/pressed are derived from them automatically.
|
|
105
105
|
// Any state can still be pinned by overriding the matching --sd-button-* property.
|
|
106
106
|
"custom": (
|
|
107
|
-
"background-color-hover": color-mix(in oklab, $_custom-bg, var(--color-fg-default, #111111)
|
|
107
|
+
"background-color-hover": color-mix(in oklab, $_custom-bg, var(--color-fg-default, #111111) 10%),
|
|
108
108
|
"color-hover": $_custom-fg,
|
|
109
|
-
"background-color-pressed": color-mix(in oklab, $_custom-bg, var(--color-fg-default, #111111)
|
|
109
|
+
"background-color-pressed": color-mix(in oklab, $_custom-bg, var(--color-fg-default, #111111) 20%),
|
|
110
110
|
"color-pressed": $_custom-fg,
|
|
111
111
|
),
|
|
112
112
|
);
|