@sabrenski/spire-ui-vue 0.1.1 → 0.2.1

package/dist/theme/anchor-positioning.css

@@ -0,0 +1,423 @@
+/**
+ * Global Intelligent Position Fallbacks for CSS Anchor Positioning
+ *
+ * Usage: Add data-placement="bottom-start" (or any placement) to any anchor-positioned element
+ *
+ * Applies to: Dropdown, Popover, Tooltip, Combobox, Select, and any future anchor-positioned components
+ *
+ * Each placement has a priority-ordered fallback sequence:
+ * 1. Flip on primary axis (maintain alignment)
+ * 2. Try adjacent placements (maintain axis when possible)
+ * 3. Flip to perpendicular axis (last resort)
+ */
+
+/* Reset default popover positioning */
+[popover] {
+    position: absolute;
+    inset: unset;
+    margin: 0;
+    overflow: visible;
+}
+
+/* Match trigger width - use on dropdown menus that should match their trigger's width */
+[data-spire-same-width] {
+    min-width: anchor-size(width);
+}
+
+/* Fixed strategy for anchors in fixed containers */
+[popover][data-spire-strategy="fixed"] {
+    position: fixed;
+}
+
+/* Bottom placements */
+@position-try --fallback-bottom-start-1 {
+    inset: auto;
+    margin-bottom: 8px;
+    bottom: anchor(top);
+    left: anchor(left);
+}
+
+@position-try --fallback-bottom-start-2 {
+    inset: auto;
+    margin-left: 4px;
+    left: anchor(right);
+    top: anchor(top);
+}
+
+@position-try --fallback-bottom-start-3 {
+    inset: auto;
+    margin-right: 4px;
+    right: anchor(left);
+    top: anchor(top);
+}
+
+@position-try --fallback-bottom-end-1 {
+    inset: auto;
+    margin-bottom: 8px;
+    bottom: anchor(top);
+    right: anchor(right);
+}
+
+@position-try --fallback-bottom-end-2 {
+    inset: auto;
+    margin-right: 4px;
+    right: anchor(left);
+    top: anchor(top);
+}
+
+@position-try --fallback-bottom-end-3 {
+    inset: auto;
+    margin-left: 4px;
+    left: anchor(right);
+    top: anchor(top);
+}
+
+@position-try --fallback-bottom-1 {
+    inset: auto;
+    margin-bottom: 8px;
+    bottom: anchor(top);
+    left: anchor(left);
+}
+
+@position-try --fallback-bottom-2 {
+    inset: auto;
+    margin-left: 4px;
+    left: anchor(right);
+    top: anchor(top);
+}
+
+@position-try --fallback-bottom-3 {
+    inset: auto;
+    margin-right: 4px;
+    right: anchor(left);
+    top: anchor(top);
+}
+
+/* Top placements */
+@position-try --fallback-top-start-1 {
+    inset: auto;
+    margin-top: 8px;
+    top: anchor(bottom);
+    left: anchor(left);
+}
+
+@position-try --fallback-top-start-2 {
+    inset: auto;
+    margin-left: 4px;
+    left: anchor(right);
+    top: anchor(top);
+}
+
+@position-try --fallback-top-start-3 {
+    inset: auto;
+    margin-right: 4px;
+    right: anchor(left);
+    top: anchor(top);
+}
+
+@position-try --fallback-top-end-1 {
+    inset: auto;
+    margin-top: 8px;
+    top: anchor(bottom);
+    right: anchor(right);
+}
+
+@position-try --fallback-top-end-2 {
+    inset: auto;
+    margin-right: 4px;
+    right: anchor(left);
+    top: anchor(top);
+}
+
+@position-try --fallback-top-end-3 {
+    inset: auto;
+    margin-left: 4px;
+    left: anchor(right);
+    top: anchor(top);
+}
+
+@position-try --fallback-top-1 {
+    inset: auto;
+    margin-top: 8px;
+    top: anchor(bottom);
+    left: anchor(left);
+}
+
+@position-try --fallback-top-2 {
+    inset: auto;
+    margin-left: 4px;
+    left: anchor(right);
+    top: anchor(top);
+}
+
+@position-try --fallback-top-3 {
+    inset: auto;
+    margin-right: 4px;
+    right: anchor(left);
+    top: anchor(top);
+}
+
+/* Right placements */
+@position-try --fallback-right-start-1 {
+    inset: auto;
+    margin-right: 4px;
+    right: anchor(left);
+    top: anchor(top);
+}
+
+@position-try --fallback-right-start-2 {
+    inset: auto;
+    margin-top: 8px;
+    top: anchor(bottom);
+    left: anchor(left);
+}
+
+@position-try --fallback-right-start-3 {
+    inset: auto;
+    margin-bottom: 8px;
+    bottom: anchor(top);
+    left: anchor(left);
+}
+
+@position-try --fallback-right-end-1 {
+    inset: auto;
+    margin-right: 4px;
+    right: anchor(left);
+    bottom: anchor(bottom);
+}
+
+@position-try --fallback-right-end-2 {
+    inset: auto;
+    margin-bottom: 8px;
+    bottom: anchor(top);
+    left: anchor(left);
+}
+
+@position-try --fallback-right-end-3 {
+    inset: auto;
+    margin-top: 8px;
+    top: anchor(bottom);
+    left: anchor(left);
+}
+
+@position-try --fallback-right-1 {
+    inset: auto;
+    margin-right: 4px;
+    right: anchor(left);
+    top: anchor(top);
+}
+
+@position-try --fallback-right-2 {
+    inset: auto;
+    margin-top: 8px;
+    top: anchor(bottom);
+    left: anchor(left);
+}
+
+@position-try --fallback-right-3 {
+    inset: auto;
+    margin-bottom: 8px;
+    bottom: anchor(top);
+    left: anchor(left);
+}
+
+/* Left placements */
+@position-try --fallback-left-start-1 {
+    inset: auto;
+    margin-left: 4px;
+    left: anchor(right);
+    top: anchor(top);
+}
+
+@position-try --fallback-left-start-2 {
+    inset: auto;
+    margin-top: 8px;
+    top: anchor(bottom);
+    right: anchor(right);
+}
+
+@position-try --fallback-left-start-3 {
+    inset: auto;
+    margin-bottom: 8px;
+    bottom: anchor(top);
+    right: anchor(right);
+}
+
+@position-try --fallback-left-end-1 {
+    inset: auto;
+    margin-left: 4px;
+    left: anchor(right);
+    bottom: anchor(bottom);
+}
+
+@position-try --fallback-left-end-2 {
+    inset: auto;
+    margin-bottom: 8px;
+    bottom: anchor(top);
+    right: anchor(right);
+}
+
+@position-try --fallback-left-end-3 {
+    inset: auto;
+    margin-top: 8px;
+    top: anchor(bottom);
+    right: anchor(right);
+}
+
+@position-try --fallback-left-1 {
+    inset: auto;
+    margin-left: 4px;
+    left: anchor(right);
+    top: anchor(top);
+}
+
+@position-try --fallback-left-2 {
+    inset: auto;
+    margin-top: 8px;
+    top: anchor(bottom);
+    right: anchor(right);
+}
+
+@position-try --fallback-left-3 {
+    inset: auto;
+    margin-bottom: 8px;
+    bottom: anchor(top);
+    right: anchor(right);
+}
+
+/* Apply fallbacks to elements with data-spire-placement */
+[data-spire-placement="bottom-start"] {
+    inset: auto;
+    margin-top: 8px;
+    top: anchor(bottom);
+    left: anchor(left);
+    position-try-fallbacks:
+        --fallback-bottom-start-1,
+        --fallback-bottom-start-2,
+        --fallback-bottom-start-3;
+}
+
+[data-spire-placement="bottom-end"] {
+    inset: auto;
+    margin-top: 8px;
+    top: anchor(bottom);
+    right: anchor(right);
+    position-try-fallbacks:
+        --fallback-bottom-end-1,
+        --fallback-bottom-end-2,
+        --fallback-bottom-end-3;
+}
+
+[data-spire-placement="bottom"] {
+    inset: auto;
+    margin-top: 8px;
+    top: anchor(bottom);
+    left: calc(anchor(left) + (anchor-size(width) / 2));
+    translate: -50% 0;
+    position-try-fallbacks:
+        --fallback-bottom-1,
+        --fallback-bottom-2,
+        --fallback-bottom-3;
+}
+
+[data-spire-placement="top-start"] {
+    inset: auto;
+    margin-bottom: 8px;
+    bottom: anchor(top);
+    left: anchor(left);
+    position-try-fallbacks:
+        --fallback-top-start-1,
+        --fallback-top-start-2,
+        --fallback-top-start-3;
+}
+
+[data-spire-placement="top-end"] {
+    inset: auto;
+    margin-bottom: 8px;
+    bottom: anchor(top);
+    right: anchor(right);
+    position-try-fallbacks:
+        --fallback-top-end-1,
+        --fallback-top-end-2,
+        --fallback-top-end-3;
+}
+
+[data-spire-placement="top"] {
+    inset: auto;
+    margin-bottom: 8px;
+    bottom: anchor(top);
+    left: calc(anchor(left) + (anchor-size(width) / 2));
+    translate: -50% 0;
+    position-try-fallbacks:
+        --fallback-top-1,
+        --fallback-top-2,
+        --fallback-top-3;
+}
+
+[data-spire-placement="right-start"] {
+    inset: auto;
+    margin-left: 4px;
+    left: anchor(right);
+    top: anchor(top);
+    position-try-fallbacks:
+        --fallback-right-start-1,
+        --fallback-right-start-2,
+        --fallback-right-start-3;
+}
+
+[data-spire-placement="right-end"] {
+    inset: auto;
+    margin-left: 4px;
+    left: anchor(right);
+    bottom: anchor(bottom);
+    position-try-fallbacks:
+        --fallback-right-end-1,
+        --fallback-right-end-2,
+        --fallback-right-end-3;
+}
+
+[data-spire-placement="right"] {
+    inset: auto;
+    margin-left: 4px;
+    left: anchor(right);
+    top: calc(anchor(top) + (anchor-size(height) / 2));
+    translate: 0 -50%;
+    position-try-fallbacks:
+        --fallback-right-1,
+        --fallback-right-2,
+        --fallback-right-3;
+}
+
+[data-spire-placement="left-start"] {
+    inset: auto;
+    margin-right: 4px;
+    right: anchor(left);
+    top: anchor(top);
+    position-try-fallbacks:
+        --fallback-left-start-1,
+        --fallback-left-start-2,
+        --fallback-left-start-3;
+}
+
+[data-spire-placement="left-end"] {
+    inset: auto;
+    margin-right: 4px;
+    right: anchor(left);
+    bottom: anchor(bottom);
+    position-try-fallbacks:
+        --fallback-left-end-1,
+        --fallback-left-end-2,
+        --fallback-left-end-3;
+}
+
+[data-spire-placement="left"] {
+    inset: auto;
+    margin-right: 4px;
+    right: anchor(left);
+    top: calc(anchor(top) + (anchor-size(height) / 2));
+    translate: 0 -50%;
+    position-try-fallbacks:
+        --fallback-left-1,
+        --fallback-left-2,
+        --fallback-left-3;
+}

