@sekiui/elements 0.0.61 → 0.0.64

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

@@ -0,0 +1,125 @@
+import { h, Host } from "@stencil/core";
+export class SekiButtonGroup {
+    constructor() {
+        /**
+         * Layout direction of the button group
+         */
+        this.orientation = 'horizontal';
+    }
+    componentDidLoad() {
+        this.updateChildButtons();
+    }
+    componentDidUpdate() {
+        this.updateChildButtons();
+    }
+    updateChildButtons() {
+        const buttons = this.el.querySelectorAll('seki-button');
+        const count = buttons.length;
+        buttons.forEach((button, index) => {
+            // Set size if specified
+            if (this.size) {
+                button.setAttribute('size', this.size);
+            }
+            // Set position data attributes for CSS styling
+            button.removeAttribute('data-group-first');
+            button.removeAttribute('data-group-middle');
+            button.removeAttribute('data-group-last');
+            button.removeAttribute('data-group-only');
+            if (count === 1) {
+                button.setAttribute('data-group-only', '');
+            }
+            else if (index === 0) {
+                button.setAttribute('data-group-first', '');
+            }
+            else if (index === count - 1) {
+                button.setAttribute('data-group-last', '');
+            }
+            else {
+                button.setAttribute('data-group-middle', '');
+            }
+            // Set orientation for correct border-radius direction
+            button.setAttribute('data-group-orientation', this.orientation);
+        });
+    }
+    render() {
+        return (h(Host, { key: '1a793cbd24a8d424e3815fd7beabf292b62fa50d' }, h("div", { key: 'b7c02ddcd45c8b081a63d3d446e56abd36dd778e', class: {
+                'button-group': true,
+                [`button-group--${this.orientation}`]: true,
+            }, role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '29ec991c2e3dd1157179c4f040d942caf0d0d7a1', onSlotchange: () => this.updateChildButtons() }))));
+    }
+    static get is() { return "seki-button-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-button-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction of the button group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Size applied to all child buttons (optional)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the button group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/calendar/seki-calendar.css

@@ -0,0 +1,252 @@
+/* Calendar Component Styles */
+
+:host {
+  /* Colors */
+  --seki-calendar-bg: var(--seki-background, hsl(0 0% 100%));
+  --seki-calendar-text: var(--seki-foreground, hsl(240 10% 3.9%));
+  --seki-calendar-muted: var(--seki-muted-foreground, hsl(240 3.8% 46.1%));
+  --seki-calendar-border: var(--seki-border, hsl(240 5.9% 90%));
+  --seki-calendar-accent: var(--seki-accent, hsl(240 4.8% 95.9%));
+  --seki-calendar-accent-foreground: var(--seki-accent-foreground, hsl(240 5.9% 10%));
+  --seki-calendar-primary: var(--seki-primary, hsl(240 5.9% 10%));
+  --seki-calendar-primary-foreground: var(--seki-primary-foreground, hsl(0 0% 98%));
+
+  /* Sizing */
+  --seki-calendar-cell-size: 36px;
+  --seki-calendar-nav-button-size: 28px;
+  --seki-calendar-radius: var(--radius-md, 8px);
+
+  /* Typography */
+  --seki-calendar-font-size: var(--seki-font-size-sm, 14px);
+  --seki-calendar-font-weight: var(--seki-font-weight-medium, 500);
+  --seki-calendar-font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
+
+  display: inline-block;
+}
+
+/* Dark mode support */
+:host-context([data-theme='dark']) {
+  --seki-calendar-bg: var(--seki-background, hsl(240 10% 3.9%));
+  --seki-calendar-text: var(--seki-foreground, hsl(0 0% 98%));
+  --seki-calendar-muted: var(--seki-muted-foreground, hsl(240 5% 64.9%));
+  --seki-calendar-border: var(--seki-border, hsl(240 3.7% 15.9%));
+  --seki-calendar-accent: var(--seki-accent, hsl(240 3.7% 15.9%));
+  --seki-calendar-accent-foreground: var(--seki-accent-foreground, hsl(0 0% 98%));
+  --seki-calendar-primary: var(--seki-primary, hsl(0 0% 98%));
+  --seki-calendar-primary-foreground: var(--seki-primary-foreground, hsl(240 5.9% 10%));
+}
+
+.seki-calendar {
+  padding: 0.75rem;
+  background-color: var(--seki-calendar-bg);
+  border-radius: var(--seki-calendar-radius);
+  font-family: var(--seki-calendar-font-family);
+  font-size: var(--seki-calendar-font-size);
+  color: var(--seki-calendar-text);
+}
+
+/* Header */
+.seki-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 0.5rem;
+}
+
+.seki-calendar__heading {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: var(--seki-calendar-font-weight);
+}
+
+.seki-calendar__month {
+  font-weight: 500;
+}
+
+.seki-calendar__year {
+  color: var(--seki-calendar-muted);
+}
+
+/* Navigation buttons */
+.seki-calendar__nav-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--seki-calendar-nav-button-size);
+  height: var(--seki-calendar-nav-button-size);
+  padding: 0;
+  border: 1px solid var(--seki-calendar-border);
+  border-radius: var(--radius-sm, 4px);
+  background-color: transparent;
+  color: var(--seki-calendar-text);
+  cursor: pointer;
+  transition: background-color 150ms ease, border-color 150ms ease;
+}
+
+.seki-calendar__nav-button:hover:not(:disabled) {
+  background-color: var(--seki-calendar-accent);
+  border-color: var(--seki-calendar-accent);
+}
+
+.seki-calendar__nav-button:focus-visible {
+  outline: 2px solid var(--seki-calendar-primary);
+  outline-offset: 2px;
+}
+
+.seki-calendar__nav-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Table */
+.seki-calendar__table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Weekday headers */
+.seki-calendar__weekdays {
+  border-bottom: none;
+}
+
+.seki-calendar__weekday {
+  width: var(--seki-calendar-cell-size);
+  height: var(--seki-calendar-cell-size);
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: var(--seki-calendar-muted);
+  text-align: center;
+  vertical-align: middle;
+}
+
+/* Week rows */
+.seki-calendar__week {
+  margin-top: 0.25rem;
+}
+
+/* Cells */
+.seki-calendar__cell {
+  padding: 0;
+  text-align: center;
+  vertical-align: middle;
+  position: relative;
+}
+
+/* Day buttons */
+.seki-calendar__day {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--seki-calendar-cell-size);
+  height: var(--seki-calendar-cell-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm, 4px);
+  background-color: transparent;
+  color: var(--seki-calendar-text);
+  font-size: var(--seki-calendar-font-size);
+  font-weight: 400;
+  cursor: pointer;
+  transition: background-color 150ms ease, color 150ms ease;
+}
+
+.seki-calendar__day:hover:not(:disabled):not(.seki-calendar__day--selected) {
+  background-color: var(--seki-calendar-accent);
+  color: var(--seki-calendar-accent-foreground);
+}
+
+.seki-calendar__day:focus-visible {
+  outline: 2px solid var(--seki-calendar-primary);
+  outline-offset: 2px;
+}
+
+/* Today */
+.seki-calendar__day--today {
+  background-color: var(--seki-calendar-accent);
+  color: var(--seki-calendar-accent-foreground);
+}
+
+/* Selected */
+.seki-calendar__day--selected {
+  background-color: var(--seki-calendar-primary);
+  color: var(--seki-calendar-primary-foreground);
+  font-weight: 500;
+}
+
+.seki-calendar__day--selected:hover {
+  background-color: var(--seki-calendar-primary);
+  opacity: 0.9;
+}
+
+/* Outside days */
+.seki-calendar__day--outside {
+  color: var(--seki-calendar-muted);
+  opacity: 0.5;
+}
+
+.seki-calendar__day--hidden {
+  visibility: hidden;
+}
+
+/* Disabled */
+.seki-calendar__day--disabled {
+  color: var(--seki-calendar-muted);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.seki-calendar__day--disabled:hover {
+  background-color: transparent;
+}
+
+/* Range styles */
+.seki-calendar__day--in-range {
+  background-color: var(--seki-calendar-accent);
+  color: var(--seki-calendar-accent-foreground);
+  border-radius: 0;
+}
+
+.seki-calendar__day--range-start {
+  background-color: var(--seki-calendar-primary);
+  color: var(--seki-calendar-primary-foreground);
+  border-radius: var(--radius-sm, 4px) 0 0 var(--radius-sm, 4px);
+}
+
+.seki-calendar__day--range-end {
+  background-color: var(--seki-calendar-primary);
+  color: var(--seki-calendar-primary-foreground);
+  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
+}
+
+.seki-calendar__day--range-start.seki-calendar__day--range-end {
+  border-radius: var(--radius-sm, 4px);
+}
+
+/* Focused (keyboard navigation) */
+.seki-calendar__day--focused {
+  outline: 2px solid var(--seki-calendar-primary);
+  outline-offset: -2px;
+}
+
+/* Accessibility: High contrast mode support */
+@media (prefers-contrast: more) {
+  .seki-calendar__nav-button {
+    border-width: 2px;
+  }
+
+  .seki-calendar__day--selected,
+  .seki-calendar__day--range-start,
+  .seki-calendar__day--range-end {
+    border: 2px solid var(--seki-calendar-primary);
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-calendar__day,
+  .seki-calendar__nav-button {
+    transition: none;
+  }
+}