elements-kit 0.5.2 → 0.6.1

package/README.md

@@ -493,9 +493,3 @@ class XPicker extends HTMLElement {
 - [ARCHITECTURE.md](ARCHITECTURE.md) — how the library works
 - [CONTRIBUTING.md](CONTRIBUTING.md) — build, test, PR checklist
 
-## Roadmap
-
-- [ ] Context — share state across a subtree without prop drilling
-- [ ] UI library — pre-built reactive components built on ElementsKit primitives
-- [ ] More framework integrations (Vue, Solid, Angular, …)
-- [ ] Tutorial — building a full app from scratch

package/dist/ui/badge/badge.css

@@ -83,6 +83,6 @@
 
 .x-badge:where([data-variant="outline"]):where([data-high-contrast]) {
   box-shadow: inset 0 0 0 1px var(--color-a7),
-      inset 0 0 0 1px var(--gray-a11);
+      inset 0 0 0 1px var(--base-color-a11);
   color: var(--color-12);
 }

package/dist/ui/button/button.css

@@ -19,215 +19,35 @@
   position: relative;
 }
 
-.x-button:where(:not([data-variant="ghost"])) {
+.x-button:where(:not([data-variant="text"])) {
   height: var(--base-button-height);
 }
 
-.x-button:where([data-variant="ghost"]) {
+.x-button:where([data-variant="text"]) {
   box-sizing: content-box;
   height: fit-content;
 }
 
 .x-button:where([data-size="1"]) {
-  --base-button-classic-active-padding-top: 1px;
   --base-button-height: var(--space-5);
   border-radius: max(var(--radius-1), var(--radius-pill));
 }
 
 .x-button:where([data-size="2"]) {
-  --base-button-classic-active-padding-top: 2px;
   --base-button-height: var(--space-6);
   border-radius: max(var(--radius-2), var(--radius-pill));
 }
 
 .x-button:where([data-size="3"]) {
-  --base-button-classic-active-padding-top: 2px;
   --base-button-height: var(--space-7);
   border-radius: max(var(--radius-3), var(--radius-pill));
 }
 
 .x-button:where([data-size="4"]) {
-  --base-button-classic-active-padding-top: 2px;
   --base-button-height: var(--space-8);
   border-radius: max(var(--radius-4), var(--radius-pill));
 }
 
-:where(:root) {
-  --base-button-classic-after-inset: 2px;
-  --base-button-classic-box-shadow-top: inset 0 0 0 1px var(--gray-a4),
-    inset 0 -2px 1px var(--gray-a3);
-  --base-button-classic-box-shadow-bottom: inset 0 4px 2px -2px var(--white-a9),
-    inset 0 2px 1px -1px var(--white-a9);
-  --base-button-classic-disabled-box-shadow: var(--base-button-classic-box-shadow-top),
-    var(--base-button-classic-box-shadow-bottom);
-  --base-button-classic-active-filter: brightness(.92) saturate(1.1);
-  --base-button-classic-high-contrast-hover-filter: contrast(.88) saturate(1.1) brightness(1.1);
-  --base-button-classic-high-contrast-active-filter: contrast(.82) saturate(1.2) brightness(1.16);
-}
-
-:is(.dark, .dark-theme), :is(.dark, .dark-theme) :where(:root:not(.light, .light-theme)) {
-  --base-button-classic-after-inset: 1px;
-  --base-button-classic-box-shadow-top: inset 0 0 0 1px var(--white-a2),
-    inset 0 4px 2px -2px var(--white-a3),
-    inset 0 1px 1px var(--white-a6),
-    inset 0 -1px 1px var(--black-a6);
-  --base-button-classic-box-shadow-bottom: 0 0 transparent;
-  --base-button-classic-disabled-box-shadow: inset 0 0 0 1px var(--gray-a5),
-    inset 0 4px 2px -2px var(--gray-a2),
-    inset 0 1px 1px var(--gray-a5),
-    inset 0 -1px 1px var(--black-a3),
-    inset 0 0 0 1px var(--gray-a2);
-  --base-button-classic-active-filter: brightness(1.08);
-  --base-button-classic-high-contrast-hover-filter: contrast(.88) saturate(1.3) brightness(1.14);
-  --base-button-classic-high-contrast-active-filter: brightness(.95) saturate(1.2);
-}
-
-.x-button:where([data-variant="classic"]) {
-  background-color: var(--color-9);
-  color: var(--accent-contrast);
-  z-index: 0;
-  background-image: linear-gradient(to bottom, transparent 50%, var(--gray-a4)),
-    linear-gradient(to bottom, transparent 50%, var(--color-9) 80%);
-  box-shadow: var(--base-button-classic-box-shadow-top),
-    inset 0 0 0 1px var(--color-9),
-    var(--base-button-classic-box-shadow-bottom);
-  position: relative;
-}
-
-.x-button:where([data-variant="classic"]):after {
-  content: "";
-  border-radius: inherit;
-  pointer-events: none;
-  z-index: -1;
-  border: var(--base-button-classic-after-inset) solid transparent;
-  background-clip: content-box;
-  background-color: inherit;
-  background-image: linear-gradient(var(--black-a1),
-      transparent,
-      var(--white-a2));
-  box-shadow: inset 0 2px 3px -1px var(--white-a4);
-  position: absolute;
-  inset: 0;
-}
-
-.x-button:where([data-variant="classic"]):where([data-high-contrast]) {
-  background-color: var(--color-12);
-  color: var(--gray-1);
-  background-image: linear-gradient(to bottom, transparent 50%, var(--gray-a4)),
-      linear-gradient(to bottom, transparent 50%, var(--color-12) 80%);
-  box-shadow: var(--base-button-classic-box-shadow-top),
-      inset 0 0 0 1px var(--color-12),
-      var(--base-button-classic-box-shadow-bottom);
-}
-
-.x-button:where([data-variant="classic"]):where([data-high-contrast]):after {
-  background-image: linear-gradient(var(--black-a3),
-        transparent,
-        var(--white-a2));
-}
-
-@media (pointer: coarse) {
-  .x-button:where([data-variant="classic"]):where(:active:not([data-state="open"])) {
-    outline: .5em solid var(--color-a4);
-    outline-offset: 0;
-  }
-}
-
-.x-button:where([data-variant="classic"]):where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-
-@media (hover: hover) {
-  .x-button:where([data-variant="classic"]):where(:hover):after {
-    background-color: var(--color-10);
-    background-image: linear-gradient(var(--black-a2) -15%,
-          transparent,
-          var(--white-a3));
-  }
-
-  .x-button:where([data-variant="classic"]):where(:hover):where([data-high-contrast]) {
-    filter: var(--base-button-classic-high-contrast-hover-filter);
-  }
-
-  .x-button:where([data-variant="classic"]):where(:hover):where([data-high-contrast]):after {
-    background-color: var(--color-12);
-    background-image: linear-gradient(var(--black-a5),
-            transparent,
-            var(--white-a2));
-  }
-}
-
-.x-button:where([data-variant="classic"]):where([data-state="open"]):after {
-  background-color: var(--color-10);
-  background-image: linear-gradient(var(--black-a2) -15%,
-        transparent,
-        var(--white-a3));
-}
-
-.x-button:where([data-variant="classic"]):where([data-state="open"]):where([data-high-contrast]) {
-  filter: var(--base-button-classic-high-contrast-hover-filter);
-}
-
-.x-button:where([data-variant="classic"]):where([data-state="open"]):where([data-high-contrast]):after {
-  background-color: var(--color-12);
-  background-image: linear-gradient(var(--black-a5),
-          transparent,
-          var(--white-a2));
-}
-
-.x-button:where([data-variant="classic"]):where(:active:not([data-state="open"], [data-disabled])) {
-  background-color: var(--color-9);
-  background-image: linear-gradient(var(--black-a1), transparent);
-  padding-top: var(--base-button-classic-active-padding-top);
-  box-shadow: inset 0 4px 2px -2px var(--gray-a4),
-      inset 0 1px 1px var(--gray-a7),
-      inset 0 0 0 1px var(--gray-a5),
-      inset 0 0 0 1px var(--color-9),
-      inset 0 3px 2px var(--gray-a3),
-      inset 0 0 0 1px var(--white-a7),
-      inset 0 -2px 1px var(--white-a5);
-}
-
-.x-button:where([data-variant="classic"]):where(:active:not([data-state="open"], [data-disabled])):after {
-  box-shadow: none;
-  background-color: inherit;
-  background-image: linear-gradient(var(--black-a2),
-        transparent,
-        var(--white-a3));
-}
-
-.x-button:where([data-variant="classic"]):where(:active:not([data-state="open"], [data-disabled])):where([data-high-contrast]) {
-  background-color: var(--color-12);
-  filter: var(--base-button-classic-high-contrast-active-filter);
-  box-shadow: var(--base-button__classic-active__shadow-front-layer),
-        inset 0 0 0 1px var(--color-12),
-        var(--base-button__classic-active__shadow-bottom-layer);
-}
-
-.x-button:where([data-variant="classic"]):where(:active:not([data-state="open"], [data-disabled])):where([data-high-contrast]):after {
-  background-image: linear-gradient(var(--black-a5),
-          transparent,
-          var(--white-a3));
-}
-
-.x-button:where([data-variant="classic"]):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-2);
-  box-shadow: var(--base-button-classic-disabled-box-shadow);
-  filter: none;
-  background-image: none;
-  outline: none;
-}
-
-.x-button:where([data-variant="classic"]):where([data-disabled]):after {
-  box-shadow: none;
-  background-color: var(--gray-a2);
-  background-image: linear-gradient(var(--black-a1) -20%,
-        transparent,
-        var(--white-a1));
-}
-
 :where(:root) {
   --base-button-solid-active-filter: brightness(.92) saturate(1.1);
   --base-button-solid-high-contrast-hover-filter: contrast(.88) saturate(1.1)
@@ -278,7 +98,7 @@
 
 .x-button:where([data-variant="solid"]):where([data-high-contrast]) {
   background-color: var(--color-12);
-  color: var(--gray-1);
+  color: var(--base-color-1);
 }
 
 @media (hover: hover) {
@@ -299,23 +119,23 @@
 }
 
 .x-button:where([data-variant="solid"]):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
+  color: var(--base-color-a8);
+  background-color: var(--base-color-a3);
   filter: none;
   outline: none;
 }
 