package/dist/theme/base.css

@@ -0,0 +1,93 @@
+:root {
+    --color-primary-base: oklch(55% 0.1632 318.71);
+    --color-secondary-base: oklch(55% 0.18 285);
+    --color-success-base: oklch(55% 0.19 145);
+    --color-danger-base: oklch(55% 0.22 27);
+    --color-warning-base: oklch(70% 0.17 70);
+    --color-neutral-base: oklch(50% 0.02 60);
+}
+
+
+@theme {
+    --color-primary-50: oklch(from var(--color-primary-base) 97% calc(c * 0.1) h);
+    --color-primary-100: oklch(from var(--color-primary-base) 94% calc(c * 0.15) h);
+    --color-primary-200: oklch(from var(--color-primary-base) 86% calc(c * 0.25) h);
+    --color-primary-300: oklch(from var(--color-primary-base) 76% calc(c * 0.4) h);
+    --color-primary-400: oklch(from var(--color-primary-base) 65% calc(c * 0.7) h);
+    --color-primary-500: oklch(from var(--color-primary-base) l c h);
+    --color-primary-600: oklch(from var(--color-primary-base) 47% calc(c * 0.95) h);
+    --color-primary-700: oklch(from var(--color-primary-base) 39% calc(c * 0.85) h);
+    --color-primary-800: oklch(from var(--color-primary-base) 31% calc(c * 0.7) h);
+    --color-primary-900: oklch(from var(--color-primary-base) 23% calc(c * 0.55) h);
+    --color-primary-950: oklch(from var(--color-primary-base) 14% calc(c * 0.4) h);
+
+    --color-secondary-50: oklch(from var(--color-secondary-base) 97% calc(c * 0.1) h);
+    --color-secondary-100: oklch(from var(--color-secondary-base) 94% calc(c * 0.15) h);
+    --color-secondary-200: oklch(from var(--color-secondary-base) 86% calc(c * 0.25) h);
+    --color-secondary-300: oklch(from var(--color-secondary-base) 76% calc(c * 0.4) h);
+    --color-secondary-400: oklch(from var(--color-secondary-base) 65% calc(c * 0.7) h);
+    --color-secondary-500: oklch(from var(--color-secondary-base) l c h);
+    --color-secondary-600: oklch(from var(--color-secondary-base) 47% calc(c * 0.95) h);
+    --color-secondary-700: oklch(from var(--color-secondary-base) 39% calc(c * 0.85) h);
+    --color-secondary-800: oklch(from var(--color-secondary-base) 31% calc(c * 0.7) h);
+    --color-secondary-900: oklch(from var(--color-secondary-base) 23% calc(c * 0.55) h);
+    --color-secondary-950: oklch(from var(--color-secondary-base) 14% calc(c * 0.4) h);
+
+    --color-success-50: oklch(from var(--color-success-base) 97% calc(c * 0.1) h);
+    --color-success-100: oklch(from var(--color-success-base) 94% calc(c * 0.15) h);
+    --color-success-200: oklch(from var(--color-success-base) 86% calc(c * 0.25) h);
+    --color-success-300: oklch(from var(--color-success-base) 76% calc(c * 0.4) h);
+    --color-success-400: oklch(from var(--color-success-base) 65% calc(c * 0.7) h);
+    --color-success-500: oklch(from var(--color-success-base) l c h);
+    --color-success-600: oklch(from var(--color-success-base) 47% calc(c * 0.95) h);
+    --color-success-700: oklch(from var(--color-success-base) 39% calc(c * 0.85) h);
+    --color-success-800: oklch(from var(--color-success-base) 31% calc(c * 0.7) h);
+    --color-success-900: oklch(from var(--color-success-base) 23% calc(c * 0.55) h);
+    --color-success-950: oklch(from var(--color-success-base) 14% calc(c * 0.4) h);
+
+    --color-danger-50: oklch(from var(--color-danger-base) 97% calc(c * 0.1) h);
+    --color-danger-100: oklch(from var(--color-danger-base) 94% calc(c * 0.15) h);
+    --color-danger-200: oklch(from var(--color-danger-base) 86% calc(c * 0.25) h);
+    --color-danger-300: oklch(from var(--color-danger-base) 76% calc(c * 0.4) h);
+    --color-danger-400: oklch(from var(--color-danger-base) 65% calc(c * 0.7) h);
+    --color-danger-500: oklch(from var(--color-danger-base) l c h);
+    --color-danger-600: oklch(from var(--color-danger-base) 47% calc(c * 0.95) h);
+    --color-danger-700: oklch(from var(--color-danger-base) 39% calc(c * 0.85) h);
+    --color-danger-800: oklch(from var(--color-danger-base) 31% calc(c * 0.7) h);
+    --color-danger-900: oklch(from var(--color-danger-base) 23% calc(c * 0.55) h);
+    --color-danger-950: oklch(from var(--color-danger-base) 14% calc(c * 0.4) h);
+
+    --color-warning-50: oklch(from var(--color-warning-base) 97% calc(c * 0.1) h);
+    --color-warning-100: oklch(from var(--color-warning-base) 94% calc(c * 0.15) h);
+    --color-warning-200: oklch(from var(--color-warning-base) 86% calc(c * 0.25) h);
+    --color-warning-300: oklch(from var(--color-warning-base) 76% calc(c * 0.4) h);
+    --color-warning-400: oklch(from var(--color-warning-base) 65% calc(c * 0.7) h);
+    --color-warning-500: oklch(from var(--color-warning-base) l c h);
+    --color-warning-600: oklch(from var(--color-warning-base) 47% calc(c * 0.95) h);
+    --color-warning-700: oklch(from var(--color-warning-base) 39% calc(c * 0.85) h);
+    --color-warning-800: oklch(from var(--color-warning-base) 31% calc(c * 0.7) h);
+    --color-warning-900: oklch(from var(--color-warning-base) 23% calc(c * 0.55) h);
+    --color-warning-950: oklch(from var(--color-warning-base) 14% calc(c * 0.4) h);
+
+    --color-neutral-50: oklch(from var(--color-neutral-base) 97% calc(c * 0.1) h);
+    --color-neutral-100: oklch(from var(--color-neutral-base) 94% calc(c * 0.15) h);
+    --color-neutral-200: oklch(from var(--color-neutral-base) 86% calc(c * 0.25) h);
+    --color-neutral-300: oklch(from var(--color-neutral-base) 76% calc(c * 0.4) h);
+    --color-neutral-400: oklch(from var(--color-neutral-base) 65% calc(c * 0.7) h);
+    --color-neutral-500: oklch(from var(--color-neutral-base) l c h);
+    --color-neutral-600: oklch(from var(--color-neutral-base) 47% calc(c * 0.95) h);
+    --color-neutral-700: oklch(from var(--color-neutral-base) 39% calc(c * 0.85) h);
+    --color-neutral-800: oklch(from var(--color-neutral-base) 31% calc(c * 0.7) h);
+    --color-neutral-900: oklch(from var(--color-neutral-base) 23% calc(c * 0.55) h);
+    --color-neutral-950: oklch(from var(--color-neutral-base) 14% calc(c * 0.4) h);
+
+    --radius-base: 0.5rem;
+
+    --radius-sm: calc(var(--radius-base) - 4px);
+    --radius-md: calc(var(--radius-base) - 2px);
+    --radius-lg: var(--radius-base);
+    --radius-xl: calc(var(--radius-base) + 4px);
+
+    --inset-shadow-btn: inset 0.5px 2px 0 0 rgb(255 255 255 / 0.15);
+    --inset-shadow-btn-active: inset 2px 3px 0 0 rgb(0 0 0 / 0.15);
+}

