@ctrl-ui/react 0.8.20 → 0.9.0

package/dist/styles/recipes/filter-bar.css

@@ -10,7 +10,7 @@
     --cui-filter-bar-padding-inline: calc(var(--spacing) * 2);
     --cui-filter-bar-font-size: var(--text-label);
     --cui-filter-bar-hover-background: var(--hover-fill);
-    --filter-bar-inline-sign: 1;
+    --_filter-bar-inline-sign: 1;
     gap: var(--cui-filter-bar-gap);
     border: 0;
     padding: 0;
@@ -18,7 +18,7 @@
   }
 
   :where([data-control-family="filter-bar"][data-slot="root"]:dir(rtl)) {
-    --filter-bar-inline-sign: -1;
+    --_filter-bar-inline-sign: -1;
   }
 
   :where([data-control-family="filter-bar"][data-slot="chip"]) {
@@ -68,7 +68,7 @@
 
   :where([data-control-family="filter-bar"][data-slot="exit"]) {
     pointer-events: none;
-    transform-origin: calc(50% - 50% * var(--filter-bar-inline-sign)) center;
+    transform-origin: calc(50% - 50% * var(--_filter-bar-inline-sign)) center;
     animation: cui-filter-chip-exit var(--duration-fast) var(--ease-standard) forwards;
   }
 
@@ -84,7 +84,7 @@
 @keyframes cui-filter-segment-enter {
   from {
     opacity: 0;
-    translate: calc(-4px * var(--filter-bar-inline-sign)) 0;
+    translate: calc(-4px * var(--_filter-bar-inline-sign)) 0;
   }
   to {
     opacity: 1;
@@ -95,7 +95,7 @@
 @keyframes cui-filter-chip-exit {
   to {
     opacity: 0;
-    translate: calc(-4px * var(--filter-bar-inline-sign)) 0;
+    translate: calc(-4px * var(--_filter-bar-inline-sign)) 0;
     scale: 0.97;
   }
 }
@@ -125,31 +125,31 @@
 }
 
 @property --cui-filter-bar-radius {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-filter-bar-height {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-filter-bar-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-filter-bar-padding-inline {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-filter-bar-font-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/flow.css

@@ -31,6 +31,7 @@
     --cui-flow-controls-border-color: var(--border);
     --cui-flow-controls-shadow: var(--shadow-sm);
     --xy-edge-stroke: var(--cui-flow-edge-stroke);
+    --xy-edge-stroke-selected: var(--cui-flow-selected-edge-stroke);
     --xy-connectionline-stroke: var(--cui-flow-edge-stroke);
     --xy-connectionline-stroke-width: var(--cui-flow-edge-size);
     --xy-selection-background-color: oklch(from var(--primary) l c h / 0.08);
@@ -123,7 +124,8 @@
     stroke-dasharray: 5 5;
   }
 
-  :where(.react-flow__edge.selected [data-control-family="flow"][data-slot="edge"]) {
+  :where(.react-flow__edge.selected [data-control-family="flow"][data-slot="edge"]),
+  :where(.react-flow__edge.selectable:focus-visible [data-control-family="flow"][data-slot="edge"]) {
     stroke: var(--cui-flow-selected-edge-stroke);
   }
 
@@ -168,7 +170,7 @@
 }
 
 @property --cui-flow-edge-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -221,7 +223,7 @@
 }
 
 @property --cui-flow-handle-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/gradient-editor.css

@@ -16,6 +16,14 @@
     --cui-gradient-editor-stop-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.4);
     --cui-gradient-editor-track-radius: 9999px;
   }
+  :where([data-control-family="gradient-editor"][data-slot="preview"]),
+  :where([data-control-family="gradient-editor"][data-slot="track"]) {
+    background-image: var(--_gradient-editor-image), repeating-conic-gradient(var(--border) 0 25%, transparent 0 50%);
+    background-size:
+      auto,
+      calc(var(--spacing) * 2.5) calc(var(--spacing) * 2.5);
+  }
+
   :where([data-control-family="gradient-editor"][data-slot="preview"]) {
     block-size: calc(var(--spacing) * 32);
     border-radius: var(--cui-gradient-editor-preview-radius);

package/dist/styles/recipes/icon-picker.css

@@ -2,8 +2,10 @@
   :where([data-control-family="icon-picker"][data-slot="root"]) {
     --cui-icon-picker-cell-size: calc(var(--spacing) * 10);
     --cui-icon-picker-cell-radius: var(--radius-control);
+    --cui-icon-picker-icon-size: calc(var(--spacing) * 4);
     --cui-icon-picker-foreground: var(--foreground);
-    --cui-icon-picker-active-background: var(--accent);
+    --cui-icon-picker-cell-hover-background: var(--accent);
+    --cui-icon-picker-cell-pressed-background: var(--accent);
     inline-size: calc(var(--_icon-picker-columns) * var(--cui-icon-picker-cell-size) + var(--spacing) * 4);
     max-inline-size: 100%;
     color: var(--cui-icon-picker-foreground);
@@ -11,9 +13,6 @@
   :where([data-control-family="icon-picker"][data-slot="content"]) {
     padding: calc(var(--spacing) * 2);
     max-block-size: 16rem;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    scrollbar-width: thin;
   }
   :where([data-control-family="icon-picker"][data-slot="grid"]) {
     display: grid;
@@ -30,13 +29,31 @@
     color: inherit;
     cursor: pointer;
     transition: background-color var(--duration-fast) var(--ease-standard);
+    animation: icon-picker-icon-enter var(--duration-slow) var(--ease-emphasized) both;
   }
-  :where([data-control-family="icon-picker"][data-slot="icon"]:is(:hover, [aria-pressed="true"])) {
-    background: var(--cui-icon-picker-active-background);
+  @supports (order: sibling-index()) {
+    :where([data-control-family="icon-picker"][data-slot="icon"]) {
+      --_icon-picker-cell-index: calc(sibling-index() - 1);
+      animation-delay: calc(
+        min(
+          mod(var(--_icon-picker-cell-index), var(--_icon-picker-columns)) +
+          round(down, var(--_icon-picker-cell-index) / var(--_icon-picker-columns)),
+          16
+        ) *
+        var(--duration-fast) /
+        8
+      );
+    }
+  }
+  :where([data-control-family="icon-picker"][data-slot="icon"]:hover) {
+    background: var(--cui-icon-picker-cell-hover-background);
+  }
+  :where([data-control-family="icon-picker"][data-slot="icon"][aria-pressed="true"]) {
+    background: var(--cui-icon-picker-cell-pressed-background);
   }
   :where([data-control-family="icon-picker"][data-slot="icon"] svg) {
-    inline-size: calc(var(--spacing) * 5);
-    block-size: calc(var(--spacing) * 5);
+    inline-size: var(--cui-icon-picker-icon-size);
+    block-size: var(--cui-icon-picker-icon-size);
   }
   :where([data-control-family="icon-picker"][data-slot="colors"]) {
     display: flex;
@@ -80,7 +97,7 @@
   }
 }
 @property --cui-icon-picker-cell-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -89,13 +106,31 @@
   inherits: true;
   initial-value: 0px;
 }
+@property --cui-icon-picker-icon-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
 @property --cui-icon-picker-foreground {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
-@property --cui-icon-picker-active-background {
+@property --cui-icon-picker-cell-hover-background {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-icon-picker-cell-pressed-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@keyframes icon-picker-icon-enter {
+  from {
+    opacity: 0;
+    scale: 0.5;
+  }
+}

package/dist/styles/recipes/inline-attachment.css

@@ -155,7 +155,7 @@
 }
 
 @property --cui-inline-attachment-radius {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -173,13 +173,13 @@
 }
 
 @property --cui-inline-attachment-padding {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-inline-attachment-document-padding {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -206,7 +206,7 @@
 }
 
 @property --cui-inline-attachment-content-radius {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/inline-citation.css

@@ -150,7 +150,7 @@
 }
 
 @property --cui-inline-citation-trigger-radius {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -204,7 +204,7 @@
 }
 
 @property --cui-inline-citation-quote-radius {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/item.css

@@ -118,7 +118,7 @@
 }
 
 @property --cui-item-hover-background {
-  syntax: "*";
+  syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
@@ -142,19 +142,19 @@
 }
 
 @property --cui-item-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-item-padding-block {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-item-padding-inline {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/markdown-editor.css

@@ -33,13 +33,13 @@
     white-space: pre-wrap;
     outline: none;
   }
-  :where([data-control-family="markdown-editor"][data-slot="root"]:has(.tiptap:focus-visible, textarea:focus-visible)) {
-    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
-    outline-offset: var(--focus-ring-offset);
+  :where([data-control-family="markdown-editor"][data-slot="toolbar"]) {
+    min-inline-size: 0;
+    border-block-end: var(--cui-markdown-editor-border-width) solid var(--cui-markdown-editor-border-color);
   }
-  :where([data-control-family="markdown-editor"] > [data-control-family="toolbar"]) {
+  :where([data-control-family="markdown-editor"][data-slot="toolbar"] [data-control-family="toolbar"][data-slot="root"]) {
     padding-inline: var(--cui-markdown-editor-padding);
-    border-block-end: var(--cui-markdown-editor-border-width) solid var(--cui-markdown-editor-border-color);
+    white-space: nowrap;
   }
   :where([data-control-family="markdown-editor"] [data-markdown-drag-handle]) {
     position: absolute;
@@ -77,17 +77,11 @@
     float: inline-start;
     block-size: 0;
   }
-  :where([data-control-family="markdown-editor"] .tiptap h1) {
-    font-size: var(--text-heading-2);
-    font-weight: var(--font-weight-semibold);
+  :where([data-control-family="markdown-editor"] .tiptap :is(h1, h2, h3, h4, h5, h6)) {
+    margin-block: var(--cui-markdown-editor-gap) 0;
   }
-  :where([data-control-family="markdown-editor"] .tiptap h2) {
-    font-size: var(--text-heading-3);
-    font-weight: var(--font-weight-semibold);
-  }
-  :where([data-control-family="markdown-editor"] .tiptap :is(h3, h4, h5, h6)) {
-    font-size: var(--text-heading-4);
-    font-weight: var(--font-weight-semibold);
+  :where([data-control-family="markdown-editor"] .tiptap > :first-child) {
+    margin-block-start: 0;
   }
   :where([data-control-family="markdown-editor"] .tiptap strong) {
     font-weight: var(--font-weight-semibold);
@@ -114,12 +108,18 @@
     list-style: none;
     padding-inline-start: 0;
   }
-  :where([data-control-family="markdown-editor"] .tiptap li[data-type="taskItem"]) {
+  :where([data-control-family="markdown-editor"] .tiptap [data-slot="task-item"]) {
     display: flex;
-    align-items: baseline;
+    align-items: flex-start;
     gap: var(--cui-markdown-editor-gap);
   }
-  :where([data-control-family="markdown-editor"] .tiptap li[data-type="taskItem"] > div) {
+  :where([data-control-family="markdown-editor"] .tiptap [data-slot="task-checkbox"]) {
+    display: inline-flex;
+    align-items: center;
+    block-size: 1lh;
+    flex-shrink: 0;
+  }
+  :where([data-control-family="markdown-editor"] .tiptap [data-slot="task-content"]) {
     flex: 1;
     min-inline-size: 0;
   }
@@ -144,7 +144,18 @@
     border-radius: var(--radius-sm);
   }
   :where([data-control-family="markdown-editor"] .tiptap .ProseMirror-selectednode) {
-    outline: 2px solid var(--ring);
+    outline: none;
+  }
+  :where([data-control-family="markdown-editor"] [data-markdown-drag-preview]) {
+    position: fixed;
+    inset: -10000px auto auto -10000px;
+    min-block-size: 0;
+    max-block-size: calc(var(--spacing) * 24);
+    padding: 0;
+    overflow: hidden;
+    contain: layout paint;
+    background: transparent;
+    pointer-events: none;
   }
   :where([data-control-family="markdown-editor"] .tiptap [data-image-upload]) {
     padding: var(--cui-markdown-editor-padding);
@@ -186,31 +197,31 @@
 }
 
 @property --cui-markdown-editor-padding {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-markdown-editor-gutter-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-markdown-editor-min-height {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-markdown-editor-max-height {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-markdown-editor-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/markdown.css

@@ -118,30 +118,6 @@
     margin-block: calc(var(--spacing) * 5) calc(var(--spacing) * 2);
   }
 
-  :where([data-control-family="markdown"]:is([data-slot="h4"], [data-slot="h5"], [data-slot="h6"])) {
-    font-weight: var(--font-weight-semibold);
-    font-size: var(--text-body);
-    line-height: var(--leading-tight);
-  }
-
-  :where([data-control-family="markdown"][data-slot="h3"]) {
-    font-weight: var(--text-heading-4--font-weight);
-    font-size: var(--text-heading-4);
-    line-height: var(--text-heading-4--line-height);
-  }
-
-  :where([data-control-family="markdown"][data-slot="h2"]) {
-    font-weight: var(--text-heading-3--font-weight);
-    font-size: var(--text-heading-3);
-    line-height: var(--text-heading-3--line-height);
-  }
-
-  :where([data-control-family="markdown"][data-slot="h1"]) {
-    font-weight: var(--text-heading-2--font-weight);
-    font-size: var(--text-heading-2);
-    line-height: var(--text-heading-2--line-height);
-  }
-
   :where([data-control-family="markdown"][data-slot="h1"]),
   :where([data-control-family="markdown"][data-slot="h2"]) {
     margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 3);
@@ -178,6 +154,26 @@
     margin-block-start: calc(var(--spacing) * 1);
   }
 
+  :where([data-control-family="markdown"][data-slot="unordered-list"].contains-task-list) {
+    padding-inline-start: 0;
+  }
+
+  :where([data-control-family="markdown"][data-slot="list-item"].task-list-item) {
+    list-style-type: none;
+  }
+
+  :where([data-control-family="markdown"][data-slot="unordered-list"].contains-task-list > li:not(.task-list-item)) {
+    margin-inline-start: calc(var(--spacing) * 6);
+  }
+
+  :where(
+    [data-control-family="markdown"][data-slot="list-item"].task-list-item
+      [data-control-family="choice"][data-choice-kind="checkbox"][data-slot="root"]
+  ) {
+    vertical-align: middle;
+    margin-inline-end: calc(var(--spacing) * 2);
+  }
+
   :where([data-control-family="markdown"][data-slot="table-scroll"]) {
     margin-block: calc(var(--spacing) * 4);
   }
@@ -307,7 +303,7 @@
 }
 
 @property --cui-markdown-font-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -319,13 +315,13 @@
 }
 
 @property --cui-markdown-flow-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-markdown-heading-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/page-layout.css

@@ -174,65 +174,67 @@
 }
 
 @property --cui-page-layout-article-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-page-layout-aside-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-page-layout-padding-inline {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-page-layout-padding-block {
-  syntax: "*";
+  syntax: "<length-percentage>+";
   inherits: true;
+  initial-value: 0px;
 }
 
 @property --cui-page-layout-column-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-page-layout-header-start-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-page-layout-header-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-page-layout-header-column-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-page-layout-header-row-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
 @property --cui-page-layout-size {
-  syntax: "*";
+  syntax: "<length-percentage> | none";
   inherits: true;
+  initial-value: none;
 }
 
 @property --cui-page-layout-sticky-gap {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }

package/dist/styles/recipes/popup-controls.css

@@ -183,7 +183,7 @@
 }
 
 @property --cui-popup-title-font-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -197,7 +197,7 @@
 @property --cui-popup-title-line-height {
   syntax: "<number>";
   inherits: true;
-  initial-value: 1;
+  initial-value: 1.5;
 }
 
 @property --cui-popup-title-letter-spacing {

package/dist/styles/recipes/popup-lists.css

@@ -188,7 +188,7 @@
     padding: var(--_popup-bar-padding);
     gap: calc(var(--spacing) * 0.5);
     --cui-popup-background: var(--card);
-    --cui-popup-shadow: var(--shadow-xs);
+    --cui-popup-shadow: var(--shadow-sm);
   }
 
   :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="list"]) {
@@ -277,7 +277,7 @@
 }
 
 @property --cui-popup-label-font-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
@@ -307,7 +307,7 @@
 }
 
 @property --cui-popup-shortcut-font-size {
-  syntax: "<length>";
+  syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }