@exsto/ds 0.0.1-rc.17 → 0.0.1-rc.19

package/dist/styles.css

@@ -601,6 +601,10 @@
     right: var(--spacing);
   }
 
+  .right-1\.75 {
+    right: calc(var(--spacing) * 1.75);
+  }
+
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -633,10 +637,6 @@
     left: 0;
   }
 
-  .left-1\.5 {
-    left: calc(var(--spacing) * 1.5);
-  }
-
   .left-1\/2 {
     left: 50%;
   }
@@ -669,6 +669,10 @@
     z-index: 50;
   }
 
+  .z-60 {
+    z-index: 60;
+  }
+
   .z-100 {
     z-index: 100;
   }
@@ -739,10 +743,6 @@
     }
   }
 
-  .m-1 {
-    margin: var(--spacing);
-  }
-
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
@@ -823,6 +823,10 @@
     margin-top: auto;
   }
 
+  .mr-px {
+    margin-right: 1px;
+  }
+
   .-mb-4 {
     margin-bottom: calc(var(--spacing) * -4);
   }
@@ -1128,6 +1132,10 @@
     max-height: calc(var(--spacing) * 88);
   }
 
+  .max-h-\[var\(--popup-list-cap\,min\(16rem\,round\(down\,var\(--available-height\,100dvh\)_-_0\.5rem\,2rem\)\)\)\] {
+    max-height: var(--popup-list-cap, min(16rem, round(down, var(--available-height, 100dvh) - .5rem, 2rem)));
+  }
+
   .max-h-inherit {
     max-height: inherit;
   }
@@ -1220,6 +1228,10 @@
     width: calc(var(--spacing) * 5);
   }
 
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
+
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
@@ -1280,10 +1292,6 @@
     max-width: calc(100% - 2rem);
   }
 
-  .max-w-\[max\(24rem\,var\(--anchor-width\)\)\] {
-    max-width: max(24rem, var(--anchor-width));
-  }
-
   .max-w-\[max\(var\(--anchor-width\)\,min\(28rem\,var\(--available-width\)\)\)\] {
     max-width: max(var(--anchor-width), min(28rem, var(--available-width)));
   }
@@ -1304,10 +1312,6 @@
     max-width: var(--container-xs);
   }
 
-  .min-w-\(--anchor-width\) {
-    min-width: var(--anchor-width);
-  }
-
   .min-w-\(--cell-size\) {
     min-width: var(--cell-size);
   }
@@ -1332,10 +1336,6 @@
     min-width: calc(var(--spacing) * 32);
   }
 
-  .min-w-36 {
-    min-width: calc(var(--spacing) * 36);
-  }
-
   .min-w-40 {
     min-width: calc(var(--spacing) * 40);
   }
@@ -1348,12 +1348,8 @@
     min-width: 14ch;
   }
 
-  .min-w-\[96px\] {
-    min-width: 96px;
-  }
-
-  .min-w-\[var\(--anchor-width\)\] {
-    min-width: var(--anchor-width);
+  .min-w-\[max\(8rem\,var\(--anchor-width\)\)\] {
+    min-width: max(8rem, var(--anchor-width));
   }
 
   .flex-1 {
@@ -1567,6 +1563,10 @@
     cursor: default;
   }
 
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
   .cursor-pointer {
     cursor: pointer;
   }
@@ -1591,10 +1591,6 @@
     resize: none;
   }
 
-  .resize-y {
-    resize: vertical;
-  }
-
   .snap-x {
     scroll-snap-type: x var(--tw-scroll-snap-strictness);
   }
@@ -1799,6 +1795,10 @@
     overflow-x: hidden !important;
   }
 
+  .overflow-x-visible {
+    overflow-x: visible;
+  }
+
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -1984,8 +1984,12 @@
     }
   }
 
-  .border-input {
-    border-color: var(--input);
+  .border-control {
+    border-color: var(--control-border);
+  }
+
+  .border-destructive {
+    border-color: var(--destructive);
   }
 
   .border-muted-foreground {
@@ -2349,10 +2353,6 @@
     padding-right: var(--spacing);
   }
 
-  .pr-1\.5 {
-    padding-right: calc(var(--spacing) * 1.5);
-  }
-
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -2397,10 +2397,6 @@
     padding-left: calc(var(--spacing) * 4);
   }
 
-  .pl-7 {
-    padding-left: calc(var(--spacing) * 7);
-  }
-
   .text-center {
     text-align: center;
   }
@@ -2440,9 +2436,9 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 
-  .text-sm\/relaxed {
+  .text-sm\/6 {
     font-size: var(--text-sm);
-    line-height: var(--leading-relaxed);
+    line-height: calc(var(--spacing) * 6);
   }
 
   .text-xs {
@@ -2458,6 +2454,11 @@
     font-size: .625rem;
   }
 
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
+
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -2633,10 +2634,18 @@
     text-decoration-line: underline;
   }
 
+  .underline-offset-3 {
+    text-underline-offset: 3px;
+  }
+
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
 
+  .caret-transparent {
+    caret-color: #0000;
+  }
+
   .opacity-0 {
     opacity: 0;
   }
@@ -2721,6 +2730,16 @@
     --tw-ring-color: var(--card);
   }
 
+  .ring-destructive\/20 {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-destructive\/20 {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+
   .ring-foreground\/10 {
     --tw-ring-color: var(--foreground);
   }
@@ -3055,6 +3074,10 @@
     grid-column-start: 2;
   }
 
+  .group-data-highlighted\:text-foreground:is(:where(.group)[data-highlighted] *) {
+    color: var(--foreground);
+  }
+
   .group-data-indeterminate\/checkbox-indicator\:block:is(:where(.group\/checkbox-indicator)[data-indeterminate] *) {
     display: block;
   }
@@ -3300,6 +3323,11 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 
+  .group-data-\[size\=sm\]\/card\:leading-5:is(:where(.group\/card)[data-size="sm"] *) {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
+
   .group-data-\[size\=sm\]\/item\:size-8:is(:where(.group\/item)[data-size="sm"] *) {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -3561,6 +3589,14 @@
     background-color: var(--primary);
   }
 
+  .selection\:bg-transparent ::selection {
+    background-color: #0000;
+  }
+
+  .selection\:bg-transparent::selection {
+    background-color: #0000;
+  }
+
   .selection\:text-primary-foreground ::selection {
     color: var(--primary-foreground);
   }
@@ -3908,6 +3944,10 @@
     border-bottom-right-radius: var(--radius);
   }
 
+  .empty\:hidden:empty {
+    display: none;
+  }
+
   .empty\:p-0:empty {
     padding: 0;
   }
@@ -3961,6 +4001,16 @@
       }
     }
 
+    .hover\:bg-foreground\/4:hover {
+      background-color: var(--foreground);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-foreground\/4:hover {
+        background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
+      }
+    }
+
     .hover\:bg-foreground\/6:hover {
       background-color: var(--foreground);
     }
@@ -4048,6 +4098,16 @@
     background-color: var(--accent);
   }
 
+  .focus\:bg-foreground\/10:focus {
+    background-color: var(--foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus\:bg-foreground\/10:focus {
+      background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
+    }
+  }
+
   .focus\:bg-muted:focus {
     background-color: var(--muted);
   }
@@ -4435,48 +4495,48 @@
     background-color: var(--sidebar);
   }
 
-  .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:border-ring:has([data-slot="input-group-control"]:focus-visible) {
-    border-color: var(--ring);
+  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-destructive:has([data-slot][aria-invalid="true"]) {
+    border-color: var(--destructive);
   }
 
-  .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-3:has([data-slot="input-group-control"]:focus-visible) {
+  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-3:has([data-slot][aria-invalid="true"]) {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot="input-group-control"]:focus-visible) {
-    --tw-ring-color: var(--ring);
+  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid="true"]) {
+    --tw-ring-color: var(--destructive);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot="input-group-control"]:focus-visible) {
-      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid="true"]) {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
     }
   }
 
-  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-destructive:has([data-slot][aria-invalid="true"]) {
-    border-color: var(--destructive);
+  .has-\[button\]\:p-0:has(:is(button)) {
+    padding: 0;
   }
 
-  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-3:has([data-slot][aria-invalid="true"]) {
+  .has-\[input\:focus-visible\]\:border-ring:has(:is(input:focus-visible)) {
+    border-color: var(--ring);
+  }
+
+  .has-\[input\:focus-visible\]\:ring-3:has(:is(input:focus-visible)) {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid="true"]) {
-    --tw-ring-color: var(--destructive);
+  .has-\[input\:focus-visible\]\:ring-ring\/50:has(:is(input:focus-visible)) {
+    --tw-ring-color: var(--ring);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid="true"]) {
-      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    .has-\[input\:focus-visible\]\:ring-ring\/50:has(:is(input:focus-visible)) {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
     }
   }
 
-  .has-\[button\]\:p-0:has(:is(button)) {
-    padding: 0;
-  }
-
   .has-\[select\:disabled\]\:opacity-50:has(:is(select:disabled)) {
     opacity: .5;
   }
@@ -4715,6 +4775,20 @@
     opacity: 0;
   }
 
