@sekiui/elements 0.0.55 → 0.0.57

package/dist/collection/components/field-error/seki-field-error.js

@@ -49,7 +49,7 @@ export class SekiFieldError {
     }
     render() {
         const style = this.visible ? {} : { display: 'none' };
-        return (h("div", { key: '23898d8cdf6e79e0710776895ac8a36c06262524', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '7c40a36d065602eb635180ed0805bca9216c5015' })));
+        return (h("div", { key: '62c9745e9eebb55e229bbf69ebb4d0eadd78a322', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: 'bcba32aa1317fdb326d769815f09f253573cf4b1' })));
     }
     static get is() { return "seki-field-error"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-group/seki-field-group.js

@@ -11,7 +11,7 @@ export class SekiFieldGroup {
         const style = {
             '--seki-field-group-gap': this.gap,
         };
-        return (h("div", { key: '32e2881723467de4e83135f38f339bd1334ea19f', class: "field-group", style: style }, h("slot", { key: '3909c9108222772376d916718003600d9d84f10f' })));
+        return (h("div", { key: 'e21f5d7fb8ab417f1897a7ffc4a558b2c568c672', class: "field-group", style: style }, h("slot", { key: '8c13a1e4bcc3a147527f742e0049b39c4276a909' })));
     }
     static get is() { return "seki-field-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-label/seki-field-label.js

@@ -9,7 +9,7 @@ export class SekiFieldLabel {
     }
     render() {
         const labelProps = this.htmlFor ? { for: this.htmlFor } : {};
-        return (h("label", Object.assign({ key: 'c57011f8722920f073fc05ae3b260e581689c43e' }, labelProps), h("slot", { key: '6e807e411376526b20cf66d694766ce11065b734' }), this.required && h("span", { key: '53d676c377fa93c6d41c50856b4db598cf3c2c15', class: "required-indicator" }, " *")));
+        return (h("label", Object.assign({ key: 'bc9830ee6d5327a8851f85fb44a0562c8e1b0c9b' }, labelProps), h("slot", { key: '6109afa68d65d66e6ac41c28d0242587855daa8a' }), this.required && h("span", { key: 'faa5a34cff108897e74b094804779d191ce57a17', class: "required-indicator" }, " *")));
     }
     static get is() { return "seki-field-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-legend/seki-field-legend.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiFieldLegend {
     render() {
-        return (h("legend", { key: 'adcc0cb95335522fc66dc791a3cc063d2493c36b' }, h("slot", { key: '90a382f1eac9b23133f8daf927a2163491f09c38' })));
+        return (h("legend", { key: '271276619ab1898872e15cebf11d43070b563443' }, h("slot", { key: '47a9c3f06f82040a16ca2981f6560df317b13e8d' })));
     }
     static get is() { return "seki-field-legend"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fieldset/seki-fieldset.js

@@ -8,7 +8,7 @@ export class SekiFieldset {
         this.disabled = false;
     }
     render() {
-        return (h("fieldset", { key: '71604f49a136c1bb6c907c8dc3ac669898e663cd', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '8f27126458260cc264b230877b8363290bbbdad3', name: "legend" }), h("div", { key: '04cc5aa90217a824db0150f2ac9a23c0308f5c71', class: "fieldset-content" }, h("slot", { key: 'e6e47348a642909c61fe042ab15e9cb8eb29adee' }))));
+        return (h("fieldset", { key: '45e6f651cd2e85c7c48c440e48bee99a559ddee6', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '3aa832dbcf6b87be83c2d1d7774ffe0cb59c0550', name: "legend" }), h("div", { key: 'febb1795ea408a6ddb94c0cc03bc78622809672e', class: "fieldset-content" }, h("slot", { key: '4807686cd487c9330f1dadc4b145986f78347eea' }))));
     }
     static get is() { return "seki-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,7 @@ export class SekiInput {
         }
     }
     render() {
-        return (h("input", { key: '8eb8533483c82c21b5beeb53564834e3b12818f3', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        return (h("input", { key: 'a45cad3b7568ea245c39cbc972ff01afd601cf72', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
     }
     static get is() { return "seki-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/seki-select.js

@@ -334,7 +334,7 @@ export class SekiSelect {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: '78edc08bd62bc19a1752ec58b966e57e5ef3afc8' }, h("slot", { key: 'adcf89b43702e2f62a60d73e693d9b5d362e3169' }), this.name && this.renderHiddenNativeElement()));
+        return (h(Host, { key: 'f9b0a239ecb0737c8341b1a2377d37d00374dfd7' }, h("slot", { key: '0245a9ff1da69043b08517ba859b305108710252' }), this.name && this.renderHiddenNativeElement()));
     }
     renderHiddenNativeElement() {
         if (this.multiple) {

package/dist/collection/components/select-group/seki-select-group.js

@@ -11,7 +11,7 @@ export class SekiSelectGroup {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: 'eb653182cb7b5abc3cae421b8d2d1e8ac2986711' }, h("div", { key: 'a8d7acb214f068a8e0632a6c351a001f8763c7f4', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: 'b824a62902fdab61643ec531312cb334c503039c', class: "group-separator", "aria-hidden": "true" }), h("div", { key: 'dd4cb2c630cc3168871bc8341153ed12286a3568', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: '772b976e269f92fd3f4e0bfe3a1e46655fcac9e1', name: "label" }, this.label)), h("div", { key: 'c986fad023b5b3678f8a5aa1fd90eea60c6bb41a', class: "group-options" }, h("slot", { key: 'ae49a1089f894b3a2efe55814b79115eaeb67d7c' })))));
+        return (h(Host, { key: '64132ea9cd3ff6aaa32471c06d40c4cabb6f4c0e' }, h("div", { key: 'e6303076210a7bbe91fd731e2d65bbf03e889340', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: 'cc14401bbb24c24199ac1f9b245190e85b8be1bf', class: "group-separator", "aria-hidden": "true" }), h("div", { key: 'f9457100bafadee24178984f04e6b2e44898d480', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'f8e5530dc70464609ae3df68dacd6780d41f0543', name: "label" }, this.label)), h("div", { key: '39db5505344715019ddc5fbc0c70121cbaa6f7d9', class: "group-options" }, h("slot", { key: 'c9a35e3f34c28818fdf581eb9f982de36e1a837f' })))));
     }
     static get is() { return "seki-select-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select-option/seki-select-option.js

@@ -75,7 +75,7 @@ export class SekiSelectOption {
         const selectContext = this.getSelectContext();
         const isSelected = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isValueSelected(this.value)) || false;
         const isFocused = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.focusedOptionValue) === this.value;
