jvetrau-ds 0.1.45 → 0.2.2

package/index.d.ts

@@ -4,8 +4,6 @@
  */
 export { default as Button } from './components/button';
 export type { ButtonProps } from './components/button';
-export { default as ButtonIcon } from './components/button-icon';
-export type { ButtonIconProps } from './components/button-icon';
 export { default as Input } from './components/input';
 export type { InputProps } from './components/input';
 export { default as Textarea } from './components/textarea';

package/index.js

@@ -1,5 +1,4 @@
 export { default as Button } from './components/button';
-export { default as ButtonIcon } from './components/button-icon';
 export { default as Input } from './components/input';
 export { default as Textarea } from './components/textarea';
 export { default as Select } from './components/select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.1.45",
+  "version": "0.2.2",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -485,10 +485,14 @@
 /* src/components/button/button.css */
 .button {
   /* color */
-  --button-bg: var(--color-primary-2);
-  --button-color: var(--color-text-primary-2);
+  --button-bg: var(--color-control);
+  --button-color: var(--color-text-control);
   --button-bg-disabled: var(--color-bg-disabled);
-  --button-color-disabled: var(--color-text-disabled, var(--color-text-control));
+  --button-color-disabled: var(
+    --color-text-disabled,
+    var(--color-text-control)
+  );
+  --button-focus-color: var(--button-bg);
 
   background: var(--button-bg);
   color: var(--button-color);
@@ -498,7 +502,9 @@
   --button-font-weight: var(--font-control-weight);
   --button-font-size: var(--font-control);
   --button-line-height: var(--font-control-line);
-  --button-letter-spacing: var(--font-control-letter-spacing);
+  --button-letter-spacing: var(
+    --font-control-letter-spacing
+  );
 
   font-family: var(--button-font-family);
   font-size: var(--button-font-size);
@@ -510,7 +516,9 @@
   --button-gap: var(--margin-icon);
   --button-height: var(--size-control-height);
   --button-padding-x: var(--padding-control-button-horz);
-  --button-padding-icon-only: var(--padding-control-button-icon-horz);
+  --button-padding-icon-only: var(
+    --padding-control-button-icon-horz
+  );
 
   display: inline-flex;
   align-items: center;
@@ -537,7 +545,8 @@
 
   cursor: pointer;
   user-select: none;
-  transition: opacity var(--button-transition-duration) ease;
+  transition:
+    opacity var(--button-transition-duration) ease;
 }
 
 .button__icon {
@@ -559,102 +568,243 @@
 }
 
 .button:hover {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--button-opacity-hover);
 }
 
 .button:focus-visible {
-  outline: var(--button-focus-width) solid var(--button-bg);
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+  outline:
+    var(--button-focus-width)
+    solid
+    var(--button-focus-color);
   outline-offset: var(--button-focus-offset);
+
+  /* depth */
+
+  /* motion */
 }
 
 .button:active {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--button-opacity-active);
 }
 
 .button:disabled,
 .button--disabled {
+  /* color */
   background: var(--button-bg-disabled);
   color: var(--button-color-disabled);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--button-opacity-disabled);
   cursor: not-allowed;
 }
 
+/* Rank */
+
 .button--primary {
+  /* color */
   --button-bg: var(--color-primary-2);
   --button-color: var(--color-text-primary-2);
-}
+  --button-focus-color: var(--color-primary-2);
 