+  .data-dragging\:border-ring[data-dragging] {
+    border-color: var(--ring);
+  }
+
+  .data-dragging\:bg-foreground\/6[data-dragging] {
+    background-color: var(--foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .data-dragging\:bg-foreground\/6[data-dragging] {
+      background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
+    }
+  }
+
   .data-ending-style\:scale-90[data-ending-style] {
     --tw-scale-x: 90%;
     --tw-scale-y: 90%;
@@ -4743,6 +4817,10 @@
     opacity: 1;
   }
 
+  .data-has-overflow-x\:pb-\(--scroll-bar-reserve\)[data-has-overflow-x] {
+    padding-bottom: var(--scroll-bar-reserve);
+  }
+
   .data-highlighted\:bg-foreground\/6[data-highlighted] {
     background-color: var(--foreground);
   }
@@ -4813,10 +4891,6 @@
     border-color: var(--ring);
   }
 
-  .data-popup-open\:bg-accent[data-popup-open] {
-    background-color: var(--accent);
-  }
-
   .data-popup-open\:bg-foreground\/6[data-popup-open] {
     background-color: var(--foreground);
   }
@@ -4837,10 +4911,6 @@
     }
   }
 
-  .data-popup-open\:text-accent-foreground[data-popup-open] {
-    color: var(--accent-foreground);
-  }
-
   .data-popup-open\:ring-3[data-popup-open] {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5885,8 +5955,18 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .dark\:border-input:is(.dark *) {
-    border-color: var(--input);
+  .dark\:border-control:is(.dark *) {
+    border-color: var(--control-border);
+  }
+
+  .dark\:border-destructive\/50:is(.dark *) {
+    border-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:border-destructive\/50:is(.dark *) {
+      border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+    }
   }
 
   .dark\:bg-destructive\/15:is(.dark *) {
@@ -5975,6 +6055,16 @@
     color: var(--color-red-300);
   }
 
+  .dark\:ring-destructive\/40:is(.dark *) {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:ring-destructive\/40:is(.dark *) {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+    }
+  }
+
   .dark\:group-data-checked\/questionnaire-choice\:bg-primary:is(.dark *):is(:is(:where(.group\/questionnaire-choice):where([data-state="checked"]), :where(.group\/questionnaire-choice):where([data-checked]:not([data-checked="false"]))) *) {
     background-color: var(--primary);
   }
@@ -6510,8 +6600,8 @@
     background-color: var(--muted);
   }
 
-  .dark\:data-active\:border-input:is(.dark *):where([data-state="active"]), .dark\:data-active\:border-input:is(.dark *):where([data-active]:not([data-active="false"])) {
-    border-color: var(--input);
+  .dark\:data-active\:border-control:is(.dark *):where([data-state="active"]), .dark\:data-active\:border-control:is(.dark *):where([data-active]:not([data-active="false"])) {
+    border-color: var(--control-border);
   }
 
   .dark\:data-active\:bg-input\/30:is(.dark *):where([data-state="active"]), .dark\:data-active\:bg-input\/30:is(.dark *):where([data-active]:not([data-active="false"])) {
@@ -6702,6 +6792,11 @@
     pointer-events: none;
   }
 
+  .\[\&_svg\]\:size-3\.5 svg {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+
   .\[\&_svg\]\:size-4 svg {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
@@ -6750,6 +6845,12 @@
     border-bottom-width: 1px;
   }
 
+  @media (hover: hover) {
+    .\[\&_tr\]\:hover\:bg-transparent tr:hover {
+      background-color: #0000;
+    }
+  }
+
   .\[\&_tr\:last-child\]\:border-0 tr:last-child {
     border-style: var(--tw-border-style);
     border-width: 0;
@@ -6991,14 +7092,6 @@
     color: currentColor;
   }
 
-  :is(.focus\:\*\:\[svg\]\:text-accent-foreground:focus > *):is(svg) {
-    color: var(--accent-foreground);
-  }
-
-  :is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:text-destructive[data-variant="destructive"] > *):is(svg) {
-    color: var(--destructive);
-  }
-
   :is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:text-destructive\![data-variant="destructive"] > *):is(svg) {
     color: var(--destructive) !important;
   }
@@ -7500,7 +7593,7 @@
   --secondary: oklch(97% 0 0);
   --secondary-foreground: oklch(20.5% 0 0);
   --muted: oklch(97% 0 0);
-  --muted-foreground: oklch(55.6% 0 0);
+  --muted-foreground: oklch(54.5% 0 0);
   --accent: oklch(97% 0 0);
   --accent-foreground: oklch(20.5% 0 0);
   --destructive: oklch(50.5% .213 27.518);
@@ -7516,6 +7609,7 @@
   --info-ring: oklch(90.1% .058 230.902);
   --border: oklch(92.2% 0 0);
   --input: oklch(92.2% 0 0);
+  --control-border: oklch(66% 0 0);
   --ring: oklch(60% 0 0);
   --chart-1: oklch(64.6% .222 41.116);
   --chart-2: oklch(60% .118 184.704);
@@ -7585,6 +7679,7 @@
   --info-ring: oklch(44.3% .11 240.79);
   --border: oklch(100% 0 0 / .1);
   --input: oklch(100% 0 0 / .15);
+  --control-border: oklch(100% 0 0 / .35);
   --ring: oklch(55.6% 0 0);
   --chart-1: oklch(48.8% .243 264.376);
   --chart-2: oklch(69.6% .17 162.48);
@@ -7710,6 +7805,10 @@
   initial-value: 0;
 }
 
