elements-kit 0.7.4 → 0.8.1

package/dist/ui/card/card.css

@@ -56,6 +56,62 @@
   --card-border-radius: var(--radius-6);
 }
 
+:where([data-base-color]) {
+  --card-surface-box-shadow: 0 0 0 1px var(--base-color-a5);
+  --card-surface-hover-box-shadow: 0 0 0 1px var(--base-color-a7);
+  --card-surface-active-box-shadow: 0 0 0 1px var(--base-color-a6);
+  --card-elevated-box-shadow-inner: 0 0 0 1px var(--base-color-a3), 0 0 0 1px transparent,
+    0 0 0 .5px var(--black-a1), 0 1px 1px 0 var(--base-color-a2),
+    0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
+  --card-elevated-box-shadow-outer: 0 0 0 0 var(--base-color-a3), 0 0 0 0 transparent, 0 0 0 0 var(--black-a1),
+    0 1px 1px -1px var(--base-color-a2), 0 2px 1px -2px var(--black-a1),
+    0 1px 3px -1px var(--black-a1);
+  --card-elevated-hover-box-shadow-inner: 0 0 0 1px var(--base-color-a4), 0 1px 1px 1px var(--black-a1),
+    0 2px 1px -1px var(--base-color-a3), 0 2px 3px -2px var(--black-a1),
+    0 3px 12px -4px var(--base-color-a3), 0 4px 16px -8px var(--black-a1);
+  --card-elevated-hover-box-shadow-outer: 0 0 0 0 var(--base-color-a4), 0 1px 1px 0 var(--black-a1),
+    0 2px 1px -2px var(--base-color-a3), 0 2px 3px -3px var(--black-a1),
+    0 3px 12px -5px var(--base-color-a3), 0 4px 16px -9px var(--black-a1);
+  --card-elevated-active-box-shadow-inner: 0 0 0 1px var(--base-color-a3), 0 0 0 1px transparent,
+    0 0 0 .5px var(--black-a1), 0 1px 1px 0 var(--base-color-a4),
+    0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
+  --card-elevated-active-box-shadow-outer: 0 0 0 0 var(--base-color-a3), 0 0 0 0 transparent, 0 0 0 0 var(--black-a1),
+    0 1px 1px -1px var(--base-color-a4), 0 2px 1px -2px var(--black-a1),
+    0 1px 3px -1px var(--black-a1);
+}
+
+@supports (color: color-mix(in oklab, white, black)) {
+  :where([data-base-color]) {
+    --card-surface-box-shadow: 0 0 0 1px
+      color-mix(in oklab, var(--base-color-a5), var(--base-color-5) 25%);
+    --card-surface-hover-box-shadow: 0 0 0 1px
+      color-mix(in oklab, var(--base-color-a7), var(--base-color-7) 25%);
+    --card-surface-active-box-shadow: 0 0 0 1px
+      color-mix(in oklab, var(--base-color-a6), var(--base-color-6) 25%);
+  }
+}
+
+:is(.dark, .dark-theme), :is(.dark, .dark-theme) :where([data-base-color]:not(.light, .light-theme)) {
+  --card-elevated-box-shadow-inner: 0 0 0 1px var(--base-color-a6), 0 0 0 1px transparent,
+    0 0 0 .5px var(--black-a3), 0 1px 1px 0 var(--black-a6),
+    0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
+  --card-elevated-box-shadow-outer: 0 0 0 0 var(--base-color-a6), 0 0 0 0 transparent, 0 0 0 0 var(--black-a3),
+    0 1px 1px -1px var(--black-a6), 0 2px 1px -2px var(--black-a6),
+    0 1px 3px -1px var(--black-a5);
+  --card-elevated-hover-box-shadow-inner: 0 0 0 1px var(--base-color-a6), 0 0 1px 1px var(--base-color-a4),
+    0 0 1px -1px var(--base-color-a4), 0 0 3px -2px var(--base-color-a3),
+    0 0 12px -2px var(--base-color-a3), 0 0 16px -8px var(--base-color-a7);
+  --card-elevated-hover-box-shadow-outer: 0 0 0 0 var(--base-color-a6), 0 0 1px 0 var(--base-color-a4),
+    0 0 1px -2px var(--base-color-a4), 0 0 3px -3px var(--base-color-a3),
+    0 0 12px -3px var(--base-color-a3), 0 0 16px -9px var(--base-color-a7);
+  --card-elevated-active-box-shadow-inner: 0 0 0 1px var(--base-color-a6), 0 0 0 1px transparent,
+    0 0 0 .5px var(--black-a3), 0 1px 1px 0 var(--black-a6),
+    0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
+  --card-elevated-active-box-shadow-outer: 0 0 0 0 var(--base-color-a6), 0 0 0 0 transparent, 0 0 0 0 var(--black-a3),
+    0 1px 1px -1px var(--black-a6), 0 2px 1px -2px var(--black-a6),
+    0 1px 3px -1px var(--black-a5);
+}
+
 .x-card, .x-card:where([data-variant="surface"]) {
   --card-border-width: 1px;
 }
