@vverchonov/web-components 0.1.1 → 0.1.4

package/dist/react.js

@@ -3,10 +3,12 @@ import { DropdownButton as t } from "./react/dropdown-button.js";
 import { Input as n } from "./react/input.js";
 import { Menu as r } from "./react/menu.js";
 import { Modal as i } from "./react/modal.js";
-import { Selector as a } from "./react/selector.js";
-import { Table as o } from "./react/table.js";
-import { Tabs as s } from "./react/tabs.js";
-import { Toggle as c } from "./react/toggle.js";
-import { FormLayout as l } from "./react/form-layout.js";
-import { Layout as u } from "./react/layout.js";
-export { e as Button, t as DropdownButton, l as FormLayout, n as Input, u as Layout, r as Menu, i as Modal, a as Selector, o as Table, s as Tabs, c as Toggle };
+import { RadioGroup as a } from "./react/radio-group.js";
+import { Selector as o } from "./react/selector.js";
+import { Table as s } from "./react/table.js";
+import { Tabs as c } from "./react/tabs.js";
+import { Toggle as l } from "./react/toggle.js";
+import { Card as u } from "./react/card.js";
+import { FormLayout as d } from "./react/form-layout.js";
+import { Layout as f } from "./react/layout.js";
+export { e as Button, u as Card, t as DropdownButton, d as FormLayout, n as Input, f as Layout, r as Menu, i as Modal, a as RadioGroup, o as Selector, s as Table, c as Tabs, l as Toggle };

package/dist/{selector-Bl7Nbkqo.js → selector-B32NqDPk.js}

@@ -1,7 +1,7 @@
 import { LitElement as e, html as t, nothing as n, unsafeCSS as r } from "lit";
 import { customElement as i, property as a, state as o } from "lit/decorators.js";
 import { repeat as s } from "lit/directives/repeat.js";
-var c = ":host{display:block}.wrapper{flex-direction:column;gap:.375rem;display:flex}.label{color:var(--color-text);font-size:.875rem;font-weight:500;line-height:1.25}.trigger{align-items:center;gap:var(--selector-chip-gap);min-height:var(--selector-min-height);padding:.3125rem 2rem .3125rem var(--input-padding-inline);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-input);cursor:pointer;transition:border-color var(--selector-transition-duration) var(--ease-emphasized), box-shadow var(--selector-transition-duration) var(--ease-emphasized);box-sizing:border-box;width:100%;font-size:var(--input-font-size);color:var(--color-text);text-align:left;outline:none;flex-wrap:wrap;display:flex;position:relative}.trigger:hover:not(.is-disabled){border-color:var(--color-border-strong);box-shadow:0 0 0 1px var(--color-border-strong)}.trigger:focus-visible:not(.is-disabled),.trigger.is-open:not(.is-disabled){border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary)}.trigger.is-disabled{opacity:.5;cursor:not-allowed;background:var(--color-surface-elevated)}.chevron{right:var(--input-padding-inline);color:var(--color-text-muted);pointer-events:none;transition:transform var(--selector-transition-duration) var(--ease-emphasized);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.trigger.is-open .chevron{transform:translateY(-50%)rotate(180deg)}.placeholder{color:var(--color-text-muted);user-select:none}.single-value{text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:.375rem;display:flex;overflow:hidden}.chip{padding:var(--selector-chip-padding-block) var(--selector-chip-padding-inline);font-size:var(--selector-chip-font-size);background:var(--color-primary-muted);color:var(--color-text);border-radius:var(--radius-full);white-space:nowrap;align-items:center;gap:.25rem;max-width:10rem;line-height:1.25;display:inline-flex}.chip-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chip-icon{width:1em;height:1em;color:var(--color-text-muted);flex-shrink:0;align-items:center;display:inline-flex}.chip-remove{border-radius:var(--radius-full);width:1rem;height:1rem;color:var(--color-text-muted);cursor:pointer;transition:color .15s var(--ease-emphasized), background .15s var(--ease-emphasized);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.chip-remove:hover{color:var(--color-invalid);background:var(--color-invalid-muted)}.chip-remove:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.panel{z-index:9999;min-width:180px;max-height:var(--selector-panel-max-height);padding:var(--dropdown-padding);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);display:none;position:fixed;overflow-y:auto;box-shadow:0 4px 12px oklch(0% 0 0/.12)}.panel.is-open{flex-direction:column;display:flex}.search-wrapper{flex-shrink:0;padding:.25rem .25rem .375rem}.search-input{box-sizing:border-box;width:100%;font-size:var(--selector-chip-font-size);color:var(--color-text);background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:calc(var(--radius-card) - 2px);transition:border-color var(--selector-transition-duration) var(--ease-emphasized);outline:none;padding:.375rem .5rem}.search-input::placeholder{color:var(--color-text-muted)}.search-input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.option-list{flex-direction:column;flex:1;gap:2px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.group-header{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);user-select:none;padding:.5rem .5rem .25rem;font-size:.75rem;font-weight:600}.option{width:100%;padding:var(--dropdown-item-padding-block) var(--dropdown-item-padding-inline);font-size:var(--dropdown-item-font-size);text-align:left;color:var(--color-text);border-radius:calc(var(--radius-card) - 2px);cursor:pointer;transition:background-color .15s var(--ease-emphasized);background:0 0;border:none;outline:none;align-items:center;gap:.5rem;font-weight:400;display:flex}.option:hover:not(.is-disabled){background:var(--color-primary-muted)}.option:focus-visible:not(.is-disabled){background:var(--color-primary-muted);outline:none}.option.is-focused:not(.is-disabled){background:var(--color-primary-muted)}.option.is-selected{color:var(--color-primary);font-weight:500}.option.is-disabled{opacity:.45;cursor:not-allowed}.option-check{width:1.125em;height:1.125em;color:var(--color-primary);opacity:0;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.option.is-selected .option-check{opacity:1}.option-icon{width:1.25em;height:1.25em;color:var(--color-text-muted);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.option-icon:empty{display:none}.option-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.empty-message{font-size:var(--dropdown-item-font-size);color:var(--color-text-muted);text-align:center;padding:.75rem .5rem}:host([state=valid]) .trigger{border-color:var(--color-valid)}:host([state=valid]) .trigger:focus-visible,:host([state=valid]) .trigger.is-open{box-shadow:0 0 0 2px var(--color-valid)}:host([state=invalid]) .trigger{border-color:var(--color-invalid);background:var(--color-invalid-muted)}:host([state=invalid]) .trigger:focus-visible,:host([state=invalid]) .trigger.is-open{box-shadow:0 0 0 2px var(--color-invalid)}.error-text{color:var(--color-invalid);font-size:.8125rem;line-height:1.4}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
+var c = ":host{display:block}.wrapper{flex-direction:column;gap:.375rem;display:flex}.label{font-size:var(--font-size-base);color:var(--color-text);font-weight:500;line-height:1.25}.trigger{align-items:center;gap:var(--selector-chip-gap);min-height:var(--selector-min-height);padding:.3125rem 2rem .3125rem var(--input-padding-inline);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-input);cursor:pointer;transition:border-color var(--selector-transition-duration) var(--ease-emphasized), box-shadow var(--selector-transition-duration) var(--ease-emphasized);box-sizing:border-box;width:100%;font-size:var(--input-font-size);color:var(--color-text);text-align:left;outline:none;flex-wrap:wrap;display:flex;position:relative}.trigger:hover:not(.is-disabled){border-color:var(--color-border-strong);box-shadow:0 0 0 1px var(--color-border-strong)}.trigger:focus-visible:not(.is-disabled),.trigger.is-open:not(.is-disabled){border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary)}.trigger.is-disabled{opacity:.5;cursor:not-allowed;background:var(--color-surface-elevated)}.chevron{right:var(--input-padding-inline);color:var(--color-text-muted);pointer-events:none;transition:transform var(--selector-transition-duration) var(--ease-emphasized);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.trigger.is-open .chevron{transform:translateY(-50%)rotate(180deg)}.placeholder{color:var(--color-text-muted);user-select:none}.single-value{text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:.375rem;display:flex;overflow:hidden}.chip{padding:var(--selector-chip-padding-block) var(--selector-chip-padding-inline);font-size:var(--selector-chip-font-size);background:var(--color-primary-muted);color:var(--color-text);border-radius:var(--radius-full);white-space:nowrap;align-items:center;gap:.25rem;max-width:10rem;line-height:1.25;display:inline-flex}.chip-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chip-icon{width:1em;height:1em;color:var(--color-text-muted);flex-shrink:0;align-items:center;display:inline-flex}.chip-remove{border-radius:var(--radius-full);width:1rem;height:1rem;color:var(--color-text-muted);cursor:pointer;transition:color .15s var(--ease-emphasized), background .15s var(--ease-emphasized);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.chip-remove:hover{color:var(--color-invalid);background:var(--color-invalid-muted)}.chip-remove:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.panel{z-index:9999;min-width:180px;max-height:var(--selector-panel-max-height);padding:var(--dropdown-padding);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);display:none;position:fixed;overflow-y:auto;box-shadow:0 4px 12px oklch(0% 0 0/.12)}.panel.is-open{flex-direction:column;display:flex}.search-wrapper{flex-shrink:0;padding:.25rem .25rem .375rem}.search-input{box-sizing:border-box;width:100%;font-size:var(--selector-chip-font-size);color:var(--color-text);background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:calc(var(--radius-card) - 2px);transition:border-color var(--selector-transition-duration) var(--ease-emphasized);outline:none;padding:.375rem .5rem}.search-input::placeholder{color:var(--color-text-muted)}.search-input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.option-list{flex-direction:column;flex:1;gap:2px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.group-header{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);user-select:none;padding:.5rem .5rem .25rem;font-weight:600}.option{width:100%;padding:var(--dropdown-item-padding-block) var(--dropdown-item-padding-inline);font-size:var(--dropdown-item-font-size);text-align:left;color:var(--color-text);border-radius:calc(var(--radius-card) - 2px);cursor:pointer;transition:background-color .15s var(--ease-emphasized);background:0 0;border:none;outline:none;align-items:center;gap:.5rem;font-weight:400;display:flex}.option:hover:not(.is-disabled){background:var(--color-primary-muted)}.option:focus-visible:not(.is-disabled){background:var(--color-primary-muted);outline:none}.option.is-focused:not(.is-disabled){background:var(--color-primary-muted)}.option.is-selected{color:var(--color-primary);font-weight:500}.option.is-disabled{opacity:.45;cursor:not-allowed}.option-check{width:1.125em;height:1.125em;color:var(--color-primary);opacity:0;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.option.is-selected .option-check{opacity:1}.option-icon{width:1.25em;height:1.25em;color:var(--color-text-muted);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.option-icon:empty{display:none}.option-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.empty-message{font-size:var(--dropdown-item-font-size);color:var(--color-text-muted);text-align:center;padding:.75rem .5rem}:host([state=valid]) .trigger{border-color:var(--color-valid)}:host([state=valid]) .trigger:focus-visible,:host([state=valid]) .trigger.is-open{box-shadow:0 0 0 2px var(--color-valid)}:host([state=invalid]) .trigger{border-color:var(--color-invalid);background:var(--color-invalid-muted)}:host([state=invalid]) .trigger:focus-visible,:host([state=invalid]) .trigger.is-open{box-shadow:0 0 0 2px var(--color-invalid)}.error-text{font-size:var(--font-size-sm);color:var(--color-invalid);line-height:1.4}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
 function l(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/dist/selector.js

@@ -1,2 +1,4 @@
-import { t as e } from "./selector-Bl7Nbkqo.js";
-export { e as Selector };
+import { t as e } from "./inject-theme-BJHnhQgY.js";
+import { t } from "./selector-B32NqDPk.js";
+e();
+export { t as Selector };

package/dist/styles/inject-theme.d.ts

@@ -0,0 +1 @@
+export declare function injectTheme(): void;

package/dist/{table--O5km0Wv.js → table-AcQEI_eg.js}

@@ -1,7 +1,7 @@
 import { LitElement as e, html as t, nothing as n, unsafeCSS as r } from "lit";
 import { customElement as i, property as a, state as o } from "lit/decorators.js";
 import { repeat as s } from "lit/directives/repeat.js";
-var c = ":host{color:var(--table-text-color,var(--color-text));font-size:.875rem;display:block}.toolbar{justify-content:flex-end;margin-block-end:.5rem;display:flex;position:relative}.toggle-btn{color:var(--color-text-muted);background:var(--color-surface-elevated);border:1px solid var(--table-border-color,var(--color-border));border-radius:var(--radius-button);cursor:pointer;align-items:center;gap:.375rem;padding:.375rem .625rem;font-size:.8125rem;font-weight:500;transition:color .15s,background .15s;display:inline-flex}.toggle-btn:hover{color:var(--color-text);background:var(--color-primary-muted)}.toggle-panel{z-index:10;background:var(--color-surface);border:1px solid var(--table-border-color,var(--color-border));border-radius:var(--radius-card);min-width:160px;padding:.375rem;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 4px 12px oklch(0% 0 0/.1)}.toggle-item{border-radius:calc(var(--radius-card) - 2px);cursor:pointer;user-select:none;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:.8125rem;display:flex}.toggle-item:hover{background:var(--color-primary-muted)}.toggle-item input[type=checkbox]{accent-color:var(--color-primary);cursor:pointer;width:14px;height:14px}.table-wrapper{border:1px solid var(--table-border-color,var(--color-border));border-radius:var(--radius-card);position:relative;overflow-x:auto}.loading-overlay{background:oklch(from var(--color-surface) l c h / .7);z-index:2;border-radius:inherit;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.spinner{border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:1.5rem;height:1.5rem;animation:.6s linear infinite table-spin}@keyframes table-spin{to{transform:rotate(360deg)}}table{table-layout:fixed;border-collapse:collapse;background:var(--table-body-bg,var(--color-surface));width:100%}thead{z-index:1;position:sticky;top:0}th{padding:var(--table-cell-padding-block,.5rem) var(--table-cell-padding-inline,.75rem);font-weight:var(--table-header-font-weight,600);text-align:left;background:var(--table-header-bg,var(--color-surface-elevated));border-bottom:1px solid var(--table-border-color,var(--color-border));white-space:nowrap}.group-row th{border-bottom:none;padding-block-end:.25rem}.group-header{text-align:center;border-inline:1px solid var(--table-border-color,var(--color-border));color:var(--color-primary);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;border-bottom:2px solid var(--color-primary)!important}.group-empty{border-inline:none;border-bottom:1px solid #0000!important}th.sortable{padding:0}.sort-btn{width:100%;padding:var(--table-cell-padding-block,.5rem) var(--table-cell-padding-inline,.75rem);font-weight:inherit;font-size:inherit;text-align:left;cursor:pointer;color:inherit;white-space:nowrap;background:0 0;border:none;align-items:center;gap:.375rem;display:flex}.sort-btn:hover{background:var(--color-primary-muted)}.sort-icon{color:var(--color-text-muted);flex-shrink:0;transition:color .15s}.sort-icon--none .sort-asc,.sort-icon--none .sort-desc{opacity:.35}.sort-icon--asc{color:var(--color-primary)}.sort-icon--asc .sort-asc{opacity:1}.sort-icon--asc .sort-desc{opacity:0}.sort-icon--desc{color:var(--color-primary)}.sort-icon--desc .sort-asc{opacity:0}.sort-icon--desc .sort-desc{opacity:1}td{padding:var(--table-cell-padding-block,.5rem) var(--table-cell-padding-inline,.75rem);border-bottom:1px solid var(--table-border-color,var(--color-border));vertical-align:middle}tbody tr:last-child td{border-bottom:none}tbody tr:hover td{background:var(--color-primary-muted)}.empty-cell{text-align:center;color:var(--color-text-muted);padding-block:2rem}.pagination{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-block-start:.75rem;display:flex}.page-info{color:var(--color-text-muted);font-size:.8125rem}.page-controls{align-items:center;gap:.25rem;display:flex}.page-btn{border:1px solid var(--table-border-color,var(--color-border));border-radius:var(--radius-button);background:var(--color-surface);min-width:2rem;height:2rem;color:var(--color-text);cursor:pointer;justify-content:center;align-items:center;padding-inline:.375rem;font-size:.8125rem;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.page-btn:hover:not(:disabled){background:var(--color-primary-muted);border-color:var(--color-primary);color:var(--color-primary)}.page-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-ellipsis{min-width:2rem;height:2rem;color:var(--color-text-muted);justify-content:center;align-items:center;font-size:.8125rem;display:inline-flex}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
+var c = ":host{font-size:var(--font-size-base);color:var(--table-text-color,var(--color-text));display:block}.toolbar{justify-content:flex-end;margin-block-end:.5rem;display:flex;position:relative}.toggle-btn{font-size:var(--font-size-sm);color:var(--color-text-muted);background:var(--color-surface-elevated);border:1px solid var(--table-border-color,var(--color-border));border-radius:var(--radius-button);cursor:pointer;align-items:center;gap:.375rem;padding:.375rem .625rem;font-weight:500;transition:color .15s,background .15s;display:inline-flex}.toggle-btn:hover{color:var(--color-text);background:var(--color-primary-muted)}.toggle-panel{z-index:10;background:var(--color-surface);border:1px solid var(--table-border-color,var(--color-border));border-radius:var(--radius-card);min-width:160px;padding:.375rem;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 4px 12px oklch(0% 0 0/.1)}.toggle-item{border-radius:calc(var(--radius-card) - 2px);cursor:pointer;user-select:none;font-size:var(--font-size-sm);align-items:center;gap:.5rem;padding:.375rem .5rem;display:flex}.toggle-item:hover{background:var(--color-primary-muted)}.toggle-item input[type=checkbox]{accent-color:var(--color-primary);cursor:pointer;width:14px;height:14px}.table-wrapper{border:1px solid var(--table-border-color,var(--color-border));border-radius:var(--radius-card);position:relative;overflow-x:auto}.loading-overlay{background:oklch(from var(--color-surface) l c h / .7);z-index:2;border-radius:inherit;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.spinner{border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:1.5rem;height:1.5rem;animation:.6s linear infinite table-spin}@keyframes table-spin{to{transform:rotate(360deg)}}table{table-layout:fixed;border-collapse:collapse;background:var(--table-body-bg,var(--color-surface));width:100%}thead{z-index:1;position:sticky;top:0}th{padding:var(--table-cell-padding-block,.5rem) var(--table-cell-padding-inline,.75rem);font-weight:var(--table-header-font-weight,600);text-align:left;background:var(--table-header-bg,var(--color-surface-elevated));border-bottom:1px solid var(--table-border-color,var(--color-border));white-space:nowrap}.group-row th{border-bottom:none;padding-block-end:.25rem}.group-header{text-align:center;border-inline:1px solid var(--table-border-color,var(--color-border));color:var(--color-primary);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--color-primary)!important}.group-empty{border-inline:none;border-bottom:1px solid #0000!important}th.sortable{padding:0}.sort-btn{width:100%;padding:var(--table-cell-padding-block,.5rem) var(--table-cell-padding-inline,.75rem);font-weight:inherit;font-size:inherit;text-align:left;cursor:pointer;color:inherit;white-space:nowrap;background:0 0;border:none;align-items:center;gap:.375rem;display:flex}.sort-btn:hover{background:var(--color-primary-muted)}.sort-icon{color:var(--color-text-muted);flex-shrink:0;transition:color .15s}.sort-icon--none .sort-asc,.sort-icon--none .sort-desc{opacity:.35}.sort-icon--asc{color:var(--color-primary)}.sort-icon--asc .sort-asc{opacity:1}.sort-icon--asc .sort-desc{opacity:0}.sort-icon--desc{color:var(--color-primary)}.sort-icon--desc .sort-asc{opacity:0}.sort-icon--desc .sort-desc{opacity:1}td{padding:var(--table-cell-padding-block,.5rem) var(--table-cell-padding-inline,.75rem);border-bottom:1px solid var(--table-border-color,var(--color-border));vertical-align:middle}tbody tr:last-child td{border-bottom:none}tbody tr:hover td{background:var(--color-primary-muted)}.empty-cell{text-align:center;color:var(--color-text-muted);padding-block:2rem}.pagination{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-block-start:.75rem;display:flex}.page-info{font-size:var(--font-size-sm);color:var(--color-text-muted)}.page-controls{align-items:center;gap:.25rem;display:flex}.page-btn{min-width:2rem;height:2rem;font-size:var(--font-size-sm);border:1px solid var(--table-border-color,var(--color-border));border-radius:var(--radius-button);background:var(--color-surface);color:var(--color-text);cursor:pointer;justify-content:center;align-items:center;padding-inline:.375rem;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.page-btn:hover:not(:disabled){background:var(--color-primary-muted);border-color:var(--color-primary);color:var(--color-primary)}.page-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.page-ellipsis{min-width:2rem;height:2rem;font-size:var(--font-size-sm);color:var(--color-text-muted);justify-content:center;align-items:center;display:inline-flex}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
 function l(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/dist/table.js

@@ -1,2 +1,4 @@
-import { t as e } from "./table--O5km0Wv.js";
-export { e as Table };
+import { t as e } from "./inject-theme-BJHnhQgY.js";
+import { t } from "./table-AcQEI_eg.js";
+e();
+export { t as Table };

package/dist/tabs.js

@@ -1,2 +1,4 @@
-import { t as e } from "./tabs-C2lP0uxY.js";
-export { e as Tabs };
+import { t as e } from "./inject-theme-BJHnhQgY.js";
+import { t } from "./tabs-Ds0Hee2h.js";
+e();
+export { t as Tabs };

package/dist/theme.css

@@ -0,0 +1,186 @@
+:root {
+  /* Semantic colors – use these in Shadow DOM components */
+  --color-primary: oklch(0.624 0.214 264.38);
+  --color-primary-hover: oklch(0.553 0.222 265.64);
+  --color-primary-muted: oklch(0.91 0.04 264);
+  --color-surface: oklch(1 0 0);
+  --color-surface-elevated: oklch(0.985 0 0);
+  --color-border: oklch(0.91 0.01 264);
+  --color-border-strong: oklch(0.75 0.02 264);
+  --color-text: oklch(0.21 0.02 264);
+  --color-text-muted: oklch(0.5 0.02 264);
+  --color-text-inverse: oklch(0.99 0 0);
+
+  /* Semantic state colors */
+  --color-valid: oklch(0.60 0.18 145);
+  --color-valid-muted: oklch(0.93 0.05 145);
+  --color-invalid: oklch(0.55 0.22 25);
+  --color-invalid-hover: oklch(0.48 0.22 25);
+  --color-invalid-muted: oklch(0.95 0.05 25);
+
+  /* Optional palette extension for utilities */
+  --color-brand-50: oklch(0.97 0.02 264);
+  --color-brand-100: oklch(0.93 0.05 264);
+  --color-brand-200: oklch(0.88 0.08 264);
+  --color-brand-300: oklch(0.78 0.12 264);
+  --color-brand-400: oklch(0.68 0.16 264);
+  --color-brand-500: oklch(0.624 0.214 264.38);
+  --color-brand-600: oklch(0.553 0.222 265.64);
+  --color-brand-700: oklch(0.48 0.19 265);
+  --color-brand-800: oklch(0.4 0.15 265);
+  --color-brand-900: oklch(0.32 0.12 265);
+
+  /* Radius tokens */
+  --radius-button: 0.375rem;
+  --radius-card: 0.5rem;
+  --radius-input: 0.375rem;
+  --radius-full: 9999px;
+
+  /* Typography scale */
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-base: 0.875rem;
+  --font-size-md: 0.9375rem;
+  --font-size-lg: 1rem;
+  --font-size-xl: 1.125rem;
+
+  /* Button component – all overridable via tokens */
+  --button-font-size: var(--font-size-lg);
+  --button-font-weight: 500;
+  --button-padding-block: 0.5rem;
+  --button-padding-inline: 1rem;
+  --button-margin-block: 0;
+  --button-margin-inline: 0;
+  --button-transition-duration: 0.2s;
+  --button-focus-ring-offset: 2px;
+  --button-focus-ring-width: 2px;
+  --button-icon-gap: 0.5rem;
+
+  /* Table component – overridable via tokens */
+  --table-cell-padding-block: 0.5rem;
+  --table-cell-padding-inline: 0.75rem;
+  --table-header-font-weight: 600;
+  --table-header-bg: var(--color-surface-elevated);
+  --table-border-color: var(--color-border);
+  --table-body-bg: var(--color-surface);
+  --table-text-color: var(--color-text);
+
+  /* Easing */
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --ease-emphasized-in: cubic-bezier(0.3, 0, 1, 1);
+  --ease-emphasized-out: cubic-bezier(0, 0, 0.2, 1);
+
+  /* Dropdown button – overridable via tokens */
+  --dropdown-padding: 0.375rem;
+  --dropdown-item-padding-block: 0.375rem;
+  --dropdown-item-padding-inline: 0.5rem;
+  --dropdown-item-font-size: var(--font-size-base);
+  --dropdown-item-icon-gap: 0.5rem;
+
+  /* Toggle component – overridable via tokens */
+  --toggle-track-width: 2.75rem;
+  --toggle-track-height: 1.5rem;
+  --toggle-thumb-size: 1.125rem;
+  --toggle-thumb-travel: 1.25rem;
+  --toggle-transition-duration: 0.2s;
+  --toggle-icon-gap: 0.5rem;
+  --toggle-label-gap: 0.625rem;
+
+  /* Input component – overridable via tokens */
+  --input-font-size: var(--font-size-lg);
+  --input-padding-block: 0.5rem;
+  --input-padding-inline: 0.75rem;
+  --input-icon-size: 1.125rem;
+  --input-icon-gap: 0.5rem;
+  --input-transition-duration: 0.2s;
+
+  /* Menu component – overridable via tokens */
+  --menu-width: 240px;
+  --menu-collapsed-width: 3.5rem;
+  --menu-bg: var(--color-surface);
+  --menu-item-padding-block: 0.5rem;
+  --menu-item-padding-inline: 0.75rem;
+  --menu-item-font-size: var(--font-size-base);
+  --menu-item-icon-gap: 0.625rem;
+  --menu-indent: 1rem;
+  --menu-logo-padding: 1rem;
+  --menu-search-padding: 0.75rem;
+
+  /* Tab component – overridable via tokens */
+  --tab-padding-block: 0.625rem;
+  --tab-padding-inline: 1rem;
+  --tab-font-size: var(--font-size-base);
+  --tab-font-weight: 500;
+  --tab-gap: 0.25rem;
+  --tab-indicator-height: 2px;
+  --tab-transition-duration: 0.2s;
+  --tab-panel-padding-block: 1rem;
+
+  /* Modal component – overridable via tokens */
+  --modal-width: 32rem;
+  --modal-padding: 1.5rem;
+  --modal-border-radius: var(--radius-card);
+  --modal-backdrop: oklch(0 0 0 / 0.45);
+  --modal-transition-duration: 0.2s;
+
+  /* Radio group component – overridable via tokens */
+  --radio-size: 1.25rem;
+  --radio-dot-size: 0.5rem;
+  --radio-gap: 0.625rem;
+  --radio-label-gap: 0.5rem;
+  --radio-transition-duration: 0.2s;
+
+  /* Card component – overridable via tokens */
+  --card-padding: 1rem;
+  --card-gap: 0.75rem;
+  --card-transition-duration: 0.25s;
+
+  /* Selector component – overridable via tokens */
+  --selector-min-height: 2.5rem;
+  --selector-chip-gap: 0.25rem;
+  --selector-chip-padding-block: 0.125rem;
+  --selector-chip-padding-inline: 0.5rem;
+  --selector-chip-font-size: var(--font-size-sm);
+  --selector-panel-max-height: 16rem;
+  --selector-transition-duration: 0.2s;
+}
+
+/* ── Dark theme (system preference) ──────────────────────────────────────── */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-primary: oklch(0.70 0.20 264);
+    --color-primary-hover: oklch(0.78 0.19 264);
+    --color-primary-muted: oklch(0.24 0.05 264);
+    --color-surface: oklch(0.14 0.01 264);
+    --color-surface-elevated: oklch(0.19 0.01 264);
+    --color-border: oklch(0.28 0.02 264);
+    --color-border-strong: oklch(0.40 0.03 264);
+    --color-text: oklch(0.93 0.01 264);
+    --color-text-muted: oklch(0.62 0.02 264);
+    --color-text-inverse: oklch(0.14 0.01 264);
+    --color-valid: oklch(0.68 0.18 145);
+    --color-valid-muted: oklch(0.22 0.05 145);
+    --color-invalid: oklch(0.65 0.22 25);
+    --color-invalid-hover: oklch(0.58 0.22 25);
+    --color-invalid-muted: oklch(0.22 0.06 25);
+  }
+}
+
+/* ── Dark theme (manual override) ────────────────────────────────────────── */
+:root[data-theme="dark"] {
+  --color-primary: oklch(0.70 0.20 264);
+  --color-primary-hover: oklch(0.78 0.19 264);
+  --color-primary-muted: oklch(0.24 0.05 264);
+  --color-surface: oklch(0.14 0.01 264);
+  --color-surface-elevated: oklch(0.19 0.01 264);
+  --color-border: oklch(0.28 0.02 264);
+  --color-border-strong: oklch(0.40 0.03 264);
+  --color-text: oklch(0.93 0.01 264);
+  --color-text-muted: oklch(0.62 0.02 264);
+  --color-text-inverse: oklch(0.14 0.01 264);
+  --color-valid: oklch(0.68 0.18 145);
+  --color-valid-muted: oklch(0.22 0.05 145);
+  --color-invalid: oklch(0.65 0.22 25);
+  --color-invalid-hover: oklch(0.58 0.22 25);
+  --color-invalid-muted: oklch(0.22 0.06 25);
+}

