@shift-css/core 0.6.0 → 0.7.0

package/README.md

@@ -3,6 +3,7 @@
 A zero-runtime, OKLCH-native CSS framework with automatic theming.
 
 [![npm version](https://img.shields.io/npm/v/@shift-css/core)](https://www.npmjs.com/package/@shift-css/core)
+[![gzip size](https://img.shields.io/badge/gzip-~12KB-blue)](https://www.npmjs.com/package/@shift-css/core)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 
 ## Installation
@@ -78,9 +79,9 @@ Import only what you need:
 
 | File            | Size   |
 | --------------- | ------ |
-| `shift.css`     | ~55 KB |
-| `shift.min.css` | ~41 KB |
-| Gzipped         | ~10 KB |
+| `shift.css`     | ~83 KB |
+| `shift.min.css` | ~64 KB |
+| Gzipped         | ~12 KB |
 
 ## Browser Support
 

package/dist/components/button.css

@@ -24,7 +24,9 @@
     color: contrast-color(var(--_btn-bg));
   }
 
-  transition: background-color var(--s-duration-150) var(--s-ease-out), border-color var(--s-duration-150) var(--s-ease-out), transform var(--s-duration-100) var(--s-ease-out);
+  transition: background-color var(--s-duration-150) var(--s-ease-out),
+    border-color var(--s-duration-150) var(--s-ease-out),
+    transform var(--s-duration-100) var(--s-ease-out);
   cursor: pointer;
   user-select: none;
 
@@ -144,7 +146,7 @@
 }
 
 [s-btn][s-loading] {
-  color: var(--_btn-bg);
+  color: #0000;
   pointer-events: none;
   position: relative;
 

package/dist/components/card.css

@@ -57,6 +57,12 @@
   color: var(--s-text-secondary);
 }
 
+[s-card-actions] {
+  gap: var(--s-space-2);
+  margin-top: var(--s-space-4);
+  display: flex;
+}
+
 [s-card="flat"] {
   --_card-shadow: none;
   --_card-border: var(--s-border-default);
@@ -80,7 +86,9 @@
 
 [s-card][s-interactive] {
   cursor: pointer;
-  transition: transform var(--s-duration-200) var(--s-ease-out), box-shadow var(--s-duration-200) var(--s-ease-out), border-color var(--s-duration-200) var(--s-ease-out);
+  transition: transform var(--s-duration-200) var(--s-ease-out),
+    box-shadow var(--s-duration-200) var(--s-ease-out),
+    border-color var(--s-duration-200) var(--s-ease-out);
 
   &:hover {
     --_card-shadow: var(--s-shadow-xl);
@@ -183,3 +191,29 @@
     }
   }
 }
+
+@supports selector(:scope) {
+  @scope ([s-card]) to ([s-card]) {
+    [s-card-header] {
+      border-bottom: 1px solid var(--_card-border, var(--s-border-muted));
+    }
+
+    [s-card-footer] {
+      border-top: 1px solid var(--_card-border, var(--s-border-muted));
+    }
+
+    [s-card-title] {
+      color: inherit;
+    }
+
+    [s-card-subtitle] {
+      color: var(--s-text-secondary);
+    }
+
+    [s-card-actions] {
+      gap: var(--s-space-2);
+      margin-top: var(--s-space-4);
+      display: flex;
+    }
+  }
+}

package/dist/components/input.css

@@ -13,7 +13,8 @@
   color: var(--_input-text);
   font-size: var(--s-text-sm);
   line-height: var(--s-leading-normal);
-  transition: border-color var(--s-duration-150) var(--s-ease-out), box-shadow var(--s-duration-150) var(--s-ease-out);
+  transition: border-color var(--s-duration-150) var(--s-ease-out),
+    box-shadow var(--s-duration-150) var(--s-ease-out);
   display: block;
 
   &::placeholder {
@@ -64,6 +65,16 @@ textarea[s-input] {
   min-height: 6rem;
 }
 
+textarea[s-input][s-autosize] {
+  resize: none;
+
+  @supports (field-sizing: content) {
+    field-sizing: content;
+    min-height: 3lh;
+    max-height: 20lh;
+  }
+}
+
 select[s-input] {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -145,7 +156,8 @@ select[s-input] {
     cursor: pointer;
     width: 1.25rem;
     height: 1.25rem;
-    transition: background-color var(--s-duration-150) var(--s-ease-out), border-color var(--s-duration-150) var(--s-ease-out);
+    transition: background-color var(--s-duration-150) var(--s-ease-out),
+      border-color var(--s-duration-150) var(--s-ease-out);
 
     &:checked {
       background-color: var(--s-interactive-primary);

package/dist/components/menu.css

@@ -45,7 +45,9 @@
   color: var(--s-text-primary);
   opacity: 0;
   visibility: hidden;
-  transition: opacity var(--s-duration-150) var(--s-ease-out), transform var(--s-duration-150) var(--s-ease-out), visibility var(--s-duration-150);
+  transition: opacity var(--s-duration-150) var(--s-ease-out),
+    transform var(--s-duration-150) var(--s-ease-out),
+    visibility var(--s-duration-150);
   flex-direction: column;
   display: flex;
   position: absolute;

package/dist/components/modal.css

@@ -28,29 +28,50 @@ dialog[s-modal]:not([open]) {
 }
 
 dialog[s-modal][open] {
-  animation: s-modal-scale-in var(--s-duration-200) var(--s-ease-out);
+  opacity: 1;
+  transition: opacity var(--s-duration-200) var(--s-ease-out),
+    transform var(--s-duration-200) var(--s-ease-out),
+    overlay var(--s-duration-200) var(--s-ease-out) allow-discrete,
+    display var(--s-duration-200) var(--s-ease-out) allow-discrete;
+  transform: scale(1)translateY(0);
 }
 
-dialog[s-modal]:focus-visible {
-  outline: 2px solid var(--s-focus-ring);
-  outline-offset: 2px;
-}
-
-@keyframes s-modal-scale-in {
-  from {
+@starting-style {
+  dialog[s-modal][open] {
     opacity: 0;
     transform: scale(.95)translateY(-10px);
   }
+}
 
-  to {
-    opacity: 1;
-    transform: scale(1)translateY(0);
+@supports not (transition-behavior: allow-discrete) {
+  dialog[s-modal][open] {
+    animation: s-modal-scale-in var(--s-duration-200) var(--s-ease-out);
   }
+
+  @keyframes s-modal-scale-in {
+    from {
+      opacity: 0;
+      transform: scale(.95)translateY(-10px);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1)translateY(0);
+    }
+  }
+}
+
+dialog[s-modal]:focus-visible {
+  outline: 2px solid var(--s-focus-ring);
+  outline-offset: 2px;
 }
 
 dialog[s-modal]::backdrop {
   backdrop-filter: blur(4px);
-  animation: s-modal-backdrop-in var(--s-duration-200) var(--s-ease-out);
+  opacity: 1;
+  transition: opacity var(--s-duration-200) var(--s-ease-out),
+    overlay var(--s-duration-200) var(--s-ease-out) allow-discrete,
+    display var(--s-duration-200) var(--s-ease-out) allow-discrete;
   background: oklch(0% 0 0 / .5);
 
   @supports (color: oklch(from red l c h)) {
@@ -58,13 +79,25 @@ dialog[s-modal]::backdrop {
   }
 }
 
-@keyframes s-modal-backdrop-in {
-  from {
+@starting-style {
+  dialog[s-modal]::backdrop {
     opacity: 0;
   }
+}
+
+@supports not (transition-behavior: allow-discrete) {
+  dialog[s-modal]::backdrop {
+    animation: s-modal-backdrop-in var(--s-duration-200) var(--s-ease-out);
+  }
+
+  @keyframes s-modal-backdrop-in {
+    from {
+      opacity: 0;
+    }
 
-  to {
-    opacity: 1;
+    to {
+      opacity: 1;
+    }
   }
 }
 
@@ -160,7 +193,8 @@ dialog[s-modal][s-position="right"] {
   min-height: 2.75rem;
   font-size: var(--s-text-xl);
   color: var(--s-text-secondary);
-  transition: background-color var(--s-duration-150) var(--s-ease-out), color var(--s-duration-150) var(--s-ease-out);
+  transition: background-color var(--s-duration-150) var(--s-ease-out),
+    color var(--s-duration-150) var(--s-ease-out);
   background: none;
   border: none;
   justify-content: center;
@@ -184,6 +218,17 @@ dialog[s-modal][s-position="right"] {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  dialog[s-modal][open] {
+    transition: none;
+    transform: none;
+  }
+
+  dialog[s-modal]::backdrop {
+    transition: none;
+  }
+}
+
 @media (forced-colors: active) {
   dialog[s-modal] {
     border: 2px solid canvastext;

package/dist/components/select.css

@@ -0,0 +1,169 @@
+@supports (appearance: base-select) {
+  [s-select], [s-select]::picker(select) {
+    appearance: base-select;
+  }
+
+  :where([s-select]) {
+    --_select-bg: var(--s-surface-base);
+    --_select-border: var(--s-border-default);
+    --_select-text: var(--s-text-primary);
+    --_select-radius: var(--s-radius-md);
+    align-items: center;
+    gap: var(--s-space-2);
+    min-width: 10rem;
+    padding: var(--s-space-2) var(--s-space-3);
+    background-color: var(--_select-bg);
+    border: 2px solid var(--_select-border);
+    border-radius: var(--_select-radius);
+    color: var(--_select-text);
+    font-size: var(--s-text-sm);
+    line-height: var(--s-leading-normal);
+    cursor: pointer;
+    transition: border-color var(--s-duration-150) var(--s-ease-out),
+      box-shadow var(--s-duration-150) var(--s-ease-out);
+    display: inline-flex;
+
+    &:hover:not(:disabled) {
+      --_select-border: var(--s-border-strong);
+    }
+
+    &:open {
+      --_select-border: var(--s-interactive-primary);
+    }
+
+    &:focus-visible {
+      --_select-border: var(--s-interactive-primary);
+      outline: 2px solid var(--s-focus-ring);
+      outline-offset: 2px;
+
+      @supports (color: oklch(from red l c h)) {
+        outline-color: oklch(from var(--s-interactive-primary) l c h / .3);
+      }
+    }
+
+    &:disabled {
+      opacity: .5;
+      cursor: not-allowed;
+      background-color: var(--s-surface-sunken);
+    }
+  }
+
+  [s-select]::picker-icon {
+    color: var(--s-text-tertiary);
+    transition: rotate var(--s-duration-200) var(--s-ease-out);
+  }
+
+  [s-select]:open::picker-icon {
+    rotate: 180deg;
+  }
+
+  [s-select]::picker(select) {
+    background: var(--s-surface-base);
+    border: 2px solid var(--s-border-default);
+    border-radius: var(--s-radius-md);
+    box-shadow: var(--s-shadow-lg);
+    padding: var(--s-space-1);
+    inset: auto;
+    top: anchor(bottom);
+    left: anchor(left);
+    min-width: anchor-size(width);
+  }
+
+  [s-select] option {
+    align-items: center;
+    gap: var(--s-space-2);
+    padding: var(--s-space-2) var(--s-space-3);
+    border-radius: var(--s-radius-sm);
+    color: var(--s-text-primary);
+    cursor: pointer;
+    transition: background-color var(--s-duration-150) var(--s-ease-out);
+    display: flex;
+
+    &:hover {
+      background-color: var(--s-surface-hover);
+    }
+
+    &:checked {
+      background-color: var(--s-interactive-primary);
+      color: var(--s-text-on-primary);
+    }
+  }
+
+  [s-select] option::checkmark {
+    opacity: 0;
+    order: 1;
+    margin-left: auto;
+  }
+
+  [s-select] option:checked::checkmark {
+    opacity: 1;
+  }
+
+  [s-select][s-size="sm"] {
+    padding: var(--s-space-1) var(--s-space-2);
+    font-size: var(--s-text-xs);
+    min-width: 8rem;
+  }
+
+  [s-select][s-size="lg"] {
+    padding: var(--s-space-3) var(--s-space-4);
+    font-size: var(--s-text-base);
+    min-width: 12rem;
+  }
+
+  @container surface style(--_surface-depth: 1) {
+    :where([s-select]) {
+      --_select-bg: var(--s-surface-sunken);
+    }
+  }
+
+  @container surface style(--_surface-depth: 2) {
+    :where([s-select]) {
+      --_select-bg: var(--s-surface-sunken);
+      --_select-border: var(--s-border-strong);
+    }
+  }
+
+  @container surface style(--_surface-depth: -1) {
+    :where([s-select]) {
+      --_select-bg: var(--s-surface-raised);
+      --_select-border: var(--s-border-muted);
+    }
+  }
+}
+
+@supports not (appearance: base-select) {
+  [s-select] {
+    appearance: none;
+    width: 100%;
+    padding: var(--s-space-2) var(--s-space-3);
+    padding-right: var(--s-space-10);
+    background-color: var(--s-surface-base);
+    border: 2px solid var(--s-border-default);
+    border-radius: var(--s-radius-md);
+    color: var(--s-text-primary);
+    font-size: var(--s-text-sm);
+    line-height: var(--s-leading-normal);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--s-space-3) center;
+    transition: border-color var(--s-duration-150) var(--s-ease-out),
+      box-shadow var(--s-duration-150) var(--s-ease-out);
+    display: block;
+
+    &:hover:not(:disabled) {
+      border-color: var(--s-border-strong);
+    }
+
+    &:focus-visible {
+      border-color: var(--s-interactive-primary);
+      outline: 2px solid var(--s-focus-ring);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      opacity: .5;
+      cursor: not-allowed;
+    }
+  }
+}

package/dist/components/skip-link.css

@@ -15,7 +15,8 @@
   border-radius: var(--_skip-radius);
   box-shadow: var(--_skip-shadow);
   white-space: nowrap;
-  transition: top var(--s-duration-200) var(--s-ease-out), opacity var(--s-duration-200) var(--s-ease-out);
+  transition: top var(--s-duration-200) var(--s-ease-out),
+    opacity var(--s-duration-200) var(--s-ease-out);
   opacity: 0;
   text-decoration: none;
   display: inline-flex;
@@ -28,7 +29,9 @@
 [s-skip-link]:focus, [s-skip-link]:focus-visible {
   top: var(--s-space-4);
   opacity: 1;
-  box-shadow: var(--_skip-shadow), 0 0 0 3px white, 0 0 0 5px var(--_skip-bg);
+  box-shadow: var(--_skip-shadow),
+    0 0 0 3px white,
+    0 0 0 5px var(--_skip-bg);
   outline: none;
 }
 
@@ -77,7 +80,9 @@
   }
 
   [s-skip-link]:focus, [s-skip-link]:focus-visible {
-    box-shadow: var(--_skip-shadow), 0 0 0 3px var(--s-neutral-900), 0 0 0 5px var(--_skip-bg);
+    box-shadow: var(--_skip-shadow),
+      0 0 0 3px var(--s-neutral-900),
+      0 0 0 5px var(--_skip-bg);
   }
 }
 

package/dist/components/surface.css

@@ -10,7 +10,10 @@
   container: surface / inline-size;
 
   @supports (color: oklch(from red l c h)) {
-    color: oklch(from var(--_surface-bg) clamp(.15, calc((.55 - l) * 1000 + .15), .95) 0 0);
+    color: oklch(from var(--_surface-bg)
+        /* If L < 0.55, use light text (0.95); otherwise dark text (0.15)
+           Threshold 0.55 ensures 4.5:1 contrast per WCAG 2.1 AA */
+        clamp(.15, calc((.55 - l) * 1000 + .15), .95) 0 0);
   }
 
   @supports (color: contrast-color(red)) {
@@ -47,7 +50,8 @@
 
 [s-surface][s-interactive] {
   cursor: pointer;
-  transition: transform var(--s-duration-150) var(--s-ease-out), box-shadow var(--s-duration-150) var(--s-ease-out);
+  transition: transform var(--s-duration-150) var(--s-ease-out),
+    box-shadow var(--s-duration-150) var(--s-ease-out);
 
   &:hover {
     box-shadow: var(--s-shadow-lg);
@@ -91,7 +95,7 @@
   background-color: #d4edda;
   background-color: var(--_surface-bg);
   border-left: 4px solid var(--s-state-success);
-  color: #1a1a1a;
+  color: light-dark(#1a1a1a, #e5e5e5);
 }
 
 [s-surface="warning"] {
@@ -99,7 +103,7 @@
   background-color: #fff3cd;
   background-color: var(--_surface-bg);
   border-left: 4px solid var(--s-state-warning);
-  color: #1a1a1a;
+  color: light-dark(#1a1a1a, #e5e5e5);
 }
 
 [s-surface="danger"] {
@@ -107,7 +111,7 @@
   background-color: #f8d7da;
   background-color: var(--_surface-bg);
   border-left: 4px solid var(--s-state-danger);
-  color: #1a1a1a;
+  color: light-dark(#1a1a1a, #e5e5e5);
 }
 
 @container (width <= 20rem) {

package/dist/components/tooltip.css

@@ -27,7 +27,8 @@
   transform: translateX(-50%)translateY(4px);
 
   @supports (color: oklch(from red l c h)) {
-    border: 1px solid oklch(from var(--_tooltip-bg) max(calc(l - .1), .05) c h);
+    border: 1px solid
+      oklch(from var(--_tooltip-bg) max(calc(l - .1), .05) c h);
   }
 
   font-size: var(--s-text-xs);
@@ -35,10 +36,13 @@
   line-height: var(--s-leading-tight);
   text-align: center;
   text-wrap: balance;
-  min-width: min(100%, var(--_tooltip-max-width));
+  min-width: min(100%,
+    var(--_tooltip-max-width));
   max-width: var(--_tooltip-max-width);
   pointer-events: none;
-  transition: opacity var(--s-duration-150) var(--s-ease-out), visibility var(--s-duration-150) var(--s-ease-out), transform var(--s-duration-150) var(--s-ease-out);
+  transition: opacity var(--s-duration-150) var(--s-ease-out),
+    visibility var(--s-duration-150) var(--s-ease-out),
+    transform var(--s-duration-150) var(--s-ease-out);
 }
 
 :where([s-tooltip]):before {
@@ -46,12 +50,14 @@
   visibility: hidden;
   opacity: 0;
   z-index: 9999;
-  margin-bottom: calc(var(--_tooltip-offset)  - var(--_tooltip-arrow-size));
+  margin-bottom: calc(var(--_tooltip-offset) - var(--_tooltip-arrow-size));
   border-left: var(--_tooltip-arrow-size) solid transparent;
   border-right: var(--_tooltip-arrow-size) solid transparent;
   border-top: var(--_tooltip-arrow-size) solid var(--_tooltip-bg);
   pointer-events: none;
-  transition: opacity var(--s-duration-150) var(--s-ease-out), visibility var(--s-duration-150) var(--s-ease-out), transform var(--s-duration-150) var(--s-ease-out);
+  transition: opacity var(--s-duration-150) var(--s-ease-out),
+    visibility var(--s-duration-150) var(--s-ease-out),
+    transform var(--s-duration-150) var(--s-ease-out);
   position: absolute;
   bottom: 100%;
   left: 50%;
@@ -74,7 +80,7 @@
 
 [s-tooltip-pos="bottom"]:before {
   margin-bottom: 0;
-  margin-top: calc(var(--_tooltip-offset)  - var(--_tooltip-arrow-size));
+  margin-top: calc(var(--_tooltip-offset) - var(--_tooltip-arrow-size));
   border-top: none;
   border-bottom: var(--_tooltip-arrow-size) solid var(--_tooltip-bg);
   top: 100%;
@@ -95,7 +101,7 @@
 
 [s-tooltip-pos="left"]:before {
   margin-bottom: 0;
-  margin-right: calc(var(--_tooltip-offset)  - var(--_tooltip-arrow-size));
+  margin-right: calc(var(--_tooltip-offset) - var(--_tooltip-arrow-size));
   border-top: var(--_tooltip-arrow-size) solid transparent;
   border-bottom: var(--_tooltip-arrow-size) solid transparent;
   border-left: var(--_tooltip-arrow-size) solid var(--_tooltip-bg);
@@ -119,7 +125,7 @@
 
 [s-tooltip-pos="right"]:before {
   margin-bottom: 0;
-  margin-left: calc(var(--_tooltip-offset)  - var(--_tooltip-arrow-size));
+  margin-left: calc(var(--_tooltip-offset) - var(--_tooltip-arrow-size));
   border-top: var(--_tooltip-arrow-size) solid transparent;
   border-bottom: var(--_tooltip-arrow-size) solid transparent;
   border-right: var(--_tooltip-arrow-size) solid var(--_tooltip-bg);

package/dist/reset.css

@@ -16,7 +16,7 @@ html {
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 body {