-        return (h(Host, { key: '368d46b8ceba8e1591986e2c5badadeba25d6d63' }, h("div", { key: 'a222d31554354b845f976c7fda2baae8b1262afb', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '6c2b16e8a4de74912a55762fd71d11b960e070c0', class: "option-label" }, h("slot", { key: '99a147943a0e965170c7dde7b9fbf4745262c302' })), isSelected && (h("span", { key: 'b436d100e94537723b8daa78869b1ff199c0c121', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '037f26b6213220ef26f88e70895b358cb615cc46', name: "selected-indicator" }, h("svg", { key: '54a7fbc3119e83bfd1173cc60b349cb9eb0d745a', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '22c392c22a9334bf302c85bf2745deb701dfdf59', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: 'a094d52197f71ea608c5d6864a9e1144c5cbb214' }, h("div", { key: '664ef7d213d976c25575dacec8fedf4270127894', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: 'bf8997e6251d4bb205631c316e0bb61cc7dacafc', class: "option-label" }, h("slot", { key: 'cac04b726bb0a021e019ec305dbf133f9ec6eafc' })), isSelected && (h("span", { key: '07e161e78770a780978e82e372d982a5ed8ee183', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '3ff2360575e24d76753d9c73690fc08851f7d2ce', name: "selected-indicator" }, h("svg", { key: '2379ac109dd1a3acb2645d3ea9040329670b5ce4', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '99acd47c4077be2b703022441a283b74508271c7', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "seki-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sidebar/seki-sidebar-content.css

@@ -0,0 +1,82 @@
+/**
+ * SekiSidebarContent CSS
+ * Styling for the scrollable main content area of the sidebar
+ */
+
+:host {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--sidebar-padding, 0.5rem);
+  gap: var(--sidebar-gap, 0.5rem);
+}
+
+/* Custom scrollbar styling */
+.content-wrapper::-webkit-scrollbar {
+  width: var(--scrollbar-width, 6px);
+}
+
+.content-wrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.content-wrapper::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb, #d1d5db);
+  border-radius: var(--scrollbar-radius, 3px);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.content-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover, #9ca3af);
+  background-clip: content-box;
+}
+
+:host([data-theme="dark"]) .content-wrapper::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-dark, #52525b);
+  background-clip: content-box;
+}
+
+:host([data-theme="dark"]) .content-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover-dark, #71717a);
+  background-clip: content-box;
+}
+
+/* Firefox scrollbar */
+.content-wrapper {
+  scrollbar-color: var(--scrollbar-thumb, #d1d5db) transparent;
+  scrollbar-width: thin;
+}
+
+:host([data-theme="dark"]) .content-wrapper {
+  scrollbar-color: var(--scrollbar-thumb-dark, #52525b) transparent;
+}
+
+/* Print styles */
+@media print {
+  :host {
+    overflow: visible;
+  }
+
+  .content-wrapper {
+    overflow: visible;
+    padding: 0;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  .content-wrapper::-webkit-scrollbar-thumb {
+    border-width: 1px;
+  }
+}

package/dist/collection/components/sidebar/seki-sidebar-content.js

@@ -0,0 +1,33 @@
+/**
+ * SekiSidebarContent Component
+ * @description Scrollable main content area of the sidebar
+ * Contains menu items, groups, and other sidebar content
+ * @component
+ * @example
+ * <seki-sidebar-content>
+ *   <seki-sidebar-group title="Navigation">
+ *     <!-- Menu items -->
+ *   </seki-sidebar-group>
+ * </seki-sidebar-content>
+ */
+import { h, Host } from "@stencil/core";
+export class SekiSidebarContent {
+    /**
+     * Render the component
+     */
+    render() {
+        return (h(Host, { key: 'e0fbac0ce2f3013667eadd8ad31c3de5f598490c' }, h("div", { key: '6a9015ee078aa4434b07d77c16f90362646786f6', class: "content-wrapper" }, h("slot", { key: '7490825d408800a5ba57f8f07a64f7b8abbbd4fd' }))));
+    }
+    static get is() { return "seki-sidebar-content"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sidebar-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sidebar-content.css"]
+        };
+    }
+}

package/dist/collection/components/sidebar/seki-sidebar-footer.css

@@ -0,0 +1,44 @@
+/**
+ * SekiSidebarFooter CSS
+ * Styling for the sticky footer section of the sidebar
+ */
+
+:host {
+  display: block;
+  padding: var(--sidebar-padding, 0.5rem);
+  border-top: 1px solid var(--sidebar-border, #e5e7eb);
+  background-color: var(--sidebar-bg, #ffffff);
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  min-height: var(--sidebar-footer-height, auto);
+  flex-shrink: 0;
+}
+
+:host([data-theme="dark"]) {
+  border-top-color: var(--sidebar-border-dark, #27272a);
+  background-color: var(--sidebar-bg-dark, #09090b);
+}
+
+.footer-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  gap: var(--sidebar-gap, 0.5rem);
+}
+
+/* Print styles */
+@media print {
+  :host {
+    display: none;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  :host {
+    border-top-width: 2px;
+  }
+}

package/dist/collection/components/sidebar/seki-sidebar-footer.js

@@ -0,0 +1,31 @@
+/**
+ * SekiSidebarFooter Component
+ * @description Sticky footer section at the bottom of the sidebar
+ * Provides a slot for footer content (user info, settings, logout button)
+ * @component
+ * @example
+ * <seki-sidebar-footer>
+ *   <div class="user-info">User Name</div>
+ * </seki-sidebar-footer>
+ */
+import { h, Host } from "@stencil/core";
+export class SekiSidebarFooter {
+    /**
+     * Render the component
+     */
+    render() {
+        return (h(Host, { key: '1ce49f79758c8281d9b5c8c2589f938c1a731ceb' }, h("div", { key: '28992ba4de35c194c9c2f76e8d14f0299a23b242', class: "footer-wrapper" }, h("slot", { key: '7896c9c1823da9d65a4f99206840823372e5b174' }))));
+    }
+    static get is() { return "seki-sidebar-footer"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-sidebar-footer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-sidebar-footer.css"]
+        };
+    }
+}

package/dist/collection/components/sidebar/seki-sidebar-group.css

@@ -0,0 +1,158 @@
+/**
+ * SekiSidebarGroup CSS
+ * Styling for sidebar groups with optional collapsible sections
+ */
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.group-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sidebar-gap, 0.5rem);
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  gap: var(--sidebar-gap, 0.5rem);
+  padding: var(--sidebar-padding-sm, 0.25rem 0);
+  color: var(--sidebar-muted, var(--seki-color-text-muted));
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: margin-top 200ms ease-linear, opacity 200ms ease-linear;
+  /* Use built-in typography */
+  font-size: var(--seki-font-size-xs);
+  font-weight: var(--seki-font-weight-semibold);
+  font-family: var(--seki-font-sans);
+}
+
+:host([data-theme="dark"]) .group-header {
+  color: var(--sidebar-muted-dark, #a1a1aa);
+}
+
+.group-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  font-size: 0.75rem;
+  transition: transform var(--sidebar-transition, 200ms) ease-out;
+  border-radius: var(--sidebar-radius-sm, 0.25rem);
+}
+
+.group-toggle:hover {
+  background-color: var(--sidebar-hover-bg, #f3f4f6);
+}
+
+.group-toggle:focus-visible {
+  outline: 2px solid var(--sidebar-primary, #3b82f6);
+  outline-offset: 2px;
+}
+
+:host([data-theme="dark"]) .group-toggle:hover {
+  background-color: var(--sidebar-hover-bg-dark, #27272a);
+}
+
+:host([data-collapsed="true"]) .group-toggle .toggle-icon {
+  transform: rotate(-90deg);
+}
+
+.toggle-icon {
+  display: inline-block;
+  transition: transform var(--sidebar-transition, 200ms) ease-out;
+}
+
+.group-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.group-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  transition: background-color var(--sidebar-transition, 200ms) ease-out;
+  border-radius: var(--sidebar-radius-sm, 0.25rem);
+}
+
+.group-action:hover {
+  background-color: var(--sidebar-hover-bg, #f3f4f6);
+}
+
+.group-action:focus-visible {
+  outline: 2px solid var(--sidebar-primary, #3b82f6);
+  outline-offset: 2px;
+}
+
+:host([data-theme="dark"]) .group-action:hover {
+  background-color: var(--sidebar-hover-bg-dark, #27272a);
+}
+
+.group-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sidebar-gap, 0.5rem);
+  animation: slideDown var(--sidebar-transition, 200ms) ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    max-height: 1000px;
+  }
+}
+
+/* Print styles */
+@media print {
+  .group-toggle,
+  .group-action {
+    display: none;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  .group-toggle,
+  .group-action {
+    border: 1px solid currentColor;
+  }
+}
+
+/* Collapsed icon mode - hide group title with smooth transitions */
+:host-context(seki-sidebar[data-state="closed"][data-collapse-mode="icon"]) .group-header {
+  margin-top: -2rem;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* Expanded - show group title */
+:host-context(seki-sidebar[data-state="open"]) .group-header,
+:host-context(seki-sidebar:not([data-state="closed"])) .group-header {
+  margin-top: 0;
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}