package/dist/{toggle-D6UMZ8UZ.js → toggle--vvYf4Md.js}

@@ -1,6 +1,6 @@
 import { LitElement as e, html as t, nothing as n, unsafeCSS as r } from "lit";
 import { customElement as i, property as a } from "lit/decorators.js";
-var o = ":host{display:inline-block}button{align-items:center;gap:var(--toggle-label-gap);cursor:pointer;padding:0;background:0 0;border:none;min-height:2.75rem;padding-block:.625rem;display:inline-flex}button:focus{outline:none}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-button)}button:disabled{cursor:not-allowed;opacity:.45}.label-area{align-items:center;gap:var(--toggle-icon-gap);color:var(--color-text);user-select:none;font-size:.875rem;font-weight:500;line-height:1.25;display:inline-flex}.label-area:not(:has(slot[name=icon] *)):not(:has(.label)){display:none}.label{display:var(--toggle-label-display,inline)}.icon-wrapper{color:var(--color-text-muted);flex-shrink:0;align-items:center;display:inline-flex}.icon-wrapper:not(:has(*)){display:none}.label-area.icon-start .icon-wrapper{order:0}.label-area.icon-start .label{order:1}.label-area.icon-end .label{order:0}.label-area.icon-end .icon-wrapper{order:1}.track{display:var(--toggle-track-display,inline-flex);width:var(--toggle-track-width);height:var(--toggle-track-height);border-radius:var(--radius-full);background:var(--color-border-strong);transition:background-color var(--toggle-transition-duration) var(--ease-emphasized);flex-shrink:0;align-items:center;position:relative}:host([checked]) .track{background:var(--color-primary)}button:hover:not(:disabled) .track{background:var(--color-border-strong);filter:brightness(.9)}:host([checked]) button:hover:not(:disabled) .track{background:var(--color-primary-hover);filter:none}.thumb{left:calc((var(--toggle-track-height) - var(--toggle-thumb-size)) / 2);width:var(--toggle-thumb-size);height:var(--toggle-thumb-size);border-radius:var(--radius-full);background:var(--color-text-inverse);transition:transform var(--toggle-transition-duration) var(--ease-emphasized);position:absolute;transform:translate(0);box-shadow:0 1px 3px oklch(0% 0 0/.2)}:host([checked]) .thumb{transform:translateX(var(--toggle-thumb-travel))}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
+var o = ":host{display:inline-block}button{align-items:center;gap:var(--toggle-label-gap);cursor:pointer;padding:0;background:0 0;border:none;min-height:2.75rem;padding-block:.625rem;display:inline-flex}button:focus{outline:none}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-button)}button:disabled{cursor:not-allowed;opacity:.45}.label-area{align-items:center;gap:var(--toggle-icon-gap);color:var(--color-text);font-size:var(--font-size-base);user-select:none;font-weight:500;line-height:1.25;display:inline-flex}.label-area:not(:has(slot[name=icon] *)):not(:has(.label)){display:none}.label{display:var(--toggle-label-display,inline)}.icon-wrapper{color:var(--color-text-muted);flex-shrink:0;align-items:center;display:inline-flex}.icon-wrapper:not(:has(*)){display:none}.label-area.icon-start .icon-wrapper{order:0}.label-area.icon-start .label{order:1}.label-area.icon-end .label{order:0}.label-area.icon-end .icon-wrapper{order:1}.track{display:var(--toggle-track-display,inline-flex);width:var(--toggle-track-width);height:var(--toggle-track-height);border-radius:var(--radius-full);background:var(--color-border-strong);transition:background-color var(--toggle-transition-duration) var(--ease-emphasized);flex-shrink:0;align-items:center;position:relative}:host([checked]) .track{background:var(--color-primary)}button:hover:not(:disabled) .track{background:var(--color-border-strong);filter:brightness(.9)}:host([checked]) button:hover:not(:disabled) .track{background:var(--color-primary-hover);filter:none}.thumb{left:calc((var(--toggle-track-height) - var(--toggle-thumb-size)) / 2);width:var(--toggle-thumb-size);height:var(--toggle-thumb-size);border-radius:var(--radius-full);background:var(--color-text-inverse);transition:transform var(--toggle-transition-duration) var(--ease-emphasized);position:absolute;transform:translate(0);box-shadow:0 1px 3px oklch(0% 0 0/.2)}:host([checked]) .thumb{transform:translateX(var(--toggle-thumb-travel))}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
 function s(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/dist/toggle.js

@@ -1,2 +1,4 @@
-import { t as e } from "./toggle-D6UMZ8UZ.js";
-export { e as Toggle };
+import { t as e } from "./inject-theme-BJHnhQgY.js";
+import { t } from "./toggle--vvYf4Md.js";
+e();
+export { t as Toggle };

package/dist/web-components.js

@@ -1,24 +1,28 @@
-import { t as e } from "./button-DYrT530y.js";
+import { t as e } from "./button-DQ0O2D-7.js";
 import "./button.js";
-import { t } from "./table--O5km0Wv.js";
+import { t } from "./table-AcQEI_eg.js";
 import "./table.js";
-import { t as n } from "./dropdown-button-B6XNoy4L.js";
+import { t as n } from "./dropdown-button-B7Fq2mCT.js";
 import "./dropdown-button.js";
-import { t as r } from "./menu-DmAFaVi5.js";
+import { t as r } from "./menu-Dx0eMU3U.js";
 import "./menu.js";
-import { t as i } from "./layout-CYvgu_WE.js";
-import { t as a } from "./form-layout-DCX8X-8-.js";
+import { t as i } from "./layout-BsVF8Au9.js";
+import { t as a } from "./form-layout-C4YmJMfZ.js";
 import "./layouts.js";
-import { t as o } from "./toggle-D6UMZ8UZ.js";
+import { t as o } from "./toggle--vvYf4Md.js";
 import "./toggle.js";
-import { t as s } from "./input-BVlPYqTe.js";
+import { t as s } from "./input-DNyTDs8C.js";
 import "./input.js";
-import { t as c } from "./modal-v1GlqMF_.js";
+import { t as c } from "./modal-DhA8aXSy.js";
 import "./modal.js";
-import { t as l } from "./tabs-C2lP0uxY.js";
+import { t as l } from "./tabs-Ds0Hee2h.js";
 import "./tabs.js";
-import { t as u } from "./selector-Bl7Nbkqo.js";
+import { t as u } from "./radio-group-rh17Z4Of.js";
+import "./radio-group.js";
+import { t as d } from "./selector-B32NqDPk.js";
 import "./selector.js";
-import { unsafeCSS as d } from "lit";
-const f = d("/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--spacing:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary:oklch(62.4% .214 264.38);--color-primary-hover:oklch(55.3% .222 265.64);--color-primary-muted:oklch(91% .04 264);--color-surface:oklch(100% 0 0);--color-surface-elevated:oklch(98.5% 0 0);--color-border:oklch(91% .01 264);--color-border-strong:oklch(75% .02 264);--color-text:oklch(21% .02 264);--color-text-muted:oklch(50% .02 264);--color-text-inverse:oklch(99% 0 0);--color-valid:oklch(60% .18 145);--color-invalid:oklch(55% .22 25);--color-invalid-muted:oklch(95% .05 25);--radius-button:.375rem;--radius-card:.5rem;--radius-input:.375rem;--radius-full:9999px;--button-font-size:1rem;--button-font-weight:500;--button-padding-block:.5rem;--button-padding-inline:1rem;--button-margin-block:0;--button-margin-inline:0;--button-transition-duration:.2s;--button-focus-ring-offset:2px;--button-focus-ring-width:2px;--button-icon-gap:.5rem;--table-cell-padding-block:.5rem;--table-cell-padding-inline:.75rem;--table-header-font-weight:600;--table-header-bg:var(--color-surface-elevated);--table-border-color:var(--color-border);--table-body-bg:var(--color-surface);--table-text-color:var(--color-text);--ease-emphasized:cubic-bezier(.2, 0, 0, 1);--ease-emphasized-in:cubic-bezier(.3, 0, 1, 1);--ease-emphasized-out:cubic-bezier(0, 0, .2, 1);--dropdown-padding:.375rem;--dropdown-item-padding-block:.375rem;--dropdown-item-padding-inline:.5rem;--dropdown-item-font-size:.875rem;--dropdown-item-icon-gap:.5rem;--toggle-track-width:2.75rem;--toggle-track-height:1.5rem;--toggle-thumb-size:1.125rem;--toggle-thumb-travel:1.25rem;--toggle-transition-duration:.2s;--toggle-icon-gap:.5rem;--toggle-label-gap:.625rem;--input-font-size:1rem;--input-padding-block:.5rem;--input-padding-inline:.75rem;--input-icon-size:1.125rem;--input-icon-gap:.5rem;--input-transition-duration:.2s;--menu-width:240px;--menu-collapsed-width:3.5rem;--menu-bg:var(--color-surface);--menu-item-padding-block:.5rem;--menu-item-padding-inline:.75rem;--menu-item-font-size:.875rem;--menu-item-icon-gap:.625rem;--menu-indent:1rem;--menu-logo-padding:1rem;--menu-search-padding:.75rem;--tab-padding-block:.625rem;--tab-padding-inline:1rem;--tab-font-size:.875rem;--tab-font-weight:500;--tab-gap:.25rem;--tab-indicator-height:2px;--tab-transition-duration:.2s;--tab-panel-padding-block:1rem;--modal-width:32rem;--modal-padding:1.5rem;--modal-border-radius:var(--radius-card);--modal-backdrop:oklch(0% 0 0/.45);--modal-transition-duration:.2s;--selector-min-height:2.5rem;--selector-chip-gap:.25rem;--selector-chip-padding-block:.125rem;--selector-chip-padding-inline:.5rem;--selector-chip-font-size:.8125rem;--selector-panel-max-height:16rem;--selector-transition-duration:.2s}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.fixed{position:fixed}.static{position:static}.sticky{position:sticky}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.flex-wrap{flex-wrap:wrap}.border{border-style:var(--tw-border-style);border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-primary:oklch(70% .2 264);--color-primary-hover:oklch(78% .19 264);--color-primary-muted:oklch(24% .05 264);--color-surface:oklch(14% .01 264);--color-surface-elevated:oklch(19% .01 264);--color-border:oklch(28% .02 264);--color-border-strong:oklch(40% .03 264);--color-text:oklch(93% .01 264);--color-text-muted:oklch(62% .02 264);--color-text-inverse:oklch(14% .01 264);--color-valid:oklch(68% .18 145);--color-valid-muted:oklch(22% .05 145);--color-invalid:oklch(65% .22 25);--color-invalid-muted:oklch(22% .06 25)}}:root[data-theme=dark]{--color-primary:oklch(70% .2 264);--color-primary-hover:oklch(78% .19 264);--color-primary-muted:oklch(24% .05 264);--color-surface:oklch(14% .01 264);--color-surface-elevated:oklch(19% .01 264);--color-border:oklch(28% .02 264);--color-border-strong:oklch(40% .03 264);--color-text:oklch(93% .01 264);--color-text-muted:oklch(62% .02 264);--color-text-inverse:oklch(14% .01 264);--color-valid:oklch(68% .18 145);--color-valid-muted:oklch(22% .05 145);--color-invalid:oklch(65% .22 25);--color-invalid-muted:oklch(22% .06 25)}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}");
-export { e as Button, n as DropdownButton, a as FormLayout, s as Input, i as Layout, r as Menu, c as Modal, u as Selector, t as Table, l as Tabs, o as Toggle, f as tailwindBase };
+import { t as f } from "./card-3IqRfmms.js";
+import "./card.js";
+import { unsafeCSS as p } from "lit";
+const m = p("/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--spacing:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary:oklch(62.4% .214 264.38);--color-primary-hover:oklch(55.3% .222 265.64);--color-primary-muted:oklch(91% .04 264);--color-surface:oklch(100% 0 0);--color-surface-elevated:oklch(98.5% 0 0);--color-border:oklch(91% .01 264);--color-border-strong:oklch(75% .02 264);--color-text:oklch(21% .02 264);--color-text-muted:oklch(50% .02 264);--color-text-inverse:oklch(99% 0 0);--color-valid:oklch(60% .18 145);--color-invalid:oklch(55% .22 25);--color-invalid-hover:oklch(48% .22 25);--color-invalid-muted:oklch(95% .05 25);--radius-button:.375rem;--radius-card:.5rem;--radius-input:.375rem;--radius-full:9999px;--font-size-xs:.75rem;--font-size-sm:.8125rem;--font-size-base:.875rem;--font-size-md:.9375rem;--font-size-lg:1rem;--font-size-xl:1.125rem;--button-font-size:var(--font-size-lg);--button-font-weight:500;--button-padding-block:.5rem;--button-padding-inline:1rem;--button-margin-block:0;--button-margin-inline:0;--button-transition-duration:.2s;--button-focus-ring-offset:2px;--button-focus-ring-width:2px;--button-icon-gap:.5rem;--table-cell-padding-block:.5rem;--table-cell-padding-inline:.75rem;--table-header-font-weight:600;--table-header-bg:var(--color-surface-elevated);--table-border-color:var(--color-border);--table-body-bg:var(--color-surface);--table-text-color:var(--color-text);--ease-emphasized:cubic-bezier(.2, 0, 0, 1);--ease-emphasized-in:cubic-bezier(.3, 0, 1, 1);--ease-emphasized-out:cubic-bezier(0, 0, .2, 1);--dropdown-padding:.375rem;--dropdown-item-padding-block:.375rem;--dropdown-item-padding-inline:.5rem;--dropdown-item-font-size:var(--font-size-base);--dropdown-item-icon-gap:.5rem;--toggle-track-width:2.75rem;--toggle-track-height:1.5rem;--toggle-thumb-size:1.125rem;--toggle-thumb-travel:1.25rem;--toggle-transition-duration:.2s;--toggle-icon-gap:.5rem;--toggle-label-gap:.625rem;--input-font-size:var(--font-size-lg);--input-padding-block:.5rem;--input-padding-inline:.75rem;--input-icon-size:1.125rem;--input-icon-gap:.5rem;--input-transition-duration:.2s;--menu-width:240px;--menu-collapsed-width:3.5rem;--menu-bg:var(--color-surface);--menu-item-padding-block:.5rem;--menu-item-padding-inline:.75rem;--menu-item-font-size:var(--font-size-base);--menu-item-icon-gap:.625rem;--menu-indent:1rem;--menu-logo-padding:1rem;--menu-search-padding:.75rem;--tab-padding-block:.625rem;--tab-padding-inline:1rem;--tab-font-size:var(--font-size-base);--tab-font-weight:500;--tab-gap:.25rem;--tab-indicator-height:2px;--tab-transition-duration:.2s;--tab-panel-padding-block:1rem;--modal-width:32rem;--modal-padding:1.5rem;--modal-border-radius:var(--radius-card);--modal-backdrop:oklch(0% 0 0/.45);--modal-transition-duration:.2s;--radio-size:1.25rem;--radio-dot-size:.5rem;--radio-gap:.625rem;--radio-label-gap:.5rem;--radio-transition-duration:.2s;--card-padding:1rem;--card-gap:.75rem;--card-transition-duration:.25s;--selector-min-height:2.5rem;--selector-chip-gap:.25rem;--selector-chip-padding-block:.125rem;--selector-chip-padding-inline:.5rem;--selector-chip-font-size:var(--font-size-sm);--selector-panel-max-height:16rem;--selector-transition-duration:.2s}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.flex-wrap{flex-wrap:wrap}.border{border-style:var(--tw-border-style);border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-primary:oklch(70% .2 264);--color-primary-hover:oklch(78% .19 264);--color-primary-muted:oklch(24% .05 264);--color-surface:oklch(14% .01 264);--color-surface-elevated:oklch(19% .01 264);--color-border:oklch(28% .02 264);--color-border-strong:oklch(40% .03 264);--color-text:oklch(93% .01 264);--color-text-muted:oklch(62% .02 264);--color-text-inverse:oklch(14% .01 264);--color-valid:oklch(68% .18 145);--color-valid-muted:oklch(22% .05 145);--color-invalid:oklch(65% .22 25);--color-invalid-hover:oklch(58% .22 25);--color-invalid-muted:oklch(22% .06 25)}}:root[data-theme=dark]{--color-primary:oklch(70% .2 264);--color-primary-hover:oklch(78% .19 264);--color-primary-muted:oklch(24% .05 264);--color-surface:oklch(14% .01 264);--color-surface-elevated:oklch(19% .01 264);--color-border:oklch(28% .02 264);--color-border-strong:oklch(40% .03 264);--color-text:oklch(93% .01 264);--color-text-muted:oklch(62% .02 264);--color-text-inverse:oklch(14% .01 264);--color-valid:oklch(68% .18 145);--color-valid-muted:oklch(22% .05 145);--color-invalid:oklch(65% .22 25);--color-invalid-hover:oklch(58% .22 25);--color-invalid-muted:oklch(22% .06 25)}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}");
+export { e as Button, f as Card, n as DropdownButton, a as FormLayout, s as Input, i as Layout, r as Menu, c as Modal, u as RadioGroup, d as Selector, t as Table, l as Tabs, o as Toggle, m as tailwindBase };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vverchonov/web-components",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -21,7 +21,10 @@
     "./dist/input.js",
     "./dist/modal.js",
     "./dist/tabs.js",
-    "./dist/selector.js"
+    "./dist/selector.js",
+    "./dist/card.js",
+    "./dist/radio-group.js",
+    "./dist/theme.css"
   ],
   "files": [
     "dist"
@@ -74,6 +77,14 @@
       "types": "./dist/components/selector/index.d.ts",
       "import": "./dist/selector.js"
     },
