@andespindola/ui-core 0.1.1 → 0.2.0

package/dist/collection/components/ui-grid/ui-grid.js

@@ -0,0 +1,106 @@
+import { h, Host } from "@stencil/core";
+const GAP = {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem",
+};
+export class UiGrid {
+    constructor() {
+        /** Número de colunas da grade. */
+        this.columns = 12;
+        /** Espaçamento entre células. */
+        this.gap = "md";
+    }
+    render() {
+        const style = {
+            gridTemplateColumns: this.minItemWidth
+                ? `repeat(auto-fit, minmax(${this.minItemWidth}, 1fr))`
+                : `repeat(${this.columns}, minmax(0, 1fr))`,
+            gap: GAP[this.gap],
+        };
+        return (h(Host, { key: '465a816e064af42d8282185ee92e32477a6112fd' }, h("div", { key: 'da2e151c56959ced55477e3fe6c99aa5563b38aa', class: "grid", style: style }, h("slot", { key: '5bb285ce0feaf16d066b627010fc3fb595a85c15' }))));
+    }
+    static get is() { return "ui-grid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-grid.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-grid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "N\u00FAmero de colunas da grade."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "12"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiGridGap",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "UiGridGap": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-grid/ui-grid.tsx",
+                            "id": "src/components/ui-grid/ui-grid.tsx::UiGridGap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Espa\u00E7amento entre c\u00E9lulas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "\"md\""
+            },
+            "minItemWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Largura m\u00EDnima por item para layout responsivo (auto-fit)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-item-width"
+            }
+        };
+    }
+}

package/dist/collection/components/ui-input/ui-input.css

@@ -2,39 +2,90 @@
   display: block;
 }
 
-.input {
+.field {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   width: 100%;
   height: 2.75rem;
-  padding: 0 1rem;
+  padding: 0 0.875rem;
   border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius-sm);
   background: var(--ui-panel);
-  color: var(--ui-foreground);
-  font-family: var(--ui-font-sans);
-  font-size: 0.875rem;
-  outline: none;
   backdrop-filter: blur(22px);
   transition: all var(--ui-duration) var(--ui-ease);
   box-sizing: border-box;
 }
 
-.input::placeholder {
-  color: var(--ui-text-faint);
+.field:hover:not(.disabled) {
+  border-color: var(--ui-border-strong);
 }
 
-.input:focus-visible {
+.field:focus-within {
   border-color: var(--ui-accent);
   box-shadow: 0 0 0 2px var(--ui-ring);
 }
 
-.input:disabled {
+.field.invalid {
+  border-color: var(--ui-danger);
+}
+
+.field.invalid:focus-within {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-danger) 40%, transparent);
+}
+
+.field.disabled {
   opacity: 0.5;
   pointer-events: none;
 }
 
-.input.invalid {
-  border-color: var(--ui-danger);
+.input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: var(--ui-foreground);
+  font-family: var(--ui-font-sans);
+  font-size: 0.875rem;
+  outline: none;
 }
-.input.invalid:focus-visible {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-danger) 40%, transparent);
+
+.input::placeholder {
+  color: var(--ui-text-faint);
+}
+
+/* Slots de prefixo/sufixo (ícones). Vazios não ocupam espaço. */
+.affix {
+  display: inline-flex;
+  align-items: center;
+  color: var(--ui-text-muted);
+}
+
+.affix::slotted(svg),
+::slotted([slot="prefix"]),
+::slotted([slot="suffix"]) {
+  display: inline-flex;
+  color: var(--ui-text-muted);
+}
+
+.clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-chip);
+  color: var(--ui-text-muted);
+  cursor: pointer;
+  transition: all var(--ui-duration) var(--ui-ease);
+}
+
+.clear:hover {
+  color: var(--ui-foreground);
+  background: var(--ui-panel-strong);
 }

package/dist/collection/components/ui-input/ui-input.js

