elements-kit 0.4.0 → 0.5.0

package/dist/ui/badge/badge.css

@@ -0,0 +1,88 @@
+.x-badge {
+  white-space: nowrap;
+  font-family: var(--default-font-family);
+  font-weight: var(--font-weight-medium);
+  flex-shrink: 0;
+  align-items: center;
+  height: fit-content;
+  font-style: normal;
+  line-height: 1;
+  display: inline-flex;
+}
+
+.x-badge:where([data-size="1"]) {
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+  padding: calc(var(--space-1) * .5) calc(var(--space-1) * 1.5);
+  gap: calc(var(--space-1) * 1.5);
+  border-radius: max(var(--radius-1), var(--radius-full));
+}
+
+.x-badge:where([data-size="2"]) {
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+  padding: var(--space-1) var(--space-2);
+  gap: calc(var(--space-1) * 1.5);
+  border-radius: max(var(--radius-2), var(--radius-full));
+}
+
+.x-badge:where([data-size="3"]) {
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+  padding: var(--space-1) calc(var(--space-2) * 1.25);
+  gap: var(--space-2);
+  border-radius: max(var(--radius-2), var(--radius-full));
+}
+
+.x-badge:where([data-variant="solid"]) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+}
+
+.x-badge:where([data-variant="solid"])::selection {
+  background-color: var(--accent-7);
+  color: var(--accent-12);
+}
+
+.x-badge:where([data-variant="solid"]):where([data-high-contrast]) {
+  background-color: var(--accent-12);
+  color: var(--accent-1);
+}
+
+.x-badge:where([data-variant="solid"]):where([data-high-contrast])::selection {
+  background-color: var(--accent-a11);
+  color: var(--accent-1);
+}
+
+.x-badge:where([data-variant="surface"]) {
+  background-color: var(--accent-surface);
+  box-shadow: inset 0 0 0 1px var(--accent-a6);
+  color: var(--accent-a11);
+}
+
+.x-badge:where([data-variant="surface"]):where([data-high-contrast]) {
+  color: var(--accent-12);
+}
+
+.x-badge:where([data-variant="soft"]) {
+  background-color: var(--accent-a3);
+  color: var(--accent-a11);
+}
+
+.x-badge:where([data-variant="soft"]):where([data-high-contrast]) {
+  color: var(--accent-12);
+}
+
+.x-badge:where([data-variant="outline"]) {
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  color: var(--accent-a11);
+}
+
+.x-badge:where([data-variant="outline"]):where([data-high-contrast]) {
+  box-shadow: inset 0 0 0 1px var(--accent-a7),
+      inset 0 0 0 1px var(--gray-a11);
+  color: var(--accent-12);
+}

package/dist/ui/button/button.css

@@ -441,3 +441,107 @@
   box-shadow: inset 0 0 0 1px var(--gray-a6);
   background-color: var(--gray-a2);
 }
+
+.x-button:where(:not([data-variant="ghost"])) :where(svg) {
+  opacity: .9;
+}
+
+.x-button:where([data-variant="ghost"]) {
+  padding: var(--button-ghost-padding-y) var(--button-ghost-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));
+}
+
+:where(.x-button:where([data-variant="ghost"])) > * {
+  --margin-top-override: initial;
+  --margin-right-override: initial;
+  --margin-bottom-override: initial;
+  --margin-left-override: initial;
+}
+
+.x-button:where([data-variant="ghost"]) {
+  margin: var(--margin-top-override) var(--margin-right-override)
+      var(--margin-bottom-override) var(--margin-left-override);
+}
+
+.x-button:where([data-size="1"]) {
+  gap: var(--space-1);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+}
+
+.x-button:where([data-size="1"]):where(:not([data-variant="ghost"])) {
+  padding-left: var(--space-2);
+  padding-right: var(--space-2);
+}
+
+.x-button:where([data-size="1"]):where([data-variant="ghost"]) {
+  gap: var(--space-1);
+  --button-ghost-padding-x: var(--space-2);
+  --button-ghost-padding-y: var(--space-1);
+}
+
+.x-button:where([data-size="2"]) {
+  gap: var(--space-2);
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+}
+
+.x-button:where([data-size="2"]):where(:not([data-variant="ghost"])) {
+  padding-left: var(--space-3);
+  padding-right: var(--space-3);
+}
+
+.x-button:where([data-size="2"]):where([data-variant="ghost"]) {
+  gap: var(--space-1);
+  --button-ghost-padding-x: var(--space-2);
+  --button-ghost-padding-y: var(--space-1);
+}
+
+.x-button:where([data-size="3"]) {
+  gap: var(--space-3);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  letter-spacing: var(--letter-spacing-3);
+}
+
+.x-button:where([data-size="3"]):where(:not([data-variant="ghost"])) {
+  padding-left: var(--space-4);
+  padding-right: var(--space-4);
+}
+
+.x-button:where([data-size="3"]):where([data-variant="ghost"]) {
+  gap: var(--space-2);
+  --button-ghost-padding-x: var(--space-3);
+  --button-ghost-padding-y: calc(var(--space-1) * 1.5);
+}
+
+.x-button:where([data-size="4"]) {
+  gap: var(--space-3);
+  font-size: var(--font-size-4);
+  line-height: var(--line-height-4);
+  letter-spacing: var(--letter-spacing-4);
+}
+
+.x-button:where([data-size="4"]):where(:not([data-variant="ghost"])) {
+  padding-left: var(--space-5);
+  padding-right: var(--space-5);
+}
+
+.x-button:where([data-size="4"]):where([data-variant="ghost"]) {
+  gap: var(--space-2);
+  --button-ghost-padding-x: var(--space-4);
+  --button-ghost-padding-y: var(--space-2);
+}
+
+.x-button:where(:not([data-variant="ghost"])) {
+  font-weight: var(--font-weight-medium);
+}

