@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/esm/sui-checkbox-card.entry.js

@@ -0,0 +1,120 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+import { r as resolverBadge } from './sui-configs-0cd0sFVI.js';
+
+const suiCheckboxCardCss = () => `@charset "UTF-8";.sc-sui-checkbox-card-h{display:inline-flex;box-sizing:border-box;align-items:flex-start;gap:14px;padding:16px;width:100%;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));cursor:pointer;outline:none;user-select:none;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), border-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), box-shadow var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), transform var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out)}@media (hover: hover) and (pointer: fine){.sc-sui-checkbox-card-h:hover:not([data-sui-disabled]):not([data-sui-checked]):not([data-sui-indeterminate]){background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}}[data-sui-checked].sc-sui-checkbox-card-h,[data-sui-indeterminate].sc-sui-checkbox-card-h{border-color:var(--sui-primary-base, #fa7319);box-shadow:none;background:var(--sui-bg-white-0, #fff)}@media (hover: hover) and (pointer: fine){[data-sui-checked].sc-sui-checkbox-card-h:hover:not([data-sui-disabled]),[data-sui-indeterminate].sc-sui-checkbox-card-h:hover:not([data-sui-disabled]){background:var(--sui-bg-weak-50, #f7f7f7)}}.sc-sui-checkbox-card-h:focus-visible:not([data-sui-disabled]){border-color:var(--sui-primary-base, #fa7319);box-shadow:0 0 0 3px color-mix(in oklab, var(--sui-primary-base, #fa7319) 16%, transparent)}[data-sui-disabled].sc-sui-checkbox-card-h{cursor:not-allowed;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:none}[data-sui-disabled].sc-sui-checkbox-card-h .sui-checkbox-card__label.sc-sui-checkbox-card{color:var(--sui-text-sub-600, #5c5c5c)}[data-sui-disabled].sc-sui-checkbox-card-h .sui-checkbox-card__sublabel.sc-sui-checkbox-card,[data-sui-disabled].sc-sui-checkbox-card-h .sui-checkbox-card__description.sc-sui-checkbox-card{color:var(--sui-text-soft-400, #a3a3a3)}@media (hover: hover) and (pointer: fine){.sc-sui-checkbox-card-h:active:not([data-sui-disabled]){transform:scale(0.99)}}.sui-checkbox-card__leading.sc-sui-checkbox-card{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-checkbox-card__leading--icon.sc-sui-checkbox-card{box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));color:var(--sui-text-sub-600, #5c5c5c)}[data-sui-leading-fill].sc-sui-checkbox-card-h .sui-checkbox-card__leading--icon.sc-sui-checkbox-card{padding:0;border:none;background:none;box-shadow:none;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center}[data-sui-leading-fill].sc-sui-checkbox-card-h .sui-checkbox-card__leading--icon.sc-sui-checkbox-card sui-emoji.sc-sui-checkbox-card{display:block;width:100%;height:100%}[data-sui-type=avatar].sc-sui-checkbox-card-h .sui-checkbox-card__leading--avatar.sc-sui-checkbox-card{width:40px;height:40px}.sui-checkbox-card__leading--slot.sc-sui-checkbox-card{box-sizing:border-box;overflow:hidden}.sui-checkbox-card__leading--slot.sc-sui-checkbox-card>*.sc-sui-checkbox-card{display:block;width:100%;height:100%;object-fit:contain}[data-sui-type=card-provider].sc-sui-checkbox-card-h .sui-checkbox-card__leading--slot.sc-sui-checkbox-card{width:32px;height:24px;border-radius:4px}[data-sui-type=brand].sc-sui-checkbox-card-h .sui-checkbox-card__leading--slot.sc-sui-checkbox-card{width:40px;height:40px}[data-sui-type=company].sc-sui-checkbox-card-h .sui-checkbox-card__leading--slot.sc-sui-checkbox-card{width:40px;height:40px;border-radius:var(--sui-radius-full, 999px)}.sui-checkbox-card__text.sc-sui-checkbox-card{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:1 1 auto;min-width:0;align-self:stretch}.sui-checkbox-card__text.sc-sui-checkbox-card:not(:has(.sui-checkbox-card__description)){justify-content:center}.sui-checkbox-card__title.sc-sui-checkbox-card{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.sui-checkbox-card__label.sc-sui-checkbox-card{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.084px;color:var(--sui-text-strong-950, #171717);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-checkbox-card__sublabel.sc-sui-checkbox-card{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-checkbox-card__description.sc-sui-checkbox-card{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}[data-sui-disabled].sc-sui-checkbox-card-h .sui-checkbox-card__badge.sc-sui-checkbox-card{background:transparent;border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-disabled-300, #d1d1d1)}.sui-checkbox-card__checkbox.sc-sui-checkbox-card{flex-shrink:0;align-self:flex-start;pointer-events:none}`;
+
+const SuiCheckboxCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.suiChange = createEvent(this, "suiChange");
+        /** Tipo del leading slot — gobierna qué se renderiza a la izquierda. Default `basic`. */
+        this.type = 'basic';
+        /** Título principal del card (label de la fila Title). */
+        this.label = '';
+        /** Sublabel opcional (12/16 regular sub-600 al lado del label). */
+        this.sublabel = null;
+        /** Descripción secundaria opcional debajo del Title. */
+        this.description = null;
+        /** RemixIcon name (sin prefijo "ri-") para type='left-icon'. */
+        this.icon = null;
+        /** Emoji del catálogo SUI_EMOJI_MAP — alternativa a icon para type='left-icon'. */
+        this.emoji = null;
+        /** URL directa al emoji para type='left-icon'. Precedencia: icon > emoji > iconSrc. */
+        this.iconSrc = null;
+        /** URL de imagen para type='avatar'. Si falla, fallback a iniciales del label. */
+        this.imageUrl = null;
+        /**
+         * Badge junto al label — string shorthand (`badge="NEW"`) o `SuiBadgeConfig`
+         * (label + color/variant/size). Renderiza un `<sui-badge>` real; defaults
+         * blue/light/small (information, fiel a Figma 261:3928). `null` = sin badge.
+         */
+        this.badge = null;
+        /** Tamaño del checkbox interno — lo decide el padre (componente dumb). Default `medium`. */
+        this.size = 'medium';
+        /** Indeterminate state (tri-state checkbox). Pinta aria-checked=mixed. Default `false`. */
+        this.indeterminate = false;
+        /** Deshabilitado: bloquea toggle, tokens grises, no focusable. Default `false`. */
+        this.disabled = false;
+        /**
+         * Estado marcado. Mutable + reflect: el consumer puede setear `el.checked`
+         * o leerlo tras un toggle. Equivalente del `model(checked)` de Angular.
+         */
+        this.checked = false;
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo que hace que `:active` dispare y se libere bien.
+     */
+    onTouchStart() {
+        /* no-op a propósito: la presencia del binding es el fix. */
+    }
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd() {
+        this.el.blur();
+    }
+    onClick(event) {
+        this.toggle(event);
+    }
+    onKeydown(event) {
+        if (event.key === ' ' || event.key === 'Spacebar' || event.key === 'Enter') {
+            this.toggle(event);
+        }
+    }
+    /**
+     * Toggle del estado. Disabled bloquea. Cada click invierte `checked` y emite
+     * `suiChange`. El sui-checkbox interno tiene tabindex=-1 + aria-hidden y NO
+     * gobierna la a11y; el host es la fuente de verdad. Su `pointer-events:none`
+     * (SCSS) evita un doble-toggle: el click siempre cae en el host.
+     */
+    toggle(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        this.checked = !this.checked;
+        this.suiChange.emit(this.checked);
+    }
+    /** True si type requiere render del slot leading proyectado. */
+    get hasProjectedLeading() {
+        return this.type === 'card-provider' || this.type === 'brand' || this.type === 'company';
+    }
+    /** Iniciales para fallback de sui-avatar (1ras 2 palabras del label). */
+    get initialsFromLabel() {
+        const l = this.label.trim();
+        if (!l)
+            return '';
+        return l
+            .split(/\s+/)
+            .slice(0, 2)
+            .map((w) => { var _a, _b; return (_b = (_a = w[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== null && _b !== void 0 ? _b : ''; })
+            .join('');
+    }
+    /** Render del leading interno (left-icon / avatar). El proyectado va aparte. */
+    renderLeading() {
+        var _a;
+        if (this.type === 'left-icon') {
+            return (h("div", { class: "sui-checkbox-card__leading sui-checkbox-card__leading--icon", "aria-hidden": "true" }, this.icon ? (h("sui-icon", { name: this.icon, size: 20 })) : this.emoji ? (h("sui-emoji", { name: this.emoji, size: "md" })) : this.iconSrc ? (h("sui-emoji", { src: this.iconSrc, size: "full" })) : null));
+        }
+        if (this.type === 'avatar') {
+            return (h("sui-avatar", { class: "sui-checkbox-card__leading sui-checkbox-card__leading--avatar", size: "lg", src: (_a = this.imageUrl) !== null && _a !== void 0 ? _a : undefined, initials: this.initialsFromLabel }));
+        }
+        if (this.hasProjectedLeading) {
+            // Leading proyectado por el consumer: logo de proveedor / brand / company.
+            // El contenedor solo fija dimensiones + clipping por type (Figma 265:539/699/863).
+            return (h("div", { class: "sui-checkbox-card__leading sui-checkbox-card__leading--slot", "aria-hidden": "true" }, h("slot", { name: "leading" })));
+        }
+        return null;
+    }
+    render() {
+        var _a, _b, _c;
+        const ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';
+        const badgeCfg = resolverBadge(this.badge);
+        return (h(Host, { key: '2fb84a63d8aae6aabfd78d8463a4c32946323aec', role: "checkbox", tabindex: this.disabled ? '-1' : '0', "aria-checked": ariaChecked, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.label || null, "data-sui-type": this.type, "data-sui-checked": this.checked ? '' : null, "data-sui-indeterminate": this.indeterminate ? '' : null, "data-sui-disabled": this.disabled ? '' : null, "data-sui-leading-fill": this.iconSrc ? '' : null }, this.renderLeading(), h("div", { key: '4f3a8c7ff52167dc4262c93afc68e2b235d38456', class: "sui-checkbox-card__text" }, h("div", { key: '139ce11957f90550dff93b3175067e6a956e8e68', class: "sui-checkbox-card__title" }, this.label && h("span", { key: 'ce66091815e4a01ff61aa3f6610f684e412ec2ae', class: "sui-checkbox-card__label" }, this.label), this.sublabel && h("span", { key: '3efbe24a09da33e0277512fbdee46f488c6a221c', class: "sui-checkbox-card__sublabel" }, this.sublabel), badgeCfg && (h("sui-badge", { key: '5035d18d268051c547ec6661b21b7ffa6ef9a2df', class: "sui-checkbox-card__badge", color: (_a = badgeCfg.color) !== null && _a !== void 0 ? _a : 'blue', variant: (_b = badgeCfg.variant) !== null && _b !== void 0 ? _b : 'light', size: ((_c = badgeCfg.size) !== null && _c !== void 0 ? _c : 'small') }, badgeCfg.label))), this.description && (h("p", { key: '99176b65d3b7bff94885d6428a7c96055b831a22', class: "sui-checkbox-card__description" }, this.description))), h("sui-checkbox", { key: 'ba8d1ed77c4d3d24e4ce86082ca303f13d944567', class: "sui-checkbox-card__checkbox", size: this.size, checked: this.checked, indeterminate: this.indeterminate, disabled: this.disabled, focusable: false, "aria-hidden": "true", inert: true })));
+    }
+    get el() { return getElement(this); }
+};
+SuiCheckboxCard.style = suiCheckboxCardCss();
+
+export { SuiCheckboxCard as sui_checkbox_card };

package/dist/esm/sui-checkbox-label.entry.js

@@ -0,0 +1,111 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+import { r as resolverBadge, a as resolverLink } from './sui-configs-0cd0sFVI.js';
+
+const suiCheckboxLabelCss = () => `@charset "UTF-8";.sc-sui-checkbox-label-h{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, "Inter", system-ui, sans-serif);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;-webkit-tap-highlight-color:transparent}[data-sui-flip].sc-sui-checkbox-label-h .sui-checkbox-label__checkbox.sc-sui-checkbox-label{order:2}[data-sui-flip].sc-sui-checkbox-label-h .sui-checkbox-label__content.sc-sui-checkbox-label{order:1}[data-sui-disabled].sc-sui-checkbox-label-h{cursor:not-allowed}[data-sui-disabled].sc-sui-checkbox-label-h .sui-checkbox-label__content.sc-sui-checkbox-label{opacity:0.5}.sui-checkbox-label__checkbox.sc-sui-checkbox-label{flex-shrink:0}.sui-checkbox-label__content.sc-sui-checkbox-label{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}[data-sui-with-description].sc-sui-checkbox-label-h .sui-checkbox-label__content.sc-sui-checkbox-label{gap:10px}.sui-checkbox-label__text.sc-sui-checkbox-label{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-checkbox-label__title.sc-sui-checkbox-label{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-checkbox-label__label.sc-sui-checkbox-label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-0.084px;color:var(--sui-text-strong-950)}[data-sui-with-description].sc-sui-checkbox-label-h .sui-checkbox-label__label.sc-sui-checkbox-label{font-weight:500}.sui-checkbox-label__sublabel.sc-sui-checkbox-label{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-checkbox-label__badge.sc-sui-checkbox-label{flex-shrink:0}.sui-checkbox-label__description.sc-sui-checkbox-label{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}[data-sui-size=large].sc-sui-checkbox-label-h{gap:10px}[data-sui-size=xlarge].sc-sui-checkbox-label-h{gap:12px}[data-sui-size=large].sc-sui-checkbox-label-h .sui-checkbox-label__label.sc-sui-checkbox-label,[data-sui-size=xlarge].sc-sui-checkbox-label-h .sui-checkbox-label__label.sc-sui-checkbox-label{font-size:var(--sui-type-paragraph-md-size);line-height:var(--sui-type-paragraph-md-line);letter-spacing:var(--sui-type-paragraph-md-spacing)}[data-sui-size=xlarge].sc-sui-checkbox-label-h .sui-checkbox-label__content.sc-sui-checkbox-label{padding-top:2px}[data-sui-size="2xlarge"].sc-sui-checkbox-label-h{gap:12px;min-height:44px;align-items:center}[data-sui-size="2xlarge"].sc-sui-checkbox-label-h .sui-checkbox-label__label.sc-sui-checkbox-label{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -0.011em)}[data-sui-size="2xlarge"][data-sui-with-description].sc-sui-checkbox-label-h{align-items:flex-start}[data-sui-size="2xlarge"][data-sui-with-description].sc-sui-checkbox-label-h .sui-checkbox-label__content.sc-sui-checkbox-label{padding-top:2px}`;
+
+let nextId = 0;
+const SuiCheckboxLabel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.suiChange = createEvent(this, "suiChange");
+        this.suiLinkClick = createEvent(this, "suiLinkClick");
+        /** El sui-checkbox interno es el tab stop: toma su nombre del texto del label
+         *  (aria-labelledby) y su descripción de la descripción. */
+        this.labelId = `sui-checkbox-label-${++nextId}`;
+        this.descriptionId = `${this.labelId}-desc`;
+        /** Texto principal del label. */
+        this.label = '';
+        /** Sublabel opcional (12/16 sub-600 al lado del label). */
+        this.sublabel = null;
+        /** Descripción opcional debajo del title. Cambia el variant a "with description". */
+        this.description = null;
+        /**
+         * Badge junto al label — string shorthand (`badge="NEW"`) o `SuiBadgeConfig`
+         * (label + color/variant/size). `null` = sin badge. Default orange/light.
+         */
+        this.badge = null;
+        /**
+         * Link Button bajo la descripción (solo con `description`) — string shorthand
+         * (solo label, emite `suiLinkClick`) o `SuiLinkConfig { label, href?, target?, rel? }`:
+         * con href renderiza `<a>` real; rel automático `noopener noreferrer` para `_blank`.
+         */
+        this.link = null;
+        /** Tamaño. `medium` (default, Figma) · `large` · `xlarge` · `2xlarge` (fila de 44). */
+        this.size = 'medium';
+        /** Si true, invierte orden: [content] [checkbox] (label a la izquierda). */
+        this.flip = false;
+        /** Deshabilita el checkbox + wrapper. */
+        this.disabled = false;
+        /** Indeterminate state propagado al sui-checkbox interno. */
+        this.indeterminate = false;
+        /** Estado activo (espejo de sui-checkbox.checked). Mutable + reflect. */
+        this.active = false;
+    }
+    /** iOS WKWebView: la presencia del listener engage el touch pipeline (:active). */
+    onTouchStart() {
+        /* no-op a propósito: la presencia del binding es el fix. */
+    }
+    onTouchEnd() {
+        this.el.blur();
+    }
+    /** Click en cualquier parte del label togglea. Excluye el checkbox interno
+     *  (dispara su propio suiChange) y el Link Button (tiene su handler). */
+    onLabelClick(event) {
+        if (this.disabled)
+            return;
+        const target = event.target;
+        if (target.closest('sui-checkbox'))
+            return;
+        if (target.closest('sui-link-button'))
+            return;
+        this.setActive(!this.active);
+    }
+    onCheckboxChange(event) {
+        event.stopPropagation();
+        const next = event.detail;
+        if (next === this.active)
+            return;
+        this.setActive(next);
+    }
+    onLinkClick(event) {
+        var _a;
+        event.stopPropagation();
+        if (this.disabled) {
+            (_a = event.detail) === null || _a === void 0 ? void 0 : _a.preventDefault();
+            return;
+        }
+        this.suiLinkClick.emit(event.detail);
+    }
+    setActive(next) {
+        this.active = next;
+        this.suiChange.emit(next);
+    }
+    /** `2xlarge` es un alto de fila: el control se queda en su mayor (28). */
+    get controlSize() {
+        return this.size === '2xlarge' ? 'xlarge' : this.size;
+    }
+    /** Badge por default según el tamaño (si la config no fija uno). */
+    get badgeSize() {
+        switch (this.size) {
+            case 'large':
+                return 'medium';
+            case 'xlarge':
+            case '2xlarge':
+                return 'large';
+            default:
+                return 'small';
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const withDescription = this.description != null && this.description !== '';
+        const badgeCfg = resolverBadge(this.badge);
+        const linkCfg = withDescription ? resolverLink(this.link) : null;
+        const linkSize = this.size === 'medium' ? 'small' : 'medium';
+        return (h(Host, { key: 'b53b138621c9e8e3a75d917d762548d5269c6b13', "data-sui-size": this.size, "data-sui-flip": this.flip ? '' : null, "data-sui-with-description": withDescription ? '' : null, "data-sui-disabled": this.disabled ? '' : null }, h("sui-checkbox", { key: '9c3c9d2fe5e4b86bababbebcc77b0a7cb6112fe2', class: "sui-checkbox-label__checkbox", size: this.controlSize, checked: this.active, indeterminate: this.indeterminate, disabled: this.disabled, "aria-labelledby": this.labelId, "aria-describedby": withDescription ? this.descriptionId : null, onSuiChange: (e) => this.onCheckboxChange(e) }), h("div", { key: '4efcbc5f3ad65bdac59e07d13c5e93ab1979f399', class: "sui-checkbox-label__content" }, h("div", { key: '4424c511100b34efd853d14f50011e74092e2fcb', class: "sui-checkbox-label__text" }, h("div", { key: '194047138a3a3607c765397bedf095a0738fc872', class: "sui-checkbox-label__title" }, h("span", { key: 'ecfd1a065b91ab706600fb75cf6a7be156dd91fd', class: "sui-checkbox-label__label", id: this.labelId }, this.label), this.sublabel != null && this.sublabel !== '' && (h("span", { key: '9b2a514177814a0e3147d011c95ac8db4a29b0db', class: "sui-checkbox-label__sublabel" }, this.sublabel)), badgeCfg && (h("sui-badge", { key: 'e02c08d3aa2ace38d2ec5dc95e6c8994f54c8a49', class: "sui-checkbox-label__badge", color: (_a = badgeCfg.color) !== null && _a !== void 0 ? _a : 'orange', variant: (_b = badgeCfg.variant) !== null && _b !== void 0 ? _b : 'light', size: ((_c = badgeCfg.size) !== null && _c !== void 0 ? _c : this.badgeSize) }, badgeCfg.label))), withDescription && (h("p", { key: '0d76a875e92263b77e973ab78455477f0d08bad9', class: "sui-checkbox-label__description", id: this.descriptionId }, this.description))), linkCfg && (h("sui-link-button", { key: '084df514be41fa27e9f1db004eca55f7b664b139', variant: "primary", size: linkSize, disabled: this.disabled, href: (_d = linkCfg.href) !== null && _d !== void 0 ? _d : null, target: (_e = linkCfg.target) !== null && _e !== void 0 ? _e : null, rel: (_f = linkCfg.rel) !== null && _f !== void 0 ? _f : null, onClicked: (e) => this.onLinkClick(e) }, linkCfg.label)))));
+    }
+    get el() { return getElement(this); }
+};
+SuiCheckboxLabel.style = suiCheckboxLabelCss();
+
+export { SuiCheckboxLabel as sui_checkbox_label };

package/dist/esm/sui-checkbox.entry.js

@@ -0,0 +1,69 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiCheckboxCss = () => `@charset "UTF-8";.sc-sui-checkbox-h{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}[data-sui-size=medium].sc-sui-checkbox-h{width:20px;height:20px}[data-sui-size=small].sc-sui-checkbox-h{width:16px;height:16px}.sui-checkbox__bg.sc-sui-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);background:var(--sui-bg-soft-200)}[data-sui-size=medium].sc-sui-checkbox-h .sui-checkbox__bg.sc-sui-checkbox{width:16px;height:16px}[data-sui-size=small].sc-sui-checkbox-h .sui-checkbox__bg.sc-sui-checkbox{width:14px;height:14px}.sui-checkbox__box.sc-sui-checkbox{position:absolute;background:var(--sui-bg-white-0);border-radius:2.6px;box-shadow:var(--sui-shadow-form-box)}[data-sui-size=medium].sc-sui-checkbox-h .sui-checkbox__box.sc-sui-checkbox{width:13px;height:13px}[data-sui-size=small].sc-sui-checkbox-h .sui-checkbox__box.sc-sui-checkbox{width:11px;height:11px}.sui-checkbox__check.sc-sui-checkbox{position:absolute;color:var(--sui-static-white);pointer-events:none;width:9.06px;height:6.59px}.sui-checkbox__dash.sc-sui-checkbox{position:absolute;width:8px;height:1.5px;background:var(--sui-static-white);border-radius:1px}.sc-sui-checkbox-h:hover:not([data-sui-disabled]):not([data-sui-checked]):not([data-sui-indeterminate]) .sui-checkbox__bg.sc-sui-checkbox{background:var(--sui-bg-sub-300)}.sc-sui-checkbox-h:focus-visible:not([data-sui-disabled]):not([data-sui-checked]):not([data-sui-indeterminate]) .sui-checkbox__bg.sc-sui-checkbox{background:var(--sui-primary-base)}[data-sui-checked].sc-sui-checkbox-h .sui-checkbox__bg.sc-sui-checkbox,[data-sui-indeterminate].sc-sui-checkbox-h .sui-checkbox__bg.sc-sui-checkbox{background:var(--sui-primary-base)}[data-sui-checked].sc-sui-checkbox-h:hover:not([data-sui-disabled]) .sui-checkbox__bg.sc-sui-checkbox,[data-sui-indeterminate].sc-sui-checkbox-h:hover:not([data-sui-disabled]) .sui-checkbox__bg.sc-sui-checkbox{background:var(--sui-primary-dark)}[data-sui-checked].sc-sui-checkbox-h:focus-visible:not([data-sui-disabled]) .sui-checkbox__bg.sc-sui-checkbox,[data-sui-indeterminate].sc-sui-checkbox-h:focus-visible:not([data-sui-disabled]) .sui-checkbox__bg.sc-sui-checkbox{background:var(--sui-primary-darkest)}[data-sui-checked].sc-sui-checkbox-h .sui-checkbox__box.sc-sui-checkbox,[data-sui-indeterminate].sc-sui-checkbox-h .sui-checkbox__box.sc-sui-checkbox{display:none}[data-sui-disabled].sc-sui-checkbox-h{cursor:not-allowed;pointer-events:none;opacity:1}[data-sui-disabled].sc-sui-checkbox-h .sui-checkbox__bg.sc-sui-checkbox{background:var(--sui-bg-soft-200)}[data-sui-disabled].sc-sui-checkbox-h .sui-checkbox__box.sc-sui-checkbox{display:none}[data-sui-disabled].sc-sui-checkbox-h .sui-checkbox__check.sc-sui-checkbox{color:var(--sui-icon-disabled-300)}[data-sui-disabled].sc-sui-checkbox-h .sui-checkbox__dash.sc-sui-checkbox{background:var(--sui-icon-disabled-300)}[data-sui-size=large].sc-sui-checkbox-h{width:24px;height:24px}[data-sui-size=large].sc-sui-checkbox-h .sui-checkbox__bg.sc-sui-checkbox{width:20px;height:20px}[data-sui-size=large].sc-sui-checkbox-h .sui-checkbox__box.sc-sui-checkbox{width:17px;height:17px}[data-sui-size=large].sc-sui-checkbox-h .sui-checkbox__check.sc-sui-checkbox{width:11.33px;height:8.24px}[data-sui-size=large].sc-sui-checkbox-h .sui-checkbox__dash.sc-sui-checkbox{width:10px;height:2px}[data-sui-size=xlarge].sc-sui-checkbox-h{width:28px;height:28px}[data-sui-size=xlarge].sc-sui-checkbox-h .sui-checkbox__bg.sc-sui-checkbox{width:24px;height:24px}[data-sui-size=xlarge].sc-sui-checkbox-h .sui-checkbox__box.sc-sui-checkbox{width:21px;height:21px}[data-sui-size=xlarge].sc-sui-checkbox-h .sui-checkbox__check.sc-sui-checkbox{width:13.6px;height:9.9px}[data-sui-size=xlarge].sc-sui-checkbox-h .sui-checkbox__dash.sc-sui-checkbox{width:12px;height:2.5px}`;
+
+const SuiCheckbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.suiChange = createEvent(this, "suiChange");
+        /** Tamaño. `small` 16 · `medium` 20 (default) · `large` 24 · `xlarge` 28. */
+        this.size = 'medium';
+        /**
+         * Estado marcado. Mutable + reflect: el consumer puede setear `el.checked`
+         * o leerlo tras un toggle. El equivalente del `model(checked)` de Angular.
+         */
+        this.checked = false;
+        /** Estado mixto (tri-state). Pinta el dash en vez del tick. Default `false`. */
+        this.indeterminate = false;
+        /** Deshabilitado: bloquea toggle, tokens grises, no focusable. Default `false`. */
+        this.disabled = false;
+        /**
+         * `false` = fuera del orden de Tab (tabindex -1). Para cuando un padre
+         * (card, label) es el control enfocable y este checkbox solo dibuja el estado.
+         */
+        this.focusable = true;
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo que hace que `:active` dispare y se libere bien.
+     * Sin esto, `:active` "stickea" 300-500ms en pages standalone.
+     */
+    onTouchStart() {
+        /* no-op a propósito: la presencia del binding es el fix. */
+    }
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd() {
+        this.el.blur();
+    }
+    onClick(event) {
+        this.toggle(event);
+    }
+    onKeydown(event) {
+        if (event.key === ' ' || event.key === 'Spacebar' || event.key === 'Enter') {
+            this.toggle(event);
+        }
+    }
+    /**
+     * Toggle del estado. Disabled bloquea. Como en el Angular, desde indeterminate
+     * o desde unchecked el siguiente estado es checked (se invierte `checked`);
+     * el `indeterminate` lo gobierna el consumer, no el toggle interno.
+     */
+    toggle(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        this.checked = !this.checked;
+        this.suiChange.emit(this.checked);
+    }
+    render() {
+        const ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';
+        return (h(Host, { key: '9ca9ae5d43ec7ad515b2c75047bf0cd3c11b709f', role: "checkbox", tabindex: this.disabled || !this.focusable ? '-1' : '0', "aria-checked": ariaChecked, "aria-disabled": this.disabled ? 'true' : null, "data-sui-size": this.size, "data-sui-checked": this.checked ? '' : null, "data-sui-indeterminate": this.indeterminate ? '' : null, "data-sui-disabled": this.disabled ? '' : null }, h("span", { key: 'dd7d0fc96e2a5d4b31b6c092335fd23bbbde3479', class: "sui-checkbox__bg" }, h("span", { key: '31f073bccec8c090a493e7afe1398bcde54dc835', class: "sui-checkbox__box" }), this.checked && !this.indeterminate && (h("svg", { key: '3333073b75ee7dedf8e1ae4da2c63704b7947fbc', class: "sui-checkbox__check", viewBox: "0 0 10 8", "aria-hidden": "true" }, h("path", { key: '7064f68df48d2e6c2e2eb16e3527ab218b333292', d: "M1 4.5 L3.7 7 L9 1.5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", fill: "none" }))), this.indeterminate && h("span", { key: 'e6ed0ef6eed58f11e4d353e94c7fc98d3125401c', class: "sui-checkbox__dash", "aria-hidden": "true" }))));
+    }
+    get el() { return getElement(this); }
+};
+SuiCheckbox.style = suiCheckboxCss();
+
+export { SuiCheckbox as sui_checkbox };