@@ -9,6 +9,8 @@ export class UiInput {
         this.disabled = false;
         /** Marca o campo como inválido (estilo + aria-invalid). */
         this.invalid = false;
+        /** Exibe um botão para limpar o valor quando preenchido. */
+        this.clearable = false;
         this.onInput = (event) => {
             const target = event.target;
             this.value = target.value;
@@ -17,9 +19,15 @@ export class UiInput {
         this.onChange = (event) => {
             this.uiChange.emit(event.target.value);
         };
+        this.clear = () => {
+            this.value = "";
+            this.uiInput.emit("");
+            this.uiChange.emit("");
+        };
     }
     render() {
-        return (h(Host, { key: 'b904b919904db1677ed9480e43bf939138f09dfc' }, h("input", { key: '086b0bdd4a5f5c01af04be41cdee2e72af2376f1', class: { input: true, invalid: this.invalid }, type: this.type, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : null, onInput: this.onInput, onChange: this.onChange })));
+        const showClear = this.clearable && !!this.value && !this.disabled;
+        return (h(Host, { key: 'a87a7c9a1aba5631099f2f9c3a3083a9e7374854' }, h("div", { key: '04d3493ab32a4636f3f2540aaba0b30e4c018225', class: { field: true, invalid: this.invalid, disabled: this.disabled } }, h("span", { key: '66fa079a8b6ccc62dca78f4266d92800dd8727b0', class: "affix" }, h("slot", { key: 'c9db74515db3226bc730beb42a2a8f2d8eb6ee9f', name: "prefix" })), h("input", { key: 'a8f4db568e49ee22b5eeae078c4e4b3fdbc48983', class: "input", type: this.type, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : null, onInput: this.onInput, onChange: this.onChange }), showClear && (h("button", { key: 'e38a2279db1b1c677274a6e22019bf3183ae1920', class: "clear", type: "button", "aria-label": "Limpar", onClick: this.clear }, h("svg", { key: '0982ea65d3b1598620953fcd600b1eb1945348ee', viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }, h("path", { key: '26f833d4ccf8feab9f2ec4f4527b8c8e9c00d09b', d: "M18 6 6 18M6 6l12 12" })))), h("span", { key: '22c7d4d4a030157a4a9eb73ef0a260f4db56c848', class: "affix" }, h("slot", { key: 'fa74011b1237908aa9eea78f88294afcdf09f0f5', name: "suffix" })))));
     }
     static get is() { return "ui-input"; }
     static get encapsulation() { return "shadow"; }
@@ -152,6 +160,26 @@ export class UiInput {
                 "setter": false,
                 "reflect": false,
                 "attribute": "name"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe um bot\u00E3o para limpar o valor quando preenchido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/ui-label/ui-label.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class UiLabel {
     render() {
-        return (h(Host, { key: '5ded9464de8fe01a6bb830f4de51975cfd720746' }, h("label", { key: '1a14229c5e511eac3cb4244f546aee71a4f5d399', class: "label" }, h("slot", { key: '7c5def32e92ffdc6dcb1b83c044f5199957f5951' }))));
+        return (h(Host, { key: '15695a208223a3270e49d72972a49c26fe3acd4d' }, h("label", { key: 'a6d0290c845797368e59fa936b80c8fee55dbcb1', class: "label" }, h("slot", { key: 'daae42c194f0c31d69a82bfad95a97b85cf2cdf2' }))));
     }
     static get is() { return "ui-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-pagination/ui-pagination.css

@@ -0,0 +1,59 @@
+:host {
+  display: inline-block;
+}
+
+.pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-family: var(--ui-font-sans);
+}
+
+.page {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-sm);
+  background: transparent;
+  color: var(--ui-foreground);
+  font-family: var(--ui-font-sans);
+  font-size: 0.875rem;
+  cursor: pointer;
+  outline: none;
+  transition: all var(--ui-duration) var(--ui-ease);
+}
+
+.page:hover {
+  border-color: var(--ui-border-strong);
+  background: var(--ui-chip);
+}
+
+.page:focus-visible {
+  box-shadow: 0 0 0 2px var(--ui-ring);
+}
+
+.page:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.page.active {
+  background: var(--ui-accent);
+  color: var(--ui-accent-contrast);
+  border-color: var(--ui-accent);
+  box-shadow: var(--ui-shadow-sm);
+}
+
+.ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  color: var(--ui-text-faint);
+  font-size: 0.875rem;
+}

package/dist/collection/components/ui-pagination/ui-pagination.js

@@ -0,0 +1,147 @@
+import { h, Host } from "@stencil/core";
+export class UiPagination {
+    constructor() {
+        /** Total de páginas. */
+        this.total = 1;
+        /** Página atual. */
+        this.current = 1;
+        /** Quantidade de páginas ao redor da atual. */
+        this.siblings = 1;
+        this.clamp = (page) => Math.min(Math.max(page, 1), Math.max(this.total, 1));
+        this.go = (page) => {
+            const next = this.clamp(page);
+            if (next === this.current)
+                return;
+            this.current = next;
+            this.uiChange.emit(next);
+        };
+        this.buildRange = () => {
+            const total = Math.max(this.total, 1);
+            const current = this.clamp(this.current);
+            const siblings = Math.max(this.siblings, 0);
+            const start = Math.max(current - siblings, 1);
+            const end = Math.min(current + siblings, total);
+            const pages = new Set([1, total]);
+            for (let page = start; page <= end; page += 1)
+                pages.add(page);
+            const sorted = Array.from(pages)
+                .filter((page) => page >= 1 && page <= total)
+                .sort((a, b) => a - b);
+            const result = [];
+            let previous = 0;
+            for (const page of sorted) {
+                if (previous && page - previous > 1)
+                    result.push("...");
+                result.push(page);
+                previous = page;
+            }
+            return result;
+        };
+    }
+    render() {
+        const total = Math.max(this.total, 1);
+        const current = this.clamp(this.current);
+        const entries = this.buildRange();
+        return (h(Host, { key: '405a1c41db3850f25ffc14a053b12c0767809b1e' }, h("nav", { key: 'bd9baa3307cb5576ca81ab82653b44ccd4cb0385', class: "pagination", role: "navigation", "aria-label": "Pagina\u00E7\u00E3o" }, h("button", { key: '8efdfeb278037fabab6b82ba4083a7d23a00d612', class: "page nav", type: "button", "aria-label": "P\u00E1gina anterior", disabled: current <= 1, onClick: () => this.go(current - 1) }, "\u2039"), entries.map((entry, index) => {
+            if (entry === "...") {
+                return (h("span", { key: `ellipsis-${index}`, class: "ellipsis", "aria-hidden": "true" }, "\u2026"));
+            }
+            const active = entry === current;
+            return (h("button", { key: entry, class: { page: true, active }, type: "button", "aria-label": `Página ${entry}`, "aria-current": active ? "page" : undefined, onClick: () => this.go(entry) }, entry));
+        }), h("button", { key: '5ba13b9a59857423e65a4d10630eb66cc32c30fe', class: "page nav", type: "button", "aria-label": "Pr\u00F3xima p\u00E1gina", disabled: current >= total, onClick: () => this.go(current + 1) }, "\u203A"))));
+    }
+    static get is() { return "ui-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total de p\u00E1ginas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total",
+                "defaultValue": "1"
+            },
+            "current": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "P\u00E1gina atual."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current",
+                "defaultValue": "1"
+            },
+            "siblings": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quantidade de p\u00E1ginas ao redor da atual."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "siblings",
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando a p\u00E1gina muda."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/ui-popover/ui-popover.js

@@ -73,7 +73,7 @@ export class UiPopover {
         this.cleanup = undefined;
     }
     render() {
-        return (h(Host, { key: '583667abe2df75e7c9e058b7a668661527ec0b8a' }, h("span", { key: '46eaca2ca8c70acff629ccc5c3c201b42136c30d', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: 'd81cf859a9887d3b6964ac8e67829cf1a84c58b2', name: "trigger" })), h("div", { key: 'da09ed4fa3eee00ef72fb4c0eba6f0a1b827df15', class: { panel: true, "is-open": this.open }, ref: (el) => (this.floatingEl = el) }, h("slot", { key: 'f2483196e778a14fbe1d537dd7a3c8a6453c0daf' }))));
+        return (h(Host, { key: '61b4088ff4d61701a3466619274e60ac64fcc420' }, h("span", { key: 'd2d00f4dbf391ea1bc119870e399187d98634de6', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: 'ece70edbdda096821de68295e55a3fba3caeada4', name: "trigger" })), h("div", { key: 'f30e5a570e49eb9c7056fd820bc57408dd78e013', class: { panel: true, "is-open": this.open }, ref: (el) => (this.floatingEl = el) }, h("slot", { key: '5823d3c7ed47946d812a2c34002fc5fd0cfc8a29' }))));
     }
     static get is() { return "ui-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-progress/ui-progress.js

@@ -19,7 +19,7 @@ export class UiProgress {
     }
     render() {
         const determinate = !this.isIndeterminate;
-        return (h(Host, { key: '66c467df7d762604b0da866268ea75bce4499472', role: "progressbar", "aria-valuenow": determinate ? String(this.value) : undefined, "aria-valuemin": determinate ? "0" : undefined, "aria-valuemax": determinate ? String(this.max) : undefined }, h("div", { key: 'fab67d49344ddd90fbca231212a495c7d2d7a0b1', class: "track" }, h("div", { key: 'dfbd8b412ad24a297e3dacfabd646b812066421e', class: { indicator: true, indeterminate: this.isIndeterminate }, style: determinate ? { width: `${this.percent}%` } : undefined }))));
+        return (h(Host, { key: '8f40e0e4a439959e1474d2952f0f891438fb3ecf', role: "progressbar", "aria-valuenow": determinate ? String(this.value) : undefined, "aria-valuemin": determinate ? "0" : undefined, "aria-valuemax": determinate ? String(this.max) : undefined }, h("div", { key: '9bfd7557efbfad05a8b170764b96935f00cbdaeb', class: "track" }, h("div", { key: '02205ac65e75f27f52869991b168c6397c8b2760', class: { indicator: true, indeterminate: this.isIndeterminate }, style: determinate ? { width: `${this.percent}%` } : undefined }))));
     }
     static get is() { return "ui-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-radio-group/ui-radio-group.js

@@ -31,7 +31,7 @@ export class UiRadioGroup {
         };
     }
     render() {
-        return (h(Host, { key: '80b7e45cfc95e7e82015db2fa893b374ba73cf07' }, h("div", { key: '1133cd7ad3f9eb9ebaa0ac6c8a2ca3e2a52c46a9', class: "group", role: "radiogroup" }, this.options.map((option, index) => {
+        return (h(Host, { key: '67c377ec552ea8cb6ea3d015bab1ee3d66ee436c' }, h("div", { key: 'aa52c74b8473ca06b762811a900d90cdfc8f7422', class: "group", role: "radiogroup" }, this.options.map((option, index) => {
             const selected = option.value === this.value;
             return (h("button", { class: "radio", type: "button", role: "radio", "aria-checked": selected ? "true" : "false", tabindex: selected || (!this.value && index === 0) ? "0" : "-1", disabled: this.disabled, onClick: () => this.select(option.value), onKeyDown: (event) => this.onKeyDown(event, index) }, h("span", { class: "indicator" }, h("span", { class: "dot" })), h("span", { class: "label" }, option.label)));
         }))));

package/dist/collection/components/ui-reveal/ui-reveal.js

@@ -26,7 +26,7 @@ export class UiReveal {
         this.observer?.disconnect();
     }
     render() {
-        return (h(Host, { key: '0af93c131bf8564bf952ca61637041089b5c34b7' }, h("div", { key: '94a0fc0cf5445b9832994c19eb5600f6227ccc97', class: { reveal: true, visible: this.visible }, style: { transitionDelay: `${this.delay}ms` } }, h("slot", { key: '2a47e0af589790cbe5cfbc10ef49ffde1aced931' }))));
+        return (h(Host, { key: '4ab570c0eaa9fb6b4d6a9d01887fde6edd72ba8d' }, h("div", { key: 'cf0287499bfa5107fb49cadc85c85f2f70063967', class: { reveal: true, visible: this.visible }, style: { transitionDelay: `${this.delay}ms` } }, h("slot", { key: 'b46502732e597f13d60ec55be0d456dba8181386' }))));
     }
     static get is() { return "ui-reveal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-scroll-progress/ui-scroll-progress.js

@@ -23,7 +23,7 @@ export class UiScrollProgress {
         window.removeEventListener("scroll", this.onScroll);
     }
     render() {
-        return (h(Host, { key: '36bb4460d8219c028ff63216ef562f0d157fd04d' }, h("div", { key: '345b9675be89ede7875c56ad3f86ae2eecdf4f16', class: "bar", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(this.progress * 100), style: { transform: `scaleX(${this.progress})` } })));
+        return (h(Host, { key: 'cb2d746b6e0ca3642a0460cff5685f2eb83a6301' }, h("div", { key: '7fdb8b414f833110c389aef8620c313fb8c001c7', class: "bar", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(this.progress * 100), style: { transform: `scaleX(${this.progress})` } })));
     }
     static get is() { return "ui-scroll-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-section/ui-section.js

@@ -9,7 +9,7 @@ export class UiSection {
         this.description = "";
     }
     render() {
-        return (h(Host, { key: '17a6e52fb6d1822d7a8a08eef052d972cc322c0a' }, h("section", { key: '228e9c1e4ca2515f585cafa2684932bfac70a25b' }, this.eyebrow && h("p", { key: '93c307b49c39fe2c0b2363d75c9763b3c09446a5', class: "eyebrow" }, this.eyebrow), this.heading && h("h2", { key: '889c652e358f1788c5785f1154f5a45508fa2a61', class: "heading" }, this.heading), this.description && h("p", { key: '09cb09edfbc0dce2b7fd5e9938cafc63e2ddbd9a', class: "description" }, this.description), h("slot", { key: '4f480d0c56263f1e38909e8af8d7cd8d8c2375fe' }))));
+        return (h(Host, { key: '71344e4d5a4c6bccade1bf5151aeba1dffa14d7f' }, h("section", { key: '404cb27c6db128f60608b4eff44fa6e05520016b' }, this.eyebrow && h("p", { key: '204ced95531d3bf77c2a32f940c3ec4bc0e76f53', class: "eyebrow" }, this.eyebrow), this.heading && h("h2", { key: '46818123dd264ef60db8ff9c7a2ad93979d71434', class: "heading" }, this.heading), this.description && h("p", { key: 'eaba39853cd12a874c9079e2181aca9e0fc130b7', class: "description" }, this.description), h("slot", { key: '24d02b1d9176e42d7906ef43881807d7cfda2e52' }))));
     }
     static get is() { return "ui-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-segmented/ui-segmented.css

@@ -0,0 +1,46 @@
+:host {
+  display: inline-block;
+}
+
+.track {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.25rem;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-chip);
+  font-family: var(--ui-font-sans);
+}
+
+.segment {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0 0.875rem;
+  border: none;
+  border-radius: var(--ui-radius-full);
+  background: transparent;
+  color: var(--ui-text-muted);
+  font-family: var(--ui-font-sans);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  outline: none;
+  transition: all var(--ui-duration) var(--ui-ease);
+}
+
+.segment:hover {
+  color: var(--ui-foreground);
+}
+
+.segment:focus-visible {
+  box-shadow: 0 0 0 2px var(--ui-ring);
+}
+
+.segment.active {
+  background: var(--ui-panel-strong);
+  color: var(--ui-foreground);
+  box-shadow: var(--ui-shadow-sm);
+}