elements-kit 0.11.0 → 0.12.0

package/dist/ui/arrow/arrow.css

@@ -0,0 +1,62 @@
+.x-arrow {
+  --arrow-direction: 1;
+  vertical-align: -.125em;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  transform: scaleX(var(--arrow-direction)) translateX(0);
+  flex-shrink: 0;
+  transition: transform .2s;
+  display: inline-block;
+  position: relative;
+}
+
+[dir="rtl"] .x-arrow, .x-arrow[dir="rtl"] {
+  --arrow-direction: -1;
+}
+
+.x-arrow:before {
+  content: "";
+  background-color: currentColor;
+  position: absolute;
+  inset: 0;
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z'/></svg>");
+  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z'/></svg>");
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+.x-arrow:after {
+  content: "";
+  clip-path: inset(0 0 0 100%);
+  background-color: currentColor;
+  transition: clip-path .2s;
+  position: absolute;
+  inset: 0;
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' d='M1.75 8H11'/></svg>");
+  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' d='M1.75 8H11'/></svg>");
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+
+:where(:hover) > .x-arrow, :where(:focus-visible) > .x-arrow {
+  transform: scaleX(var(--arrow-direction)) translateX(.25em);
+}
+
+:where(:hover) > .x-arrow:after, :where(:focus-visible) > .x-arrow:after {
+  clip-path: inset(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .x-arrow, .x-arrow:after {
+    transition: none;
+  }
+}

package/dist/ui/text-input/text-input.css

@@ -128,11 +128,11 @@
 .x-text-input:where(:has( > input)) {
   box-sizing: border-box;
   height: var(--text-input-height);
-  padding: var(--text-input-border-width);
   border-radius: var(--text-input-border-radius);
   cursor: text;
   flex-direction: row;
   align-items: stretch;
+  padding: 0;
   display: flex;
 }
 
@@ -184,11 +184,11 @@
 .x-text-input:where(:has( > textarea)) {
   box-sizing: border-box;
   min-height: var(--text-input-min-height);
-  padding: var(--text-input-border-width);
   border-radius: var(--text-input-border-radius);
   cursor: text;
   flex-direction: column;
   align-items: stretch;
+  padding: 0;
   display: flex;
 }
 
@@ -235,22 +235,6 @@
   display: flex;
 }
 
-.x-text-input:where(:has( > input)) > :where(:not(input, textarea)):where(:has( ~ input)) {
-  margin-left: calc(var(--text-input-border-width) * -1);
-}
-
-.x-text-input:where(:has( > input)) > input ~ :where(:not(input, textarea)) {
-  margin-right: calc(var(--text-input-border-width) * -1);
-}
-
-.x-text-input:where(:has( > textarea)) > :where(:not(input, textarea)):where(:has( ~ textarea)) {
-  margin-top: calc(var(--text-input-border-width) * -1);
-}
-
-.x-text-input:where(:has( > textarea)) > textarea ~ :where(:not(input, textarea)) {
-  margin-bottom: calc(var(--text-input-border-width) * -1);
-}
-
 .x-text-input:where([data-size="1"]) {
   --text-input-height: var(--space-5);
   --text-input-min-height: var(--space-8);
@@ -323,9 +307,8 @@
   --text-input-border-width: 1px;
   --text-input-selection-color: var(--focus-a5);
   --text-input-focus-color: var(--focus-8);
-  background-clip: content-box;
   background-color: var(--color-surface);
-  box-shadow: inset 0 0 0 var(--text-input-border-width) var(--base-color-a7);
+  border: var(--text-input-border-width) solid var(--base-color-a7);
   color: var(--base-color-12);
 }
 
@@ -399,5 +382,5 @@
 }
 
 .x-text-input:where(:not([data-variant="soft"])):where(:has( > :is(input, textarea):is(:disabled, :read-only))) {
-  box-shadow: inset 0 0 0 var(--text-input-border-width) var(--base-color-a6);
+  border-color: var(--base-color-a6);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elements-kit",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.12.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",