-.button--icon-only {
-  padding-inline: var(--button-padding-icon-only);
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
-/* src/components/button-icon/button-icon.css */
-.button-icon {
+.button--link {
   /* color */
-  --button-icon-bg: transparent;
-  --button-icon-color: var(--color-text);
-  --button-icon-bg-disabled: transparent;
-  --button-icon-color-disabled: var(--color-text-disabled);
-
-  background: var(--button-icon-bg);
-  color: var(--button-icon-color);
+  --button-bg: transparent;
+  --button-color: var(--color-link);
+  --button-focus-color: var(--color-link);
 
   /* typography */
 
   /* size */
-  --button-icon-size: 32px;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--button-icon-size);
-  height: var(--button-icon-size);
+  height: auto;
+  min-height: 0;
   padding: 0;
 
   /* border */
-  --button-icon-radius: var(--radius-control);
-  --button-icon-focus-width: var(--size-border-width-min);
-  --button-icon-focus-offset: 2px;
 
-  border: 0;
-  border-radius: var(--button-icon-radius);
+  /* depth */
+
+  /* motion */
+}
+
+.button--link:disabled,
+.button--link.button--disabled {
+  /* color */
+  background: transparent;
+
+  /* typography */
+
+  /* size */
+
+  /* border */
 
   /* depth */
 
   /* motion */
-  --button-icon-transition-duration: var(--motion-duration1);
-  --button-icon-opacity-hover: 0.8;
-  --button-icon-opacity-active: 0.7;
+}
 
-  cursor: pointer;
-  user-select: none;
-  transition: opacity var(--button-icon-transition-duration);
+/* Density */
+
+.button--compact {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  /*
+   * Compact presentation is intentionally left
+   * token-driven but visually unfinished.
+   *
+   * Add compact control dimensions when the
+   * corresponding semantic tokens are available.
+   */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
-.button-icon__icon {
+/* Mode */
+
+.button--toolbar {
+  /* color */
+  --button-bg: transparent;
+  --button-color: var(--color-text);
+  --button-focus-color: var(--color-text);
+
+  background: transparent;
+
+  /* typography */
+
   /* size */
-  flex-shrink: 0;
+  padding-inline: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
-.button-icon:hover {
-  opacity: var(--button-icon-opacity-hover);
+.button--toolbar:disabled,
+.button--toolbar.button--disabled {
+  /* color */
+  background: transparent;
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
-.button-icon:focus-visible {
-  outline: var(--button-icon-focus-width) solid currentColor;
-  outline-offset: var(--button-icon-focus-offset);
+/* State */
+
+.button--loading {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+  /*
+   * Loading behavior is already defined by the
+   * component contract:
+   * disabled + aria-busy.
+   *
+   * Spinner and visual treatment can be added
+   * later without changing the public API.
+   */
 }
 
-.button-icon:active {
-  opacity: var(--button-icon-opacity-active);
+/* Content */
+
+.button--icon-only {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  padding-inline: var(--button-padding-icon-only);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
-.button-icon:disabled,
-.button-icon--disabled {
-  background: var(--button-icon-bg-disabled);
-  color: var(--button-icon-color-disabled);
-  cursor: not-allowed;
-  opacity: 1;
+.button--toolbar.button--icon-only {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  padding-inline: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* src/components/calendar-month/calendar-month.css */
@@ -1091,7 +1241,7 @@
 /* src/components/checkbox/checkbox.css */
 .checkbox {
   /* color */
-  --checkbox-label-color: var(--color-text);
+  --checkbox-label-color: inherit;
 
   color: var(--checkbox-label-color);
 
@@ -1125,6 +1275,7 @@
 
 .checkbox__input {
   /* color */
+  accent-color: var(--color-primary-2);
 
   /* typography */
 
@@ -1162,11 +1313,33 @@
 }
 
 .checkbox--disabled {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--checkbox-opacity-disabled);
   cursor: not-allowed;
 }
 
 .checkbox__input:disabled {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   cursor: not-allowed;
 }
 
@@ -2226,6 +2399,23 @@
   /* motion */
 }
 
+.field__action {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .field--disabled {
   opacity: var(--field-opacity-disabled);
 }
@@ -2402,9 +2592,8 @@
 
   /* size */
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--flip-list-trigger-column-gap);
+  flex-direction: column;
+  align-items: stretch;
   width: 100%;
   min-width: 0;
   max-width: 100%;
@@ -2439,6 +2628,53 @@
   /* motion */
 }
 
+.flip-list__status {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  --flip-list-status-gap:
+    var(--margin-tag);
+
+  display: block;
+  align-self: flex-start;
+  min-width: 0;
+  max-width: 100%;
+  margin:
+    0
+    0
+    var(--flip-list-status-gap)
+    0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.flip-list__main {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--flip-list-trigger-column-gap);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .flip-list__title {
   /* color */
   color: inherit;
@@ -3346,7 +3582,7 @@
 /* src/components/radio/radio.css */
 .radio {
   /* color */
-  --radio-label-color: var(--color-text);
+  --radio-label-color: auto;
 
   color: var(--radio-label-color);
 
@@ -3386,6 +3622,7 @@
 
 .radio__input {
   /* color */
+  accent-color: var(--color-primary-2);
 
   /* typography */
 
@@ -3417,11 +3654,33 @@
 }
 
 .radio--disabled {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   opacity: var(--radio-opacity-disabled);
   cursor: not-allowed;
 }
 
 .radio__input:disabled {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
   cursor: not-allowed;
 }
 
@@ -3882,6 +4141,69 @@
   /* motion */
 }
 
+.tabs__label {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.tabs__count {
+  /* color */
+  color: var(--color-text);
+
+  /* typography */
+
+  /* size */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  margin-inline-start: var(--margin-icon);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.tabs__tab--selected .tabs__count {
+  /* color */
+  color: var(--tabs-tab-color);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.tabs__tab--selected .tabs__count {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/components/tag/tag.css */
 .tag {
   /* color */

package/themes/base/desktop.css

@@ -114,6 +114,7 @@
   --margin-menu: 20px;
   --margin-popup: 0px;
   --margin-tab: var(--margin-menu);
+  --margin-tag: 4px;
   --margin-tooltip: 0px;
   --motion-duration1: 0px;
   --padding-arrow: 0px;

package/themes/base/desktop.md

@@ -129,6 +129,7 @@
 | `margin/menu` | `float` | `20` |
 | `margin/popup` | `float` | `0` |
 | `margin/tab` | `float` | `20` |
+| `margin/tag` | `float` | `4` |
 | `margin/tooltip` | `float` | `0` |
 
 ## motion

package/themes/base/desktop.scoped.css

@@ -114,6 +114,7 @@
   --margin-menu: 20px;
   --margin-popup: 0px;
   --margin-tab: var(--margin-menu);
+  --margin-tag: 4px;
   --margin-tooltip: 0px;
   --motion-duration1: 0px;
   --padding-arrow: 0px;

package/themes/base/diagram.css

@@ -114,6 +114,7 @@
   --margin-menu: 20px;
   --margin-popup: 0px;
   --margin-tab: var(--margin-menu);
+  --margin-tag: 4px;
   --margin-tooltip: 0px;
   --motion-duration1: 0px;
   --padding-arrow: 0px;

package/themes/base/diagram.md

@@ -129,6 +129,7 @@
 | `margin/menu` | `float` | `20` |
 | `margin/popup` | `float` | `0` |
 | `margin/tab` | `float` | `20` |
+| `margin/tag` | `float` | `4` |
 | `margin/tooltip` | `float` | `0` |
 
 ## motion

package/themes/base/diagram.scoped.css

@@ -114,6 +114,7 @@
   --margin-menu: 20px;
   --margin-popup: 0px;
   --margin-tab: var(--margin-menu);
+  --margin-tag: 4px;
   --margin-tooltip: 0px;
   --motion-duration1: 0px;
   --padding-arrow: 0px;

package/themes/base/mobile.css

@@ -114,6 +114,7 @@
   --margin-menu: 20px;
   --margin-popup: 0px;
   --margin-tab: var(--margin-menu);
+  --margin-tag: 4px;
   --margin-tooltip: 0px;
   --motion-duration1: 0px;
   --padding-arrow: 0px;

package/themes/base/mobile.md

@@ -129,6 +129,7 @@
 | `margin/menu` | `float` | `20` |
 | `margin/popup` | `float` | `0` |
 | `margin/tab` | `float` | `20` |
+| `margin/tag` | `float` | `4` |
 | `margin/tooltip` | `float` | `0` |
 
 ## motion

package/themes/base/mobile.scoped.css

@@ -114,6 +114,7 @@
   --margin-menu: 20px;
   --margin-popup: 0px;
   --margin-tab: var(--margin-menu);
+  --margin-tag: 4px;
   --margin-tooltip: 0px;
   --motion-duration1: 0px;
   --padding-arrow: 0px;

package/themes/brandcopilot/desktop.css

@@ -114,6 +114,7 @@
   --margin-menu: 20px;
   --margin-popup: 0px;
   --margin-tab: var(--margin-menu);
+  --margin-tag: 4px;
   --margin-tooltip: 0px;
   --motion-duration1: 0px;
   --padding-arrow: 0px;