@@ -67,22 +123,26 @@
 }
 
 :is(.x-card, .x-card:where([data-variant="surface"])):after {
-  box-shadow: 0 0 0 1px var(--base-color-a5);
+  box-shadow: var(--card-surface-box-shadow);
 }
 
 @media (hover: hover) {
   :is(.x-card, .x-card:where([data-variant="surface"])):where(:any-link, button, label):where(:hover):after {
-    box-shadow: 0 0 0 1px var(--base-color-a7);
+    box-shadow: var(--card-surface-hover-box-shadow);
   }
 }
 
+:is(.x-card, .x-card:where([data-variant="surface"])):where(:any-link, button, label):where([data-state="open"]):after {
+  box-shadow: var(--card-surface-hover-box-shadow);
+}
+
 :is(.x-card, .x-card:where([data-variant="surface"])):where(:any-link, button, label):where(:active:not([data-state="open"])):after {
-  box-shadow: 0 0 0 1px var(--base-color-a6);
+  box-shadow: var(--card-surface-active-box-shadow);
 }
 
 .x-card:where([data-variant="elevated"]) {
   --card-border-width: 1px;
-  box-shadow: var(--shadow-2);
+  box-shadow: var(--card-elevated-box-shadow-outer);
   transition: box-shadow .12s;
 }
 
@@ -93,31 +153,62 @@
 }
 
 .x-card:where([data-variant="elevated"]):after {
-  box-shadow: 0 0 0 1px var(--base-color-a3);
+  box-shadow: var(--card-elevated-box-shadow-inner);
 }
 
 @media (hover: hover) {
   .x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:hover) {
-    box-shadow: var(--shadow-3);
+    box-shadow: var(--card-elevated-hover-box-shadow-outer);
     transition-duration: 40ms;
   }
+
+  .x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:hover):after {
+    box-shadow: var(--card-elevated-hover-box-shadow-inner);
+  }
+}
+
+.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where([data-state="open"]) {
+  box-shadow: var(--card-elevated-hover-box-shadow-outer);
+  transition-duration: 40ms;
+}
+
+.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where([data-state="open"]):after {
+  box-shadow: var(--card-elevated-hover-box-shadow-inner);
 }
 
 .x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:active:not([data-state="open"])) {
-  box-shadow: var(--shadow-2);
+  box-shadow: var(--card-elevated-active-box-shadow-outer);
   transition-duration: 40ms;
 }
 
+.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:active:not([data-state="open"])):after {
+  box-shadow: var(--card-elevated-active-box-shadow-inner);
+}
+
 .x-card:where([data-variant="borderless"]) {
   --card-border-width: 0px;
 }
 
+.x-card:where([data-variant="borderless"]):before {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  background-color: #0000;
+}
+
+.x-card:where([data-variant="borderless"]):after {
+  box-shadow: none;
+}
+
 @media (hover: hover) {
   .x-card:where([data-variant="borderless"]):where(:any-link, button, label):where(:hover) {
     background-color: var(--base-color-a3);
   }
 }
 