package/dist/ui/styles/scaling.css

@@ -1,3 +1,7 @@
+:where(:root) {
+  --scaling: 1;
+}
+
 :where([data-scaling="90%"]) {
   --scaling: .9;
 }

package/dist/ui/styles/unset.css

@@ -0,0 +1,197 @@
+.unset:where(body, blockquote, dl, dd, figure, p) {
+  margin: 0;
+}
+
+.unset:where(address, b, cite, code, dfn, em, i, kbd, q, samp, small, strong, var) {
+  font: unset;
+}
+
+.unset:where(h1, h2, h3, h4, h5, h6) {
+  font: unset;
+  margin: 0;
+}
+
+.unset:where(a) {
+  all: unset;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.unset:where(button, select, [type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"]) {
+  all: unset;
+  text-indent: initial;
+  -webkit-tap-highlight-color: transparent;
+  font-style: normal;
+  font-weight: normal;
+  display: inline-block;
+}
+
+.unset:where(label) {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.unset:where(select) {
+  text-align: start;
+  font-style: normal;
+  font-weight: normal;
+}
+
+.unset:where(textarea, input:not([type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"])) {
+  all: unset;
+  text-align: start;
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: stretch;
+  text-indent: initial;
+  -webkit-tap-highlight-color: transparent;
+  cursor: text;
+  white-space: pre-wrap;
+  font-style: normal;
+  font-weight: normal;
+  display: block;
+}
+
+.unset:where(:focus) {
+  outline: none;
+}
+
+.unset::placeholder {
+  color: unset;
+  opacity: unset;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.unset:where(table) {
+  all: unset;
+  text-indent: initial;
+  display: table;
+}
+
+.unset:where(caption) {
+  text-align: inherit;
+}
+
+.unset:where(td) {
+  padding: 0;
+}
+
+.unset:where(th) {
+  font-weight: unset;
+  text-align: inherit;
+  padding: 0;
+}
+
+.unset:where(abbr, acronym) {
+  text-decoration: none;
+}
+
+.unset:where(canvas, object, picture, summary) {
+  display: block;
+}
+
+.unset:where(del, s) {
+  -webkit-text-decoration: unset;
+  text-decoration: unset;
+}
+
+.unset:where(fieldset, hr) {
+  all: unset;
+  display: block;
+}
+
+.unset:where(legend) {
+  cursor: default;
+  border: none;
+  padding: 0;
+}
+
+.unset:where(li) {
+  text-align: unset;
+  display: block;
+}
+
+.unset:where(ol, ul) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.unset:where(iframe) {
+  width: -webkit-fill-available;
+  width: -moz-available;
+  border: none;
+  width: stretch;
+  display: block;
+}
+
+.unset:where(ins, u) {
+  text-decoration: none;
+}
+
+.unset:where(img) {
+  max-width: 100%;
+  display: block;
+}
+
+.unset:where(svg) {
+  flex-shrink: 0;
+  max-width: 100%;
+  display: block;
+}
+
+.unset:where(mark) {
+  all: unset;
+}
+
+.unset:where(pre) {
+  font: unset;
+  margin: unset;
+}
+
+.unset:where(q):before, .unset:where(q):after {
+  content: "";
+}
+
+.unset:where(sub, sup) {
+  font: unset;
+  vertical-align: unset;
+}
+
+.unset:where(details) ::marker {
+  content: none;
+}
+
+.unset:where(summary)::marker {
+  content: none;
+}
+
+.unset:where(video) {
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: stretch;
+  display: block;
+}
+
+.unset:where(:any-link) {
+  cursor: var(--cursor-link);
+}
+
+.unset:where(button) {
+  cursor: var(--cursor-button);
+}
+
+.unset:where(:disabled, [data-disabled]) {
+  cursor: var(--cursor-disabled);
+}
+
+.unset:where(input[type="checkbox"]) {
+  cursor: var(--cursor-checkbox);
+}
+
+.unset:where(input[type="radio"]) {
+  cursor: var(--cursor-radio);
+}
+
+.unset, .unset:before, .unset:after {
+  box-sizing: border-box;
+}

package/package.json

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