package/dist/esm/sui-circular-progress-bar.entry.js

@@ -0,0 +1,81 @@
+import { r as registerInstance, h, H as Host } from './index-CHeoPpKZ.js';
+
+const suiCircularProgressBarCss = () => `@charset "UTF-8";.sc-sui-circular-progress-bar-h{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box}.sui-circular-progress-bar__svg.sc-sui-circular-progress-bar{display:block}.sui-circular-progress-bar__track.sc-sui-circular-progress-bar{stroke:var(--sui-bg-soft-200, #ebebeb)}.sui-circular-progress-bar__fill.sc-sui-circular-progress-bar{stroke:var(--sui-state-information-base, #335cff);transition:stroke-dashoffset var(--sui-motion-duration-base, 300ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1))}[data-sui-color=green].sc-sui-circular-progress-bar-h .sui-circular-progress-bar__fill.sc-sui-circular-progress-bar{stroke:var(--sui-state-success-base, #1fc16b)}[data-sui-color=orange].sc-sui-circular-progress-bar-h .sui-circular-progress-bar__fill.sc-sui-circular-progress-bar{stroke:var(--sui-state-warning-base, #fa7319)}[data-sui-color=red].sc-sui-circular-progress-bar-h .sui-circular-progress-bar__fill.sc-sui-circular-progress-bar{stroke:var(--sui-state-error-base, #fb3748)}[data-sui-color=purple].sc-sui-circular-progress-bar-h .sui-circular-progress-bar__fill.sc-sui-circular-progress-bar{stroke:var(--sui-state-feature-base, #7d52f4)}.sui-circular-progress-bar__label.sc-sui-circular-progress-bar{position:absolute;left:12px;right:12px;top:calc(50% - 10px);text-align:center;color:var(--sui-text-strong-950, #171717);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -0.006em);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;font-optical-sizing:auto;pointer-events:none}.sui-circular-progress-bar__label--compact.sc-sui-circular-progress-bar{top:calc(50% - 8px);font-size:var(--sui-type-label-xs-size, 12px);line-height:var(--sui-type-label-xs-line, 16px);letter-spacing:var(--sui-type-label-xs-spacing, 0)}@media (prefers-reduced-motion: reduce){.sui-circular-progress-bar__fill.sc-sui-circular-progress-bar{transition:none}}`;
+
+const SuiCircularProgressBar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Valor 0–100 (clamp interno). Default 0. */
+        this.value = 0;
+        /** Diámetro exterior en px: 48 | 56 | 64 | 72 | 80. Default 64. */
+        this.size = 64;
+        /** Color del arco. Default `blue` (= azul del DS, #335cff). */
+        this.color = 'blue';
+        /** Muestra el % en el centro. Default `true`. Ignorado en size 48 (sin texto en Figma). */
+        this.number = true;
+        /** Override del grosor del anillo (px). null → valor canónico por size. */
+        this.strokeWidth = null;
+        /** `aria-label` opcional para el role=progressbar. */
+        this.ariaLabel = 'Progreso';
+    }
+    /** Valor clampeado a [0, 100]; NaN → 0. */
+    get clampedValue() {
+        const v = this.value;
+        if (Number.isNaN(v))
+            return 0;
+        return Math.max(0, Math.min(100, v));
+    }
+    /**
+     * Grosor del anillo: override explícito, o el valor canónico medido del SVG
+     * de Figma por size. Sizes 56–80 usan ratio 0.08; size 48 es especial (0.14).
+     */
+    get resolvedStroke() {
+        const override = this.strokeWidth;
+        if (override != null && override > 0)
+            return override;
+        // size 48: anillo más grueso (6.72px = 0.14·48). Resto: 0.08·size.
+        return this.size === 48 ? this.size * 0.14 : this.size * 0.08;
+    }
+    /** Radio del path SVG (centrado, descontando medio stroke para no clippear). */
+    get radius() {
+        return (this.size - this.resolvedStroke) / 2;
+    }
+    /** Centro del viewBox = mitad del diámetro. */
+    get center() {
+        return this.size / 2;
+    }
+    /** Circunferencia del anillo = 2πr. */
+    get circumference() {
+        return 2 * Math.PI * this.radius;
+    }
+    /** dashoffset = parte NO completada de la circunferencia. */
+    get dashOffset() {
+        const c = this.circumference;
+        return c - (this.clampedValue / 100) * c;
+    }
+    /** Texto central formateado (% entero). */
+    get label() {
+        return `${Math.round(this.clampedValue)}%`;
+    }
+    /**
+     * Muestra el texto central. Requiere `number` Y size ≥ 56: el size=48 nunca
+     * renderiza texto en Figma (anillo demasiado chico tras descontar el stroke).
+     */
+    get showLabel() {
+        return this.number && this.size >= 56;
+    }
+    /** Size 56 usa tipografía Label/X Small (12/lh16) para no desbordar. */
+    get compactLabel() {
+        return this.size < 64;
+    }
+    render() {
+        const { size, center, radius, resolvedStroke, circumference, dashOffset } = this;
+        return (h(Host, { key: '6bd823f6e04caf89097a883f70cc08d544b35e62', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": String(this.clampedValue), "aria-label": this.ariaLabel || 'Progreso', "data-sui-color": this.color, style: { width: `${size}px`, height: `${size}px` } }, h("svg", { key: '73b79e81de8536cff900a8b5d4639bc370a55cc0', class: "sui-circular-progress-bar__svg", viewBox: `0 0 ${size} ${size}`, width: size, height: size, "aria-hidden": "true" }, h("circle", { key: '2f4d54ecc7fdad8af186c624110f6aff26c2e45d', class: "sui-circular-progress-bar__track", cx: center, cy: center, r: radius, "stroke-width": resolvedStroke, fill: "none" }), h("circle", { key: '61aa56493667db1732006b2d38f01bb13b2fdef8', class: "sui-circular-progress-bar__fill", cx: center, cy: center, r: radius, "stroke-width": resolvedStroke, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset, transform: `rotate(-90 ${center} ${center})`, "stroke-linecap": "butt", fill: "none" })), this.showLabel && (h("span", { key: '03f7f4d9d0a40df94bb95f331408ade89371953d', class: {
+                'sui-circular-progress-bar__label': true,
+                'sui-circular-progress-bar__label--compact': this.compactLabel,
+            } }, this.label))));
+    }
+};
+SuiCircularProgressBar.style = suiCircularProgressBarCss();
+
+export { SuiCircularProgressBar as sui_circular_progress_bar };