+[data-slot="scroll-area"] {
+  --scroll-bar-reserve: calc(var(--scroll-bar-size) + var(--scroll-bar-gap));
+}
+
 [data-slot="scroll-area-scrollbar"] {
   --scroll-bar-offset-top: calc(var(--scroll-bar-gap) + var(--scroll-bar-start));
   --scroll-bar-length: calc(100% - var(--scroll-bar-gap) * 2 - var(--scroll-bar-start));
@@ -7747,10 +7846,15 @@
   outline-style: solid;
 }
 
-[data-slot="input-group"] :focus-visible, :is([role="option"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"], [cmdk-item]):focus-visible, :is([data-slot="command-input-wrapper"], [data-slot="multi-select-content"]) :focus-visible, [data-slot="command-input-wrapper"] [data-slot="input-group"]:has(:focus-visible) {
+[data-slot="input-group"] :focus-visible, :is([role="option"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"], [cmdk-item]):focus-visible, :is([data-slot="command-input-wrapper"], [data-slot="multi-select-content"]) :focus-visible, [data-slot="command-input-wrapper"] [data-slot="input-group"]:has(:focus-visible), :is([data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="context-menu-content"], [data-slot="context-menu-sub-content"], [data-slot="menubar-content"], [data-slot="menubar-sub-content"], [data-slot="select-content"], [data-slot="combobox-content"], [data-slot="multi-select-content"], [data-slot="popover-content"], [data-slot="hover-card-content"]):focus-visible {
   outline-style: none;
 }
 
+[data-slot="scroll-area-viewport"]:focus-visible {
+  outline-offset: -1px;
+  outline-width: 1px;
+}
+
 :root {
   --motion-expand: .2s;
   --motion-collapse: .16s;

package/dist/theme.css

@@ -88,7 +88,8 @@
   --secondary-foreground: oklch(0.205 0 0);
 
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  /* Muted text: 4.5:1 on the page (white), a card and the muted surface (oklch 0.97). 0.556 was 4.35:1 on the latter. */
+  --muted-foreground: oklch(0.545 0 0);
 
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
@@ -110,6 +111,8 @@
 
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
+  /* The outline of a control (field, trigger, outline button): 3:1 on the page and on a card (WCAG 1.4.11). --input stays the fill. */
+  --control-border: oklch(0.66 0 0);
   --ring: oklch(0.6 0 0);
 
   --chart-1: oklch(0.646 0.222 41.116);
@@ -200,6 +203,7 @@
 
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
+  --control-border: oklch(1 0 0 / 35%);
   --ring: oklch(0.556 0 0);
 
   --chart-1: oklch(0.488 0.243 264.376);
@@ -279,6 +283,7 @@
   --color-info-ring: var(--info-ring);
   --color-border: var(--border);
   --color-input: var(--input);
+  --color-control: var(--control-border);
   --color-ring: var(--ring);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);

package/dist/time-field.js

@@ -0,0 +1,2 @@
+import { DEFAULT_TIME_FIELD_LABELS, EMPTY_TIME, TimeField, editSegment, formatTime, localeHourCycle, parseTime, rangeOf, stepValue, typeDigit } from "./ui/src/components/edyn/time-field/time-field.js";
+export { DEFAULT_TIME_FIELD_LABELS, EMPTY_TIME, TimeField, editSegment, formatTime, localeHourCycle, parseTime, rangeOf, stepValue, typeDigit };