@cas-smartdesign/button 5.4.0 → 7.0.0

package/scss/_config.scss

@@ -0,0 +1,158 @@
+@use "sass:map";
+
+// Single source of truth shared by the component's shadow styles (../styles.scss)
+// and the public mixins (_button.scss). Keep selector-agnostic: declarations only,
+// callers provide the selector (`:host(...)` for the component, `&` for consumers).
+
+// Neutral (standard variant) colors per interactive state. These are the fallbacks
+// the engine paints with when no variant overrides the corresponding --sd-button-*.
+$neutral: (
+	"base": (
+		"bg": var(--color-bg-action-neutral-default, #d4d4d4),
+		"fg": var(--color-fg-action-neutral-default, #111111),
+	),
+	"hover": (
+		"bg": var(--color-bg-action-neutral-default-hover, #c6c6c6),
+		"fg": var(--color-fg-action-neutral-default-hover, #111111),
+	),
+	"pressed": (
+		"bg": var(--color-bg-action-neutral-default-pressed, #b3b3b3),
+		"fg": var(--color-fg-action-neutral-default-pressed, #111111),
+	),
+	"disabled": (
+		"bg": var(--color-bg-interaction-disabled, #e7e7e7),
+		"fg": var(--color-fg-interaction-disabled, #999999),
+	),
+);
+
+// Custom variant rest colors: the consumer's --sd-button-* override, falling back
+// to the neutral defaults the engine already paints. Used to derive coherent
+// hover/pressed states so a minimal override (just rest bg + fg) is enough.
+$_custom-bg: var(--sd-button-background-color, #{map.get(map.get($neutral, "base"), "bg")});
+$_custom-fg: var(--sd-button-color, #{map.get(map.get($neutral, "base"), "fg")});
+
+// Per-variant --sd-button-* values. Adding a variant is a single map entry.
+$variants: (
+	"primary": (
+		"background-color": var(--color-bg-action-accent-default, #1467ba),
+		"color": var(--color-fg-interaction-on-color, #ffffff),
+		"background-color-hover": var(--color-bg-action-accent-default-hover, #0f4d8b),
+		"color-hover": var(--color-fg-interaction-on-color, #ffffff),
+		"background-color-pressed": var(--color-bg-action-accent-default-pressed, #0b3a69),
+		"color-pressed": var(--color-fg-interaction-on-color, #ffffff),
+	),
+	"outline": (
+		"background-color": var(--color-bg-action-accent-weak, #e0ebf6),
+		"color": var(--color-fg-action-accent-default, #1467ba),
+		"border": 1px solid var(--color-border-action-accent-default, #1467ba),
+		"background-color-hover": var(--color-bg-action-accent-weak-hover, #d5e4f3),
+		"color-hover": var(--color-fg-action-accent-default-hover, #0f4d8b),
+		"border-color-hover": var(--color-border-action-accent-default-hover, #0f4d8b),
+		"background-color-pressed": var(--color-bg-action-accent-weak-pressed, #c7dbef),
+		"color-pressed": var(--color-fg-action-accent-default-pressed, #0b3a69),
+		"border-color-pressed": var(--color-border-action-accent-default-pressed, #0b3a69),
+		"background-color-disabled": transparent,
+		"border-color-disabled": var(--color-border-interaction-disabled, #c6c6c6),
+	),
+	"ghost": (
+		"background-color": transparent,
+		"color": var(--color-fg-action-accent-default, #1467ba),
+		"background-color-hover": var(--color-bg-action-accent-weakest-hover, #e0ebf6),
+		"color-hover": var(--color-fg-action-accent-default-hover, #0f4d8b),
+		"background-color-pressed": var(--color-bg-action-accent-weakest-pressed, #c7dbef),
+		"color-pressed": var(--color-fg-action-accent-default-pressed, #0b3a69),
+		"background-color-disabled": transparent,
+	),
+	"outline-danger": (
+		"background-color": var(--color-bg-action-danger-default, #fbdde0),
+		"color": var(--color-fg-action-danger-default, #a90014),
+		"border": 1px solid var(--color-border-action-danger-default, #a90014),
+		"background-color-hover": var(--color-bg-action-danger-default-hover, #fad2d6),
+		"color-hover": var(--color-fg-action-danger-default-hover, #7f000f),
+		"border-color-hover": var(--color-border-action-danger-default-hover, #7f000f),
+		"background-color-pressed": var(--color-bg-action-danger-default-pressed, #f8c3c9),
+		"color-pressed": var(--color-fg-action-danger-default-pressed, #5f000b),
+		"border-color-pressed": var(--color-border-action-danger-default-pressed, #5f000b),
+		"background-color-disabled": transparent,
+		"border-color-disabled": var(--color-border-interaction-disabled, #c6c6c6),
+	),
+	"ghost-danger": (
+		"background-color": transparent,
+		"color": var(--color-fg-action-danger-default, #a90014),
+		"background-color-hover": var(--color-bg-action-danger-default-hover, #fad2d6),
+		"color-hover": var(--color-fg-action-danger-default-hover, #7f000f),
+		"background-color-pressed": var(--color-bg-action-danger-default-pressed, #f8c3c9),
+		"color-pressed": var(--color-fg-action-danger-default-pressed, #5f000b),
+		"background-color-disabled": transparent,
+	),
+	// Toggle/selection look (segmented controls, filter chips): neutral at rest,
+	// accent colors when selected. The selected appearance is applied via
+	// selection-checked-vars on [aria-pressed="true"].
+	"selection": (
+			"background-color": var(--color-bg-selection-neutral-weakest, #ffffff),
+			"color": var(--color-fg-selection-neutral-default, #111111),
+			"border": 1px solid var(--color-border-selection-neutral-default, #999999),
+			"background-color-hover": var(--color-bg-selection-accent-weak-hover, #e0ebf6),
+			"color-hover": var(--color-fg-selection-neutral-default, #111111),
+			"border-color-hover": var(--color-border-selection-neutral-default, #999999),
+			"background-color-pressed": var(--color-bg-selection-accent-weak, #c7dbef),
+			"color-pressed": var(--color-fg-selection-neutral-default, #111111),
+			"border-color-pressed": var(--color-border-selection-accent-default, #1467ba),
+			"border-color-disabled": var(--color-border-interaction-disabled, #c6c6c6),
+		),
+	// Sets no rest colors of its own — the consumer supplies --sd-button-background-color
+	// and --sd-button-color, and hover/pressed are derived from them automatically.
+	// Any state can still be pinned by overriding the matching --sd-button-* property.
+	"custom": (
+			"background-color-hover": color-mix(in oklab, $_custom-bg, var(--color-fg-default, #111111) 12%),
+			"color-hover": $_custom-fg,
+			"background-color-pressed": color-mix(in oklab, $_custom-bg, var(--color-fg-default, #111111) 22%),
+			"color-pressed": $_custom-fg,
+		),
+);
+
+// Paint one interactive state: reads the public --sd-button-* override with the
+// neutral token as fallback. `$state` is one of the $neutral keys.
+// $border-on-after: the web component draws its border on the :host::after
+// overlay; consumer elements (mixin API) carry a real border, so the state
+// color must land on the element itself there.
+@mixin state($state, $border-on-after: true) {
+	$suffix: "";
+	@if $state != "base" {
+		$suffix: "-#{$state}";
+	}
+	$colors: map.get($neutral, $state);
+	background-color: var(--sd-button-background-color#{$suffix}, #{map.get($colors, "bg")});
+	color: var(--sd-button-color#{$suffix}, #{map.get($colors, "fg")});
+	@if $state != "base" {
+		$border-color: var(--sd-button-border-color#{$suffix}, transparent);
+		@if $border-on-after {
+			&::after {
+				border-color: $border-color;
+			}
+		} @else {
+			border-color: $border-color;
+		}
+	}
+}
+
+// Selected appearance of the `selection` variant: re-points the same public
+// --sd-button-* vars, pinning hover to the selected colors so the selected
+// look survives the cursor. Pressed already matches the selected colors.
+@mixin selection-checked-vars {
+	--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);
+}
+
+// Emit the --sd-button-* assignments for a named variant.
+@mixin variant-vars($name) {
+	$props: map.get($variants, $name);
+	@if $props == null {
+		@error "Unknown button variant '#{$name}'. Known: #{map.keys($variants)}.";
+	}
+	@each $prop, $value in $props {
+		--sd-button-#{$prop}: #{$value};
+	}
+}

package/dist/button-with-externals.js

@@ -1,108 +0,0 @@
-var window;(window||={})["@cas-smartdesign/button"]=(()=>{var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var m=(i,t)=>{for(var e in t)n(i,e,{get:t[e],enumerable:!0})},g=(i,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of b(t))!p.call(i,a)&&a!==e&&n(i,a,{get:()=>t[a],enumerable:!(s=u(t,a))||s.enumerable});return i};var y=i=>g(n({},"__esModule",{value:!0}),i);var x={};m(x,{Button:()=>o});var d=class r extends HTMLElement{memoizedTemplate(){let t=this.is();if(r.TEMPLATE_CACHE[t])return r.TEMPLATE_CACHE[t];let e=this.template();return window.ShadyCSS&&window.ShadyCSS.prepareTemplate(e,this.is()),r.TEMPLATE_CACHE[t]=e,e}connectedCallback(){let t=this.memoizedTemplate();window.ShadyCSS&&window.ShadyCSS.styleElement(this),this.shadowRoot||(this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(document.importNode(t.content,!0)),requestAnimationFrame(()=>this.dispatchEvent(new CustomEvent("ready"))))}whenReady(t){this.shadowRoot?t():this.addEventListener("ready",()=>t())}};d.TEMPLATE_CACHE={};var c=d;var E=`<style>
-	:host {
-		contain: content;
-		background: rgba(20, 103, 186, 0);
-		color: #1467ba;
-		border: none;
-		outline: none;
-		padding: 0 8px;
-		height: 32px;
-		cursor: pointer;
-		user-select: none;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		box-sizing: border-box;
-		vertical-align: middle;
-		border-radius: var(--sd-button-border-radius, 0px);
-	}
-
-	:host(:focus),
-	:host(:not([disabled], [aria-disabled="true"]):hover) {
-		background: rgba(20, 103, 186, 0.1);
-	}
-
-	@media (forced-colors: active) {
-		:host(:not([disabled], [aria-disabled="true"]):focus-visible) {
-			outline: 1px solid;
-		}
-		:host {
-			margin: 1px;
-		}
-	}
-
-	:host(:not([disabled], [aria-disabled="true"]):focus-visible) {
-		box-shadow: 0 0 0 1px #1467ba inset;
-	}
-
-	:host(:not([disabled], [aria-disabled="true"]):active) {
-		background: rgba(20, 103, 186, 0.2);
-	}
-
-	:host([primary]) {
-		background: #1467ba;
-		color: #fff;
-	}
-
-	:host([primary]:focus),
-	:host(:not([disabled], [aria-disabled="true"])[primary]:hover) {
-		background: #125da8;
-	}
-
-	:host([primary]:focus-visible) {
-		box-shadow: 0 0 0 1px white inset;
-	}
-
-	:host(:not([disabled], [aria-disabled="true"])[primary]:focus-visible) {
-		outline: 1px solid #1467ba;
-	}
-
-	:host(:not([disabled], [aria-disabled="true"])[primary]:active) {
-		background: #0e4883;
-	}
-
-	:host([disabled]),
-	:host([aria-disabled="true"]) {
-		filter: grayscale(100%);
-		opacity: 0.5;
-		cursor: default;
-	}
-
-	:host([disabled]:focus-visible),
-	:host([aria-disabled="true"]:focus-visible) {
-		outline: 1px dashed #111;
-	}
-
-	.icon:not([src]),
-	.icon[src=""],
-	.icon[src="data:,"] {
-		display: none;
-	}
-
-	.content {
-		display: flex;
-		align-items: center;
-		min-width: 0px;
-	}
-
-	.content ::slotted(*) {
-		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, 32px);
-		max-width: var(--sd-button-max-icon-size, 32px);
-	}
-</style>
-<slot name="icon">
-	<img class="icon" src="data:," alt part="icon" />
-</slot>
-<div class="content">
-	<slot></slot>
-</div>
-`,l=class h extends c{constructor(){super(),this._isSpaceOrEnterKeyDown=!1,this.addEventListener("keydown",t=>{this.isSpaceOrEnter(t)&&(this._isSpaceOrEnterKeyDown=!0,t.preventDefault())}),this.addEventListener("keyup",t=>{this.isSpaceOrEnter(t)&&this._isSpaceOrEnterKeyDown==!0&&(this._isSpaceOrEnterKeyDown=!1,this.click())}),this.addEventListener("click",t=>{if(this.disabled||this.hasAttribute("disabled")){t.stopImmediatePropagation();return}let e=this.getAttribute("type")?.toLowerCase()?.trim();if(e!=="submit"&&e!=="reset")return;let s=this.closest("form");s&&e==="submit"&&s.requestSubmit(),s&&e==="reset"&&s.reset()},{capture:!0})}get imageElement(){return this._image}get icon(){return this.getAttribute("icon")}set icon(t){this.icon!==t&&(t?this.setAttribute("icon",t):this.removeAttribute("icon"),this.updateIcon())}get primary(){return this.hasAttribute("primary")}set primary(t){t?this.setAttribute("primary",""):this.removeAttribute("primary")}get disabled(){return this.getAttribute("aria-disabled")=="true"}set disabled(t){this.setAttribute("aria-disabled",t.toString())}static get observedAttributes(){return["icon"]}is(){return h.ID}template(){let t=document.createElement("template");return t.innerHTML=E,t}isSpaceOrEnter(t){switch(t.key){case" ":case"Space":case"Enter":return!0;default:return!1}}click(){!this.disabled&&!this.hasAttribute("disabled")&&super.click()}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabIndex")||(this.tabIndex=0),this._image=this.shadowRoot.querySelector(".icon"),this.updateIcon(),this.hasAttribute("role")||this.setAttribute("role","button")}attributeChangedCallback(){this.updateIcon()}updateIcon(){if(this._image){let t=this.getAttribute("icon");t&&(this._image.src=t)}}};l.ID="sd-button";var o=l;customElements.get(o.ID)||customElements.define(o.ID,o);return y(x);})();
-//# sourceMappingURL=button-with-externals.js.map

package/dist/button-with-externals.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../element-base/element-base.ts", "../button.html", "../button.ts"],
-  "sourcesContent": ["export type IReadyEvent = void;\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n    ready: CustomEvent<IReadyEvent>;\n}\n\nexport interface ElementBase {\n    addEventListener<K extends keyof CustomEventMap>(\n        event: K,\n        listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n        options?: AddEventListenerOptions | boolean,\n    ): void;\n    addEventListener(\n        type: string,\n        callback: EventListenerOrEventListenerObject | null,\n        options?: AddEventListenerOptions | boolean,\n    ): void;\n    removeEventListener<K extends keyof CustomEventMap>(\n        type: K,\n        listener: (this: this, ev: CustomEventMap[K]) => unknown,\n        options?: boolean | EventListenerOptions,\n    ): void;\n    removeEventListener(\n        type: string,\n        listener: EventListenerOrEventListenerObject,\n        options?: boolean | EventListenerOptions,\n    ): void;\n    dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport abstract class ElementBase extends HTMLElement {\n    public abstract is(): string;\n\n    protected abstract template(): HTMLTemplateElement;\n    private static readonly TEMPLATE_CACHE: {\n        [name: string]: HTMLTemplateElement;\n    } = {};\n    private memoizedTemplate(): HTMLTemplateElement {\n        const is = this.is();\n        if (ElementBase.TEMPLATE_CACHE[is]) {\n            return ElementBase.TEMPLATE_CACHE[is];\n        }\n        const template = this.template();\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        if ((window as any).ShadyCSS) {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (window as any).ShadyCSS.prepareTemplate(template, this.is());\n        }\n        ElementBase.TEMPLATE_CACHE[is] = template;\n        return template;\n    }\n\n    public connectedCallback() {\n        const template = this.memoizedTemplate();\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        if ((window as any).ShadyCSS) {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (window as any).ShadyCSS.styleElement(this);\n        }\n        if (!this.shadowRoot) {\n            this.attachShadow({ mode: \"open\" });\n            this.shadowRoot.appendChild(document.importNode(template.content, true));\n            requestAnimationFrame(() => this.dispatchEvent(new CustomEvent<IReadyEvent>(\"ready\")));\n        }\n    }\n\n    public whenReady(actor: () => void) {\n        if (this.shadowRoot) {\n            actor();\n        } else {\n            this.addEventListener(\"ready\", () => actor());\n        }\n    }\n}\n", "export default \"<style>\\n\\t:host {\\n\\t\\tcontain: content;\\n\\t\\tbackground: rgba(20, 103, 186, 0);\\n\\t\\tcolor: #1467ba;\\n\\t\\tborder: none;\\n\\t\\toutline: none;\\n\\t\\tpadding: 0 8px;\\n\\t\\theight: 32px;\\n\\t\\tcursor: pointer;\\n\\t\\tuser-select: none;\\n\\t\\tdisplay: inline-flex;\\n\\t\\talign-items: center;\\n\\t\\tjustify-content: center;\\n\\t\\tbox-sizing: border-box;\\n\\t\\tvertical-align: middle;\\n\\t\\tborder-radius: var(--sd-button-border-radius, 0px);\\n\\t}\\n\\n\\t:host(:focus),\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):hover) {\\n\\t\\tbackground: rgba(20, 103, 186, 0.1);\\n\\t}\\n\\n\\t@media (forced-colors: active) {\\n\\t\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):focus-visible) {\\n\\t\\t\\toutline: 1px solid;\\n\\t\\t}\\n\\t\\t:host {\\n\\t\\t\\tmargin: 1px;\\n\\t\\t}\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):focus-visible) {\\n\\t\\tbox-shadow: 0 0 0 1px #1467ba inset;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"]):active) {\\n\\t\\tbackground: rgba(20, 103, 186, 0.2);\\n\\t}\\n\\n\\t:host([primary]) {\\n\\t\\tbackground: #1467ba;\\n\\t\\tcolor: #fff;\\n\\t}\\n\\n\\t:host([primary]:focus),\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:hover) {\\n\\t\\tbackground: #125da8;\\n\\t}\\n\\n\\t:host([primary]:focus-visible) {\\n\\t\\tbox-shadow: 0 0 0 1px white inset;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:focus-visible) {\\n\\t\\toutline: 1px solid #1467ba;\\n\\t}\\n\\n\\t:host(:not([disabled], [aria-disabled=\\\"true\\\"])[primary]:active) {\\n\\t\\tbackground: #0e4883;\\n\\t}\\n\\n\\t:host([disabled]),\\n\\t:host([aria-disabled=\\\"true\\\"]) {\\n\\t\\tfilter: grayscale(100%);\\n\\t\\topacity: 0.5;\\n\\t\\tcursor: default;\\n\\t}\\n\\n\\t:host([disabled]:focus-visible),\\n\\t:host([aria-disabled=\\\"true\\\"]:focus-visible) {\\n\\t\\toutline: 1px dashed #111;\\n\\t}\\n\\n\\t.icon:not([src]),\\n\\t.icon[src=\\\"\\\"],\\n\\t.icon[src=\\\"data:,\\\"] {\\n\\t\\tdisplay: none;\\n\\t}\\n\\n\\t.content {\\n\\t\\tdisplay: flex;\\n\\t\\talign-items: center;\\n\\t\\tmin-width: 0px;\\n\\t}\\n\\n\\t.content ::slotted(*) {\\n\\t\\tmargin-left: var(--sd-button-content-padding, 8px);\\n\\t}\\n\\n\\t.content ::slotted(*:last-child) {\\n\\t\\tmargin-right: var(--sd-button-content-padding, 8px);\\n\\t}\\n\\n\\t.icon {\\n\\t\\tmax-height: var(--sd-button-max-icon-size, 32px);\\n\\t\\tmax-width: var(--sd-button-max-icon-size, 32px);\\n\\t}\\n</style>\\n<slot name=\\\"icon\\\">\\n\\t<img class=\\\"icon\\\" src=\\\"data:,\\\" alt part=\\\"icon\\\" />\\n</slot>\\n<div class=\\\"content\\\">\\n\\t<slot></slot>\\n</div>\\n\"", "import { ElementBase } from \"@cas-smartdesign/element-base\";\n\nimport { default as htmlTemplate } from \"./button.html?raw\";\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        [Button.ID]: Button;\n    }\n}\n\nexport class Button extends ElementBase {\n    public static readonly ID = \"sd-button\";\n    private _image: HTMLImageElement;\n    private _isSpaceOrEnterKeyDown = false;\n\n    public get imageElement() {\n        return this._image;\n    }\n\n    public get icon(): string {\n        return this.getAttribute(\"icon\");\n    }\n\n    public set icon(icon: string) {\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    public get primary(): boolean {\n        return this.hasAttribute(\"primary\");\n    }\n\n    public set primary(primary: boolean) {\n        if (primary) {\n            this.setAttribute(\"primary\", \"\");\n        } else {\n            this.removeAttribute(\"primary\");\n        }\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\"];\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 click() {\n        if (!this.disabled && !this.hasAttribute(\"disabled\")) {\n            super.click();\n        }\n    }\n\n    public connectedCallback() {\n        super.connectedCallback();\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 attributeChangedCallback(): void {\n        this.updateIcon();\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}\n\nif (!customElements.get(Button.ID)) {\n    customElements.define(Button.ID, Button);\n}\n"],
-  "mappings": "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",
-  "names": ["_ElementBase", "is", "template", "actor", "ElementBase", "htmlTemplate", "_Button", "ElementBase", "e", "event", "type", "form", "icon", "primary", "disabled", "template", "iconSrc", "Button"]
-}

package/dist/docs/declarative_with_source.js

@@ -1 +0,0 @@
-import"./doc.mjs";document.querySelector("#declarative-with-code").addEventListener("click",e=>{e.currentTarget.innerText+="!",console.log("Test!")});

package/dist/docs/new_white.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-  <g color="#000" fill="#fff">
-    <path style="marker:none" overflow="visible" d="M0 11h23v1H0z"/>
-    <path style="marker:none" overflow="visible" d="M11 23V0h1v23z"/>
-  </g>
-</svg>