+.x-card:where([data-variant="borderless"]):where(:any-link, button, label):where([data-state="open"]) {
+  background-color: var(--base-color-a3);
+}
+
 .x-card:where([data-variant="borderless"]):where(:any-link, button, label):where(:active:not([data-state="open"])) {
   background-color: var(--base-color-a4);
 }
@@ -131,6 +222,10 @@
   outline: inherit;
 }
 
+.x-card:where(:focus-visible):where(:active:not([data-state="open"])):before {
+  background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
+}
+
 .x-card > [data-inset] {
   --inset-radius: calc(var(--card-border-radius) - var(--card-border-width));
   box-sizing: border-box;

package/dist/ui/link/link.css

@@ -0,0 +1,39 @@
+.x-link {
+  color: var(--color-a11);
+}
+
+.x-link:where(:any-link, button) {
+  cursor: var(--cursor-link);
+  text-underline-offset: calc(.025em + 2px);
+  text-decoration-line: none;
+  text-decoration-style: solid;
+  text-decoration-thickness: min(2px, max(1px, .05em));
+  -webkit-text-decoration-color: var(--color-a5);
+  text-decoration-color: var(--color-a5);
+}
+
+.x-link:where(:disabled, [aria-disabled="true"]) {
+  cursor: var(--cursor-disabled);
+  opacity: .5;
+}
+
+.x-link:where(:focus-visible) {
+  border-radius: calc(.07em * var(--radius-factor, 1));
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+  text-decoration-line: none;
+}
+
+@media (hover: hover) {
+  .x-link:where(:not([data-underline]), [data-underline="auto"], [data-underline="hover"]):where(:hover) {
+    text-decoration-line: underline;
+  }
+}
+
+.x-link:where([data-underline="always"]) {
+  text-decoration-line: underline;
+}
+
+.x-link:where([data-underline="none"]) {
+  text-decoration-line: none;
+}

package/dist/ui/progress/progress.css

@@ -0,0 +1,63 @@
+.x-progress {
+  appearance: none;
+  width: 100%;
+  height: var(--progress-height);
+  border-radius: max(calc(var(--progress-height) / 3), var(--radius-thumb));
+  background-color: var(--base-color-a3);
+  box-shadow: inset 0 0 0 1px var(--base-color-a5);
+  border: 0;
+  display: block;
+  overflow: hidden;
+}
+
+.x-progress::-webkit-progress-bar {
+  background-color: var(--base-color-a3);
+  box-shadow: inset 0 0 0 1px var(--base-color-a5);
+  border-radius: inherit;
+}
+
+.x-progress::-webkit-progress-value {
+  background-color: var(--color-9);
+  border-radius: inherit;
+  transition: width .12s linear;
+}
+
+.x-progress::-moz-progress-bar {
+  background-color: var(--color-9);
+  border-radius: inherit;
+  transition: width .12s linear;
+}
+
+.x-progress:where([data-size="1"]) {
+  --progress-height: var(--space-1);
+}
+
+.x-progress:where([data-size="2"]) {
+  --progress-height: calc(var(--space-2) * .75);
+}
+
+.x-progress:where([data-size="3"]) {
+  --progress-height: var(--space-2);
+}
+
+.x-progress:where(:not([data-size])) {
+  --progress-height: calc(var(--space-2) * .75);
+}
+
+.x-progress:where([data-variant="soft"]) {
+  background-color: var(--base-color-a4);
+  box-shadow: none;
+}
+
+.x-progress:where([data-variant="soft"])::-webkit-progress-bar {
+  background-color: var(--base-color-a4);
+  box-shadow: none;
+}
+
+.x-progress:where([data-variant="soft"])::-webkit-progress-value {
+  background-color: var(--color-a8);
+}
+
+.x-progress:where([data-variant="soft"])::-moz-progress-bar {
+  background-color: var(--color-a8);
+}

package/dist/ui/styles/material.css

@@ -5,7 +5,7 @@
 
 :is(.dark, .dark-theme) {
   --color-material-solid: var(--base-color-2);
-  --color-material-translucent: var(--base-color-a2);
+  --color-material-translucent: var(--black-a7);
 }
 
 :where([data-material-background="solid"]) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.7.4",
+  "version": "0.8.1",
   "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
   "keywords": [
     "webcomponents",