atomicuilibrary 0.0.1

package/dist/collection/components/splitter/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/stack/stack.css

@@ -0,0 +1,269 @@
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+:host {
+  display: inline-block;
+}
+
+:host(.stack-horizontal) .stack-container {
+  flex-direction: row;
+}
+
+:host(.stack-vertical) .stack-container {
+  flex-direction: column;
+}
+
+.stack-container {
+  display: flex;
+  /* Controlled by host classes */
+  gap: var(--stack-spacing, 8px);
+}
+
+/* Wrapping */
+:host(.stack-wrap-wrap) .stack-container {
+  flex-wrap: wrap;
+}
+
+:host(.stack-wrap-wrap-reverse) .stack-container {
+  flex-wrap: wrap-reverse;
+}
+
+/* Dividers */
+:host(.stack-show-dividers) .stack-container {
+  gap: 0;
+}
+
+:host(.stack-show-dividers) ::slotted(*:not(:last-child)) {
+  position: relative;
+  margin-right: var(--stack-spacing, 8px);
+  display: flex;
+  align-items: center;
+}
+
+:host(.stack-show-dividers) ::slotted(*:not(:last-child))::after {
+  content: "";
+  position: absolute;
+  right: calc(var(--stack-spacing, 8px) / -2);
+  background: var(--bg-primary, #e5e7eb);
+}
+
+:host(.stack-horizontal.stack-show-dividers) ::slotted(*:not(:last-child))::after {
+  width: 1px;
+  height: 60%;
+  top: 20%;
+}
+
+:host(.stack-vertical.stack-show-dividers) ::slotted(*:not(:last-child))::after {
+  height: 1px;
+  width: 60%;
+  left: 20%;
+  bottom: calc(var(--stack-spacing, 8px) / -2);
+}
+
+:host(.divider-dashed) ::slotted(*:not(:last-child))::after {
+  border-right: 1px dashed var(--border-default, #e5e7eb);
+  background: none;
+}
+
+:host(.divider-dotted) ::slotted(*:not(:last-child))::after {
+  border-right: 1px dotted var(--border-default, #e5e7eb);
+  background: none;
+}
+
+/* Overlap handling assuming children are slotted in */
+:host(.stack-overlap) .stack-container {
+  padding-right: 20px;
+}
+
+:host(.stack-overlap) ::slotted(*) {
+  margin-right: var(--stack-overlap, -12px) !important;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), z-index 0s, filter 0.3s ease;
+  position: relative;
+  z-index: 1;
+  border: 2px solid var(--bg-primary, #ffffff);
+  box-sizing: border-box;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+  cursor: pointer;
+}
+
+:host(.stack-overlap) ::slotted(*:hover) {
+  transform: translateY(-8px) scale(1.1) rotate(1deg);
+  z-index: 100 !important;
+  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.2));
+}
+
+:host(.stack-overlap) ::slotted(*:last-child) {
+  margin-right: 0 !important;
+}
+
+/* Roster Modal */
+.stack-roster-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.stack-roster-content {
+  background: var(--bg-primary, #ffffff);
+  width: 90%;
+  max-width: 400px;
+  max-height: 80vh;
+  border-radius: 16px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.roster-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.roster-header h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary, #1e293b);
+}
+
+.close-btn {
+  background: var(--bg-secondary, #f1f5f9);
+  border: none;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--text-muted, #64748b);
+  font-size: 18px;
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  background: var(--bg-primary, #e2e8f0);
+  color: var(--text-primary, #0f172a);
+}
+
+.roster-list {
+  padding: 12px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.roster-item {
+  padding: 10px;
+  border-radius: 10px;
+  background: var(--bg-primary, #f8fafc);
+  border: 1px solid var(--border-subtle, #f1f5f9);
+  display: flex;
+  align-items: center;
+  transition: background 0.2s;
+}
+
+.roster-item:hover {
+  background: var(--bg-secondary, #f1f5f9);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.stack-overflow-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--bg-secondary, #f3f4f6);
+  border: 2px solid var(--bg-primary, #ffffff);
+  color: var(--text-secondary, #4b5563);
+  font-size: 12px;
+  font-weight: 600;
+  z-index: 10;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.stack-overflow-indicator:hover {
+  transform: scale(1.1);
+  background: var(--bg-primary, #e5e7eb);
+}
+
+@media (prefers-color-scheme: dark) {
+  .stack-roster-content {
+    background: var(--bg-primary, #1e293b);
+  }
+  .roster-header h4 {
+    color: var(--text-standard, #ffffff);
+  }
+  .roster-item {
+    background: var(--color-primary, #334155);
+    border-color: var(--color-primary, #475569);
+  }
+  .roster-item:hover {
+    background: var(--color-primary, #475569);
+  }
+  .stack-overflow-indicator {
+    background: var(--color-primary, #374151);
+    border-color: var(--border-strong, #1f2937);
+    color: var(--text-standard, #f3f4f6);
+  }
+  .stack-overflow-indicator:hover {
+    background: var(--color-primary, #4b5563);
+  }
+}

package/dist/collection/components/stack/stack.js

@@ -0,0 +1,297 @@
+import { h, Host } from "@stencil/core";
+import { sanitizeHTML } from "../../utils/security";
+export class Stack {
+    el;
+    /** Stacking direction */
+    direction = 'horizontal';
+    /** Flex wrap behavior */
+    wrap = 'nowrap';
+    /** Spacing between items (negative for overlap) */
+    spacing = '8px';
+    /** Align items */
+    align = 'center';
+    /** Justify content */
+    justify = 'start';
+    /** Maximum items to show before '+N' */
+    max = 0;
+    /** Whether to overlap items */
+    overlap = false;
+    /** Whether to show dividers between items */
+    showDividers = false;
+    /** Type of divider to show */
+    dividerType = 'solid';
+    childrenCount = 0;
+    isRosterOpen = false;
+    mutationObserver;
+    componentWillLoad() {
+        this.updateChildrenCount();
+    }
+    componentDidLoad() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.updateChildrenCount();
+        });
+        this.mutationObserver.observe(this.el, { childList: true });
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    toggleRoster = () => {
+        this.isRosterOpen = !this.isRosterOpen;
+    };
+    closeRoster = () => {
+        this.isRosterOpen = false;
+    };
+    updateChildrenVisibility(actualMax) {
+        Array.from(this.el.children).forEach((child, index) => {
+            if (index < actualMax) {
+                child.style.display = '';
+            }
+            else {
+                child.style.display = 'none';
+            }
+        });
+    }
+    updateChildrenCount() {
+        this.childrenCount = this.el.children.length;
+    }
+    renderRoster(allChildren, total) {
+        return (h("div", { class: "stack-roster-backdrop", onClick: this.closeRoster }, h("div", { class: "stack-roster-content", onClick: e => e.stopPropagation() }, h("div", { class: "roster-header" }, h("div", { class: "roster-titles" }, h("h4", { class: "roster-main-title" }, "Hidden Items"), h("span", { class: "roster-sub-title" }, total, " items total")), h("ui-button", { variant: "ghost", onClick: this.closeRoster, ariaLabel: "Close roster", icon: "times", iconLibrary: "fontawesome", iconOnly: true, size: "sm" })), h("div", { class: "roster-list" }, allChildren.map((child, idx) => (h("div", { key: idx, class: "roster-item" }, h("div", { class: "roster-item-preview", innerHTML: sanitizeHTML(child.outerHTML) }), h("span", { class: "roster-item-label" }, "Item ", idx + 1))))))));
+    }
+    render() {
+        const isOverlapping = this.overlap || (this.spacing.startsWith('-'));
+        const actualMax = this.max > 0 ? this.max : this.childrenCount;
+        const overflowCount = this.childrenCount - actualMax;
+        const allChildren = Array.from(this.el.children);
+        // Update visibility after render to avoid layout thrashing
+        requestAnimationFrame(() => this.updateChildrenVisibility(actualMax));
+        return (h(Host, { key: 'b4bb6771a1c77451d4942923c5d073e8a244364b', class: {
+                'ui-stack': true,
+                [`stack-${this.direction}`]: true,
+                [`stack-wrap-${this.wrap}`]: true,
+                'stack-overlap': isOverlapping,
+                'stack-show-dividers': this.showDividers && !isOverlapping,
+                [`divider-${this.dividerType}`]: this.showDividers
+            }, style: {
+                '--stack-spacing': isOverlapping ? '0' : this.spacing,
+                '--stack-overlap': isOverlapping ? (this.spacing.startsWith('-') ? this.spacing : '-12px') : '0',
+                'align-items': this.align,
+                'justify-content': this.justify,
+                'flex-wrap': this.wrap
+            } }, h("div", { key: '9da8fff23f86aa701e9924f551318b29f9af4cfb', class: "stack-container" }, h("slot", { key: '6525df2ac3797654bea059326ead5fe8a89e55ae' }), overflowCount > 0 && (h("div", { key: 'aa65e3619fad1f13b85b19c70b157ac96f559216', class: "stack-overflow-indicator", onClick: (e) => { e.stopPropagation(); this.toggleRoster(); }, onKeyDown: (e) => {
+                if (e.key === 'Enter')
+                    this.toggleRoster();
+            }, tabindex: "0", role: "button", title: `View ${overflowCount} more items` }, "+", overflowCount))), this.isRosterOpen && this.renderRoster(allChildren, this.childrenCount)));
+    }
+    static get is() { return "ui-stack"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["stack.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["stack.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stacking direction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "wrap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'nowrap' | 'wrap' | 'wrap-reverse'",
+                    "resolved": "\"nowrap\" | \"wrap\" | \"wrap-reverse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flex wrap behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wrap",
+                "defaultValue": "'nowrap'"
+            },
+            "spacing": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing between items (negative for overlap)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "spacing",
+                "defaultValue": "'8px'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'stretch'",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Align items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'center'"
+            },
+            "justify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'space-between'",
+                    "resolved": "\"center\" | \"end\" | \"space-between\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Justify content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "justify",
+                "defaultValue": "'start'"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum items to show before '+N'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "0"
+            },
+            "overlap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to overlap items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overlap",
+                "defaultValue": "false"
+            },
+            "showDividers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show dividers between items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-dividers",
+                "defaultValue": "false"
+            },
+            "dividerType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'dashed' | 'dotted' | 'none'",
+                    "resolved": "\"dashed\" | \"dotted\" | \"none\" | \"solid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of divider to show"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider-type",
+                "defaultValue": "'solid'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "childrenCount": {},
+            "isRosterOpen": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/stack/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/step/step.css

@@ -0,0 +1,77 @@
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+/* Empty step styles */
+.stepper {
+  display: flex;
+  position: relative;
+  --connector-color: var(--step-color, #4b6bfb);
+}
+
+/* Connector styles */
+.stepper[data-style=solid]::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--connector-color);
+}
+
+.stepper[data-style=dotted]::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: repeating-linear-gradient(to right, var(--connector-color) 0 4px, transparent 4px 8px);
+}
+
+.stepper[data-style=dashed]::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: repeating-linear-gradient(to right, var(--connector-color) 0 10px, transparent 10px 20px);
+}
+
+.stepper[data-style=segmented]::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(to right, var(--connector-color) 0 20%, transparent 20% 25%, var(--connector-color) 25% 45%, transparent 45% 50%, var(--connector-color) 50% 70%, transparent 70% 75%, var(--connector-color) 75% 100%);
+}
+
+/* Reduced motion */
+.stepper[data-reduced=true] * {
+  animation: none !important;
+  transition: none !important;
+}