package/dist/esm/sui-color-dot.entry.js

@@ -0,0 +1,82 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiColorDotCss = () => `@charset "UTF-8";.sc-sui-color-dot-h{display:inline-block;width:24px;height:24px;vertical-align:middle;--c:var(--sui-neutral-500)}[data-sui-color=gray].sc-sui-color-dot-h{--c:var(--sui-neutral-500)}[data-sui-color=blue].sc-sui-color-dot-h{--c:var(--sui-blue-500)}[data-sui-color=orange].sc-sui-color-dot-h{--c:var(--sui-orange-500)}[data-sui-color=red].sc-sui-color-dot-h{--c:var(--sui-red-500)}[data-sui-color=green].sc-sui-color-dot-h{--c:var(--sui-green-500)}[data-sui-color=yellow].sc-sui-color-dot-h{--c:var(--sui-yellow-500)}[data-sui-color=purple].sc-sui-color-dot-h{--c:var(--sui-purple-500)}[data-sui-color=sky].sc-sui-color-dot-h{--c:var(--sui-sky-500)}[data-sui-color=pink].sc-sui-color-dot-h{--c:var(--sui-pink-500)}[data-sui-color=teal].sc-sui-color-dot-h{--c:var(--sui-teal-500)}[data-sui-state=disabled].sc-sui-color-dot-h{--c:var(--sui-bg-soft-200) !important}.sui-color-dot__inner.sc-sui-color-dot{position:relative;display:block;width:24px;height:24px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;appearance:none;outline:none;border-radius:50%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-color-dot__inner.sc-sui-color-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--c);transition:inset var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}[data-sui-state=selected].sc-sui-color-dot-h .sui-color-dot__inner.sc-sui-color-dot::after{inset:6px}.sui-color-dot__inner.sc-sui-color-dot::before{content:"";position:absolute;inset:3px;border-radius:50%;border:2px solid transparent;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}[data-sui-state=selected].sc-sui-color-dot-h .sui-color-dot__inner.sc-sui-color-dot::before{border-color:var(--c)}.sui-color-dot__inner.sc-sui-color-dot:active{transform:none}[data-sui-state=default].sc-sui-color-dot-h .sui-color-dot__inner.sc-sui-color-dot:hover::after,[data-sui-state=hover].sc-sui-color-dot-h .sui-color-dot__inner.sc-sui-color-dot::after{inset:5px}.sui-color-dot__inner.sc-sui-color-dot:focus-visible{outline:2px solid var(--c);outline-offset:2px}[data-sui-state=disabled].sc-sui-color-dot-h .sui-color-dot__inner.sc-sui-color-dot{cursor:not-allowed;pointer-events:none}[data-sui-size=large].sc-sui-color-dot-h{width:32px;height:32px}[data-sui-size=large].sc-sui-color-dot-h .sui-color-dot__inner.sc-sui-color-dot{width:32px;height:32px}[data-sui-size=large].sc-sui-color-dot-h .sui-color-dot__inner.sc-sui-color-dot::after{inset:5px}[data-sui-size=large][data-sui-state=default].sc-sui-color-dot-h .sui-color-dot__inner.sc-sui-color-dot:hover::after,[data-sui-size=large][data-sui-state=hover].sc-sui-color-dot-h .sui-color-dot__inner.sc-sui-color-dot::after{inset:7px}[data-sui-size=large][data-sui-state=selected].sc-sui-color-dot-h .sui-color-dot__inner.sc-sui-color-dot::after{inset:8px}[data-sui-size=large].sc-sui-color-dot-h .sui-color-dot__inner.sc-sui-color-dot::before{inset:4px}`;
+
+// Catálogos, mapas y helpers movidos a sui-color-dot.data.ts
+// (Stencil prohíbe export const/function/enum junto al @Component).
+// Importar desde './sui-color-dot.data' cuando se necesiten externamente.
+const ARIA_LABELS = {
+    gray: 'Gris',
+    blue: 'Azul',
+    orange: 'Naranja',
+    red: 'Rojo',
+    green: 'Verde',
+    yellow: 'Amarillo',
+    purple: 'Morado',
+    sky: 'Celeste',
+    pink: 'Rosado',
+    teal: 'Turquesa',
+};
+const SuiColorDot = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clicked = createEvent(this, "clicked");
+        /** Nombre del preset. Default `gray`. Cuando se usa `customHex`, el preset no aplica visualmente. */
+        this.color = 'gray';
+        /**
+         * Hex personalizado (override del preset). Si presente, el dot toma ese color
+         * via inline `--c` y el preset `color` queda sin efecto visual. Útil para
+         * previsualizar hex custom del color picker. Default `null`.
+         */
+        this.customHex = null;
+        /**
+         * Estado visual. Figma 3365:22464 define 4 estados nombrados por color:
+         *  - `default`  → dot 16×16, sin ring.
+         *  - `hover`    → dot 14×14 (achicado). El CSS `:hover` lo maneja solo en la
+         *    interacción real del browser; este valor además lo fuerza de forma
+         *    programática (testing, secuencias de animación, previews).
+         *  - `selected` → dot 12×12 + ring 2px.
+         *  - `disabled` → dot gris pálido, sin pointer events.
+         * Default `default`.
+         */
+        this.state = 'default';
+        /** Tamaño. `medium` 24 (Figma, default) · `large` 32 (mobile). */
+        this.size = 'medium';
+        /** aria-label override. Si vacío, cae al label por default (nombre del color o el hex). */
+        this.ariaLabel = '';
+        this.onClick = () => {
+            if (this.state === 'disabled')
+                return;
+            this.clicked.emit();
+        };
+    }
+    /** Label por default: nombre del color capitalizado en español, o el hex custom. */
+    get defaultAriaLabel() {
+        const hex = this.customHex;
+        if (hex)
+            return `Color ${hex}`;
+        return ARIA_LABELS[this.color];
+    }
+    /**
+     * iOS WKWebView fix sobre el button interno: la presencia del listener
+     * touchstart engage el touch pipeline; touchend.blur() empuja la deselección
+     * inmediata del :active. Sin esto, :active "stickea" 300-500ms en pages
+     * standalone.
+     */
+    /* Pasivos y en el host (SuiToque del Angular, 15-10-2026): un touchstart no
+       pasivo en el botón frenaba el scroll con el dedo encima. */
+    onTouchStart() { }
+    onTouchEnd(event) {
+        var _a, _b;
+        (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('button')) === null || _b === void 0 ? void 0 : _b.blur();
+    }
+    render() {
+        const isDisabled = this.state === 'disabled';
+        const isSelected = this.state === 'selected';
+        return (h(Host, { key: 'cec25325cbbeed1230e872aa27ba419d7004738f', "data-sui-color": this.color, "data-sui-size": this.size, "data-sui-state": this.state, "data-sui-custom": this.customHex ? '' : null, style: this.customHex ? { '--c': this.customHex } : undefined }, h("button", { key: 'e3b89614cab972e078bb9fb89968ff572216e992', type: "button", class: "sui-color-dot__inner", role: "radio", disabled: isDisabled || undefined, "aria-checked": isSelected ? 'true' : 'false', "aria-label": this.ariaLabel || this.defaultAriaLabel, onClick: this.onClick })));
+    }
+    get el() { return getElement(this); }
+};
+SuiColorDot.style = suiColorDotCss();
+
+export { SuiColorDot as sui_color_dot };