elements-kit 0.7.3 → 0.8.0

package/dist/ui/code/code.css

@@ -74,12 +74,12 @@
   --letter-spacing: var(--letter-spacing-9);
 }
 
-.x-code:where(:not([data-variant="solid"], [data-variant="outline"], [data-variant="ghost"])) {
+.x-code:where(:not([data-variant="solid"], [data-variant="outline"], [data-variant="text"])) {
   background-color: var(--color-a3);
   color: var(--color-a11);
 }
 
-.x-code:where(:not([data-variant="solid"], [data-variant="outline"], [data-variant="ghost"])):where([data-high-contrast]) {
+.x-code:where(:not([data-variant="solid"], [data-variant="outline"], [data-variant="text"])):where([data-high-contrast]) {
   color: var(--color-12);
 }
 
@@ -109,15 +109,15 @@
   color: var(--color-12);
 }
 
-.x-code:where([data-variant="ghost"]) {
+.x-code:where([data-variant="text"]) {
   --code-variant-font-size-adjust: var(--code-font-size-adjust);
   padding: 0;
 }
 
-.x-code:where([data-variant="ghost"]):where([data-color]) {
+.x-code:where([data-variant="text"]):where([data-color]) {
   color: var(--color-a11);
 }
 
-.x-code:where([data-variant="ghost"]):where([data-color][data-high-contrast]) {
+.x-code:where([data-variant="text"]):where([data-color][data-high-contrast]) {
   color: var(--color-12);
 }

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.3",
+  "version": "0.8.0",
   "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",