+    "./card": {
+      "types": "./dist/components/card/index.d.ts",
+      "import": "./dist/card.js"
+    },
+    "./radio-group": {
+      "types": "./dist/components/radio-group/index.d.ts",
+      "import": "./dist/radio-group.js"
+    },
     "./react": {
       "types": "./dist/react/index.d.ts",
       "import": "./dist/react.js"
@@ -118,10 +129,19 @@
       "types": "./dist/react/layout.d.ts",
       "import": "./dist/react/layout.js"
     },
+    "./react/card": {
+      "types": "./dist/react/card.d.ts",
+      "import": "./dist/react/card.js"
+    },
     "./react/form-layout": {
       "types": "./dist/react/form-layout.d.ts",
       "import": "./dist/react/form-layout.js"
-    }
+    },
+    "./react/radio-group": {
+      "types": "./dist/react/radio-group.d.ts",
+      "import": "./dist/react/radio-group.js"
+    },
+    "./theme.css": "./dist/theme.css"
   },
   "peerDependencies": {
     "lit": "^3.0.0",

package/dist/button-DYrT530y.js

@@ -1,39 +0,0 @@
-import { LitElement as e, html as t, unsafeCSS as n } from "lit";
-import { customElement as r, property as i } from "lit/decorators.js";
-var a = ":host{display:inline-block}button{margin:var(--button-margin-block) var(--button-margin-inline);padding:var(--button-padding-block) var(--button-padding-inline);font-size:var(--button-font-size);font-weight:var(--button-font-weight);border-radius:var(--radius-button);background:var(--color-primary);color:var(--color-text-inverse);cursor:pointer;transition:background-color var(--button-transition-duration) var(--ease-emphasized);border:none;align-items:center;display:inline-flex}button:has(.icon-wrapper:has(*)){gap:var(--button-icon-gap)}button .icon-wrapper{align-items:center;display:inline-flex}button .icon-wrapper:not(:has(*)){display:none}button.icon-start .icon-wrapper{order:0}button.icon-start .label{order:1}button.icon-end .label{order:0}button.icon-end .icon-wrapper{order:1}button:hover{background:var(--color-primary-hover)}button:focus{outline:none}";
-function o(e, t, n, r) {
-	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
-	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
-	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
-	return i > 3 && a && Object.defineProperty(t, n, a), a;
-}
-var s = class extends e {
-	static {
-		this.styles = [n(a)];
-	}
-	_handleClick(e) {
-		this.onClick?.(e);
-	}
-	render() {
-		return t`
-      <button
-        type=${this.type}
-        class="icon-${this.iconPosition}"
-        @click=${this._handleClick}
-      >
-        <span class="icon-wrapper">
-          <slot name="icon"></slot>
-        </span>
-        <span class="label">${this.label}</span>
-      </button>
-    `;
-	}
-	constructor(...e) {
-		super(...e), this.label = "Click me", this.iconPosition = "start", this.type = "button";
-	}
-};
-o([i({ type: String })], s.prototype, "label", void 0), o([i({
-	type: String,
-	attribute: "icon-position"
-})], s.prototype, "iconPosition", void 0), o([i({ type: String })], s.prototype, "type", void 0), o([i({ attribute: !1 })], s.prototype, "onClick", void 0), s = o([r("app-button")], s);
-export { s as t };