package/dist/theme/components.css

@@ -0,0 +1,138 @@
+@theme {
+    --color-card: var(--color-elevated);
+    --radius-card: var(--radius-lg);
+
+    --color-dialog: var(--color-elevated);
+    --color-dialog-overlay: var(--color-overlay);
+    --radius-dialog: var(--radius-lg);
+
+    --color-tooltip: var(--color-neutral-900);
+    --color-tooltip-foreground: var(--color-on-emphasis);
+    --radius-tooltip: var(--radius-sm);
+
+    --radius-badge: var(--radius-sm);
+
+    --radius-button: var(--radius-lg);
+
+    --color-avatar: var(--color-muted);
+
+    --color-picker-handle: white;
+    --color-picker-handle-border: white;
+}
+
+.dark {
+    --color-tooltip: var(--color-neutral-100);
+    --color-tooltip-foreground: var(--color-neutral-900);
+}
+
+[popover] {
+    opacity: 0;
+    transform: scale(0.95);
+    transition:
+        opacity 150ms ease-out,
+        transform 150ms ease-out,
+        overlay 150ms allow-discrete,
+        display 150ms allow-discrete;
+}
+
+[popover]:popover-open {
+    opacity: 1;
+    transform: scale(1);
+}
+
+@starting-style {
+    [popover]:popover-open {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+}
+
+@utility scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
+
+    &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: var(--color-border);
+        border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background: var(--color-border-hover);
+    }
+}
+
+@utility appearance-textfield {
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
+
+@utility empty-state-responsive {
+    & [data-spire-empty-state-title] {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+    }
+
+    & [data-spire-empty-state-description] {
+        font-size: 0.75rem;
+        line-height: 1rem;
+    }
+
+    @container (min-width: 300px) {
+        & [data-spire-empty-state-title] {
+            font-size: 1rem;
+            line-height: 1.5rem;
+        }
+
+        & [data-spire-empty-state-description] {
+            font-size: 0.875rem;
+            line-height: 1.25rem;
+        }
+    }
+
+    @container (min-width: 500px) {
+        & [data-spire-empty-state-title] {
+            font-size: 1.125rem;
+            line-height: 1.75rem;
+        }
+
+        & [data-spire-empty-state-description] {
+            font-size: 0.875rem;
+            line-height: 1.25rem;
+        }
+    }
+}
+
+@utility line-through-animated {
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        width: 100%;
+        height: 1px;
+        background-color: currentColor;
+        transform: scaleX(0);
+        transform-origin: left;
+        transition: transform 300ms var(--ease-smooth);
+    }
+
+    &[data-checked="true"]::after {
+        transform: scaleX(1);
+    }
+}