-.x-button:where([data-variant="soft"], [data-variant="ghost"], [data-variant="ghost-offset"]) {
+.x-button:where([data-variant="soft"], [data-variant="text"], [data-variant="borderless"]) {
   color: var(--color-a11);
 }
 
-.x-button:where([data-variant="soft"], [data-variant="ghost"], [data-variant="ghost-offset"]):where([data-high-contrast]) {
+.x-button:where([data-variant="soft"], [data-variant="text"], [data-variant="borderless"]):where([data-high-contrast]) {
   color: var(--color-12);
 }
 
-.x-button:where([data-variant="soft"], [data-variant="ghost"], [data-variant="ghost-offset"]):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
+.x-button:where([data-variant="soft"], [data-variant="text"], [data-variant="borderless"]):where([data-disabled]) {
+  color: var(--base-color-a8);
+  background-color: var(--base-color-a3);
 }
 
 .x-button:where([data-variant="soft"]) {
@@ -342,31 +162,31 @@
 }
 
 .x-button:where([data-variant="soft"]):where([data-disabled]) {
-  color: var(--gray-a8);
-  background-color: var(--gray-a3);
+  color: var(--base-color-a8);
+  background-color: var(--base-color-a3);
 }
 
 @media (hover: hover) {
-  .x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where(:hover) {
+  .x-button:where([data-variant="text"], [data-variant="borderless"]):where(:hover) {
     background-color: var(--color-a3);
   }
 }
 
-.x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where(:focus-visible) {
+.x-button:where([data-variant="text"], [data-variant="borderless"]):where(:focus-visible) {
   outline: 2px solid var(--focus-8);
   outline-offset: -1px;
 }
 
-.x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where([data-state="open"]) {
+.x-button:where([data-variant="text"], [data-variant="borderless"]):where([data-state="open"]) {
   background-color: var(--color-a3);
 }
 
-.x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where(:active:not([data-state="open"])) {
+.x-button:where([data-variant="text"], [data-variant="borderless"]):where(:active:not([data-state="open"])) {
   background-color: var(--color-a4);
 }
 
-.x-button:where([data-variant="ghost"], [data-variant="ghost-offset"]):where([data-disabled]) {
-  color: var(--gray-a8);
+.x-button:where([data-variant="text"], [data-variant="borderless"]):where([data-disabled]) {
+  color: var(--base-color-a8);
   background-color: #0000;
 }
 
@@ -396,13 +216,13 @@
 
 .x-button:where([data-variant="outline"]):where([data-high-contrast]) {
   box-shadow: inset 0 0 0 1px var(--color-a7),
-      inset 0 0 0 1px var(--gray-a11);
+      inset 0 0 0 1px var(--base-color-a11);
   color: var(--color-12);
 }
 
 .x-button:where([data-variant="outline"]):where([data-disabled]) {
-  color: var(--gray-a8);
-  box-shadow: inset 0 0 0 1px var(--gray-a7);
+  color: var(--base-color-a8);
+  box-shadow: inset 0 0 0 1px var(--base-color-a7);
   background-color: #0000;
 }
 
@@ -437,35 +257,35 @@
 }
 
 .x-button:where([data-variant="surface"]):where([data-disabled]) {
-  color: var(--gray-a8);
-  box-shadow: inset 0 0 0 1px var(--gray-a6);
-  background-color: var(--gray-a2);
+  color: var(--base-color-a8);
+  box-shadow: inset 0 0 0 1px var(--base-color-a6);
+  background-color: var(--base-color-a2);
 }
 
-.x-button:where(:not([data-variant="ghost"])) :where(svg) {
+.x-button:where(:not([data-variant="text"])) :where(svg) {
   opacity: .9;
 }
 
-.x-button:where([data-variant="ghost"]) {
-  padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
+.x-button:where([data-variant="text"]) {
+  padding: var(--button-text-padding-y) var(--button-text-padding-x);
   --margin-top: 0px;
   --margin-right: 0px;
   --margin-bottom: 0px;
   --margin-left: 0px;
-  --margin-top-override: calc(var(--margin-top) - var(--button-ghost-padding-y));
-  --margin-right-override: calc(var(--margin-right) - var(--button-ghost-padding-x));
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--button-ghost-padding-y));
-  --margin-left-override: calc(var(--margin-left) - var(--button-ghost-padding-x));
+  --margin-top-override: calc(var(--margin-top) - var(--button-text-padding-y));
+  --margin-right-override: calc(var(--margin-right) - var(--button-text-padding-x));
+  --margin-bottom-override: calc(var(--margin-bottom) - var(--button-text-padding-y));
+  --margin-left-override: calc(var(--margin-left) - var(--button-text-padding-x));
 }
 
-:where(.x-button:where([data-variant="ghost"])) > * {
+:where(.x-button:where([data-variant="text"])) > * {
   --margin-top-override: initial;
   --margin-right-override: initial;
   --margin-bottom-override: initial;
   --margin-left-override: initial;
 }
 
-.x-button:where([data-variant="ghost"]) {
+.x-button:where([data-variant="text"]) {
   margin: var(--margin-top-override) var(--margin-right-override)
       var(--margin-bottom-override) var(--margin-left-override);
 }
@@ -477,15 +297,15 @@
   letter-spacing: var(--letter-spacing-1);
 }
 
-.x-button:where([data-size="1"]):where(:not([data-variant="ghost"])) {
+.x-button:where([data-size="1"]):where(:not([data-variant="text"])) {
   padding-left: var(--space-2);
   padding-right: var(--space-2);
 }
 
-.x-button:where([data-size="1"]):where([data-variant="ghost"]) {
+.x-button:where([data-size="1"]):where([data-variant="text"]) {
   gap: var(--space-1);
-  --button-ghost-padding-x: var(--space-2);
-  --button-ghost-padding-y: var(--space-1);
+  --button-text-padding-x: var(--space-2);
+  --button-text-padding-y: var(--space-1);
 }
 
 .x-button:where([data-size="2"]) {
@@ -495,15 +315,15 @@
   letter-spacing: var(--letter-spacing-2);
 }
 
-.x-button:where([data-size="2"]):where(:not([data-variant="ghost"])) {
+.x-button:where([data-size="2"]):where(:not([data-variant="text"])) {
   padding-left: var(--space-3);
   padding-right: var(--space-3);
 }
 
-.x-button:where([data-size="2"]):where([data-variant="ghost"]) {
+.x-button:where([data-size="2"]):where([data-variant="text"]) {
   gap: var(--space-1);
-  --button-ghost-padding-x: var(--space-2);
-  --button-ghost-padding-y: var(--space-1);
+  --button-text-padding-x: var(--space-2);
+  --button-text-padding-y: var(--space-1);
 }
 
 .x-button:where([data-size="3"]) {
@@ -513,15 +333,15 @@
   letter-spacing: var(--letter-spacing-3);
 }
 
-.x-button:where([data-size="3"]):where(:not([data-variant="ghost"])) {
+.x-button:where([data-size="3"]):where(:not([data-variant="text"])) {
   padding-left: var(--space-4);
   padding-right: var(--space-4);
 }
 
-.x-button:where([data-size="3"]):where([data-variant="ghost"]) {
+.x-button:where([data-size="3"]):where([data-variant="text"]) {
   gap: var(--space-2);
-  --button-ghost-padding-x: var(--space-3);
-  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
+  --button-text-padding-x: var(--space-3);
+  --button-text-padding-y: calc(var(--space-1) * 1.5);
 }
 
 .x-button:where([data-size="4"]) {
@@ -531,17 +351,17 @@
   letter-spacing: var(--letter-spacing-4);
 }
 
-.x-button:where([data-size="4"]):where(:not([data-variant="ghost"])) {
+.x-button:where([data-size="4"]):where(:not([data-variant="text"])) {
   padding-left: var(--space-5);
   padding-right: var(--space-5);
 }
 
-.x-button:where([data-size="4"]):where([data-variant="ghost"]) {
+.x-button:where([data-size="4"]):where([data-variant="text"]) {
   gap: var(--space-2);
-  --button-ghost-padding-x: var(--space-4);
-  --button-ghost-padding-y: var(--space-2);
+  --button-text-padding-x: var(--space-4);
+  --button-text-padding-y: var(--space-2);
 }
 
-.x-button:where(:not([data-variant="ghost"])) {
+.x-button:where(:not([data-variant="text"])) {
   font-weight: var(--font-weight-medium);
 }

package/dist/ui/card/card.css

@@ -0,0 +1,129 @@
+.x-card {
+  border-radius: var(--card-border-radius);
+  font-family: var(--default-font-family);
+  font-weight: var(--font-weight-regular);
+  text-align: start;
+  padding: var(--card-padding);
+  box-sizing: border-box;
+  font-style: normal;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+.x-card:before, .x-card:after {
+  content: "";
+  pointer-events: none;
+  border-radius: calc(var(--card-border-radius) - var(--card-border-width));
+  inset: var(--card-border-width);
+  transition: inherit;
+  position: absolute;
+}
+
+.x-card:before {
+  z-index: -1;
+}
+
+.x-card {
+  contain: paint;
+}
+
+.x-card, .x-card:where([data-size="3"]) {
+  --card-padding: var(--space-5);
+  --card-border-radius: var(--radius-5);
+}
+
+.x-card:where([data-size="1"]) {
+  --card-padding: var(--space-3);
+  --card-border-radius: var(--radius-4);
+}
+
+.x-card:where([data-size="2"]) {
+  --card-padding: var(--space-4);
+  --card-border-radius: var(--radius-4);
+}
+
+.x-card:where([data-size="4"]) {
+  --card-padding: var(--space-6);
+  --card-border-radius: var(--radius-5);
+}
+
+.x-card:where([data-size="5"]) {
+  --card-padding: var(--space-8);
+  --card-border-radius: var(--radius-6);
+}
+
+.x-card, .x-card:where([data-variant="surface"]) {
+  --card-border-width: 1px;
+}
+
+:is(.x-card, .x-card:where([data-variant="surface"])):before {
+  background-color: var(--color-material, var(--color-surface));
+  -webkit-backdrop-filter: var(--backdrop-filter-material, none);
+  backdrop-filter: var(--backdrop-filter-material, none);
+}
+
+:is(.x-card, .x-card:where([data-variant="surface"])):after {
+  box-shadow: 0 0 0 1px var(--base-color-a5);
+}
+
+@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);
+  }
+}
+
+: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);
+}
+
+.x-card:where([data-variant="elevated"]) {
+  --card-border-width: 1px;
+  box-shadow: var(--shadow-2);
+  transition: box-shadow .12s;
+}
+
+.x-card:where([data-variant="elevated"]):before {
+  background-color: var(--color-material, var(--color-surface));
+  -webkit-backdrop-filter: var(--backdrop-filter-material, none);
+  backdrop-filter: var(--backdrop-filter-material, none);
+}
+
+.x-card:where([data-variant="elevated"]):after {
+  box-shadow: 0 0 0 1px var(--base-color-a3);
+}
+
+@media (hover: hover) {
+  .x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:hover) {
+    box-shadow: var(--shadow-3);
+    transition-duration: 40ms;
+  }
+}
+
+.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:active:not([data-state="open"])) {
+  box-shadow: var(--shadow-2);
+  transition-duration: 40ms;
+}
+
+.x-card:where([data-variant="borderless"]) {
+  --card-border-width: 0px;
+}
+
+@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(:active:not([data-state="open"])) {
+  background-color: var(--base-color-a4);
+}
+
+.x-card:where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+
+.x-card:where(:focus-visible):after {
+  outline: inherit;
+}