@cratis/components 4.14.3 → 4.15.0

package/dist/esm/styles.PivotViewer.css

@@ -123,7 +123,8 @@
     box-shadow: inset 0 1px 0 var(--cratis-surface-border);
 }
 
-.pv-search input:focus {
+.pv-search input:focus,
+.pv-filter-group-search input:focus {
     outline: none;
     border-color: var(--cratis-primary-color);
     box-shadow: var(--cratis-focus-ring);
@@ -143,12 +144,6 @@
     font-size: 0.85rem;
 }
 
-.pv-filter-group-search input:focus {
-    outline: none;
-    border-color: var(--cratis-primary-color);
-    box-shadow: var(--cratis-focus-ring);
-}
-
 /* Reusable checkbox/radio option list (CheckboxListFilter) */
 .pv-option-list {
     position: relative;
@@ -666,7 +661,8 @@
 }
 
 .pv-filter-button.active,
-.pv-filter-button:hover {
+.pv-filter-button:hover,
+.pv-filter-icon-button.active {
     background: var(--cratis-surface-hover);
     box-shadow: var(--cratis-focus-ring);
 }
@@ -694,11 +690,6 @@
     background: var(--cratis-surface-hover);
 }
 
-.pv-filter-icon-button.active {
-    background: var(--cratis-surface-hover);
-    box-shadow: var(--cratis-focus-ring);
-}
-
 .pv-filter-badge {
     position: absolute;
     top: -4px;
@@ -1085,7 +1076,8 @@
     background: var(--cratis-highlight-bg);
 }
 
-.pv-axis-label:focus-visible {
+.pv-axis-label:focus-visible,
+.pv-card:focus-visible {
     outline: none;
     border-color: var(--cratis-primary-color);
     box-shadow: var(--cratis-focus-ring);
@@ -1215,12 +1207,6 @@
     transition: border-color 160ms ease;
 }
 
-.pv-card:focus-visible {
-    outline: none;
-    border-color: var(--cratis-primary-color);
-    box-shadow: var(--cratis-focus-ring);
-}
-
 .pv-card.selected {
     border-color: var(--cratis-primary-color);
     box-shadow:
@@ -1552,6 +1538,18 @@
   min-height: 400px;
 }
 
+.pv-loading__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .pv-spinner {
   width: 80px;
   height: 80px;

package/dist/esm/styles.SchemaEditor.css

@@ -322,7 +322,9 @@
     box-shadow: var(--cratis-focus-ring);
 }
 .cratis-toggle-group[data-disabled],
-.cratis-tabs[data-disabled] {
+.cratis-tabs[data-disabled],
+.cratis-toggle-group__option[data-disabled],
+.cratis-tabs__tab[data-disabled] {
     cursor: not-allowed;
     opacity: var(--cratis-disabled-opacity);
 }
@@ -361,10 +363,6 @@
     box-shadow: var(--cratis-shadow-card, none);
     font-weight: 600;
 }
-.cratis-toggle-group__option[data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--cratis-disabled-opacity);
-}
 .cratis-toggle-group__icon {
     display: inline-flex;
 }
@@ -395,10 +393,6 @@
     color: var(--cratis-text-color);
     font-weight: 600;
 }
-.cratis-tabs__tab[data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--cratis-disabled-opacity);
-}
 .cratis-tabs__panel {
     padding: 0.75rem 0;
     outline: none;
@@ -764,7 +758,8 @@
 .cratis-number-input[data-invalid='true'] .cratis-number-input__group {
     border-color: var(--cratis-red-500);
 }
-.cratis-number-input[data-disabled='true'] {
+.cratis-number-input[data-disabled='true'],
+.cratis-number-input__step:disabled {
     cursor: not-allowed;
     opacity: var(--cratis-disabled-opacity);
 }
@@ -826,10 +821,6 @@
     outline: 2px solid var(--cratis-primary-color);
     outline-offset: -3px;
 }
-.cratis-number-input__step:disabled {
-    cursor: not-allowed;
-    opacity: var(--cratis-disabled-opacity);
-}
 .cratis-number-input__description,
 .cratis-number-input__error {
     display: block;
@@ -910,7 +901,8 @@
     background: var(--cratis-surface-100);
 }
 .cratis-text-input:disabled,
-.cratis-text-area:disabled {
+.cratis-text-area:disabled,
+.cratis-choice[data-disabled='true'] {
     cursor: not-allowed;
     opacity: var(--cratis-disabled-opacity);
 }
@@ -927,10 +919,6 @@
     color: var(--cratis-text-color);
     cursor: pointer;
 }
-.cratis-choice[data-disabled='true'] {
-    cursor: not-allowed;
-    opacity: var(--cratis-disabled-opacity);
-}
 .cratis-choice[data-readonly='true']:not([data-disabled='true']) {
     cursor: default;
 }
@@ -1284,7 +1272,9 @@
     background: var(--cratis-highlight-bg);
     color: var(--cratis-highlight-text-color);
 }
-.cratis-datatable__empty-cell {
+.cratis-datatable__empty-cell,
+.cratis-datatable__loading-cell,
+.cratis-datatable__failure-cell {
     padding: 2rem 1rem;
     color: var(--cratis-text-color-secondary);
     text-align: center;

package/dist/esm/styles.Toolbar.css

@@ -322,7 +322,9 @@
     box-shadow: var(--cratis-focus-ring);
 }
 .cratis-toggle-group[data-disabled],
-.cratis-tabs[data-disabled] {
+.cratis-tabs[data-disabled],
+.cratis-toggle-group__option[data-disabled],
+.cratis-tabs__tab[data-disabled] {
     cursor: not-allowed;
     opacity: var(--cratis-disabled-opacity);
 }
@@ -361,10 +363,6 @@
     box-shadow: var(--cratis-shadow-card, none);
     font-weight: 600;
 }
-.cratis-toggle-group__option[data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--cratis-disabled-opacity);
-}
 .cratis-toggle-group__icon {
     display: inline-flex;
 }
@@ -395,10 +393,6 @@
     color: var(--cratis-text-color);
     font-weight: 600;
 }
-.cratis-tabs__tab[data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--cratis-disabled-opacity);
-}
 .cratis-tabs__panel {
     padding: 0.75rem 0;
     outline: none;
@@ -764,7 +758,8 @@
 .cratis-number-input[data-invalid='true'] .cratis-number-input__group {
     border-color: var(--cratis-red-500);
 }
-.cratis-number-input[data-disabled='true'] {
+.cratis-number-input[data-disabled='true'],
+.cratis-number-input__step:disabled {
     cursor: not-allowed;
     opacity: var(--cratis-disabled-opacity);
 }
@@ -826,10 +821,6 @@
     outline: 2px solid var(--cratis-primary-color);
     outline-offset: -3px;
 }
-.cratis-number-input__step:disabled {
-    cursor: not-allowed;
-    opacity: var(--cratis-disabled-opacity);
-}
 .cratis-number-input__description,
 .cratis-number-input__error {
     display: block;
@@ -910,7 +901,8 @@
     background: var(--cratis-surface-100);
 }
 .cratis-text-input:disabled,
-.cratis-text-area:disabled {
+.cratis-text-area:disabled,
+.cratis-choice[data-disabled='true'] {
     cursor: not-allowed;
     opacity: var(--cratis-disabled-opacity);
 }
@@ -927,10 +919,6 @@
     color: var(--cratis-text-color);
     cursor: pointer;
 }
-.cratis-choice[data-disabled='true'] {
-    cursor: not-allowed;
-    opacity: var(--cratis-disabled-opacity);
-}
 .cratis-choice[data-readonly='true']:not([data-disabled='true']) {
     cursor: default;
 }
@@ -1227,7 +1215,8 @@
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
 /* ── Toolbar container ───────────────────────────────────────────────────── */
-.toolbar {
+.toolbar,
+.toolbar-group {
     background: var(--cratis-surface-card);
     border: 1px solid var(--cratis-surface-border);
     box-shadow: var(--cratis-shadow-overlay);
@@ -1282,17 +1271,10 @@
     white-space: nowrap;
 }
 
-/* ── Toolbar section (context switching) ────────────────────────────────── */
-
-/*
- * The section is a fixed-size container that transitions smoothly between
- * the dimensions required by each context.
- * Overflow stays visible in the settled state so absolutely-positioned
- * children (e.g. fan-out panels) can extend beyond the section's bounds.
- * During a context resize transition, a temporary modifier clips incoming
- * content so buttons do not float outside the current toolbar bounds.
- */
-.toolbar-section {
+/* Context sections and group slots resize alike. Only transitioning modifiers clip contents;
+   settled panels can extend beyond the section bounds. */
+.toolbar-section,
+.toolbar-slot-section {
     position: relative;
     transition:
         width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
@@ -1517,33 +1499,7 @@
     gap: 0.5rem;
 }
 
-/*
- * Each ToolbarGroup is a self-contained pill that matches the visual style
- * of a standalone Toolbar.
- */
-.toolbar-group {
-    background: var(--cratis-surface-card);
-    border: 1px solid var(--cratis-surface-border);
-    box-shadow: var(--cratis-shadow-overlay);
-}
-
-/* ── Toolbar slot transition (ToolbarGroup slot content) ─────────────────── */
-
-/*
- * Size-morphing container for slot content inside a ToolbarGroup or ToolbarLayout.
- * Mirrors the .toolbar-section transition parameters for visual consistency —
- * the container resizes smoothly while content cross-fades.
- * Overflow stays visible in the settled state so absolutely-positioned children
- * (fan-out and folder panels, and the hover tooltips inside them) can escape the
- * section's bounds; it is only clipped while outgoing content is fading out, so
- * that content does not bleed past the container mid-transition.
- */
-.toolbar-slot-section {
-    position: relative;
-    transition:
-        width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-        height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-}
+/* ToolbarGroup slots use the section transition above. */
 
 .toolbar-slot-section--transitioning {
     overflow: hidden;

package/dist/esm/styles.css

@@ -665,25 +665,8 @@
     flex-shrink: 0;
 }
 
-/* ── Canvas control icon button ──────────────────────────────────────────── */
-.canvas-controls-icon-btn {
-    color: var(--cratis-text-color-secondary);
-    background: transparent;
-    border: none;
-    transition: background 0.15s, color 0.15s;
-}
-
-.canvas-controls-icon-btn:hover {
-    background: var(--cratis-surface-100);
-    color: var(--cratis-text-color);
-}
-
-.canvas-controls-icon-btn--active {
-    background: var(--cratis-surface-100);
-    color: var(--cratis-text-color);
-}
-
-/* ── Canvas control zoom percentage button ───────────────────────────────── */
+/* ── Canvas control buttons ──────────────────────────────────────────────── */
+.canvas-controls-icon-btn,
 .canvas-controls-zoom-btn {
     color: var(--cratis-text-color-secondary);
     background: transparent;
@@ -691,6 +674,8 @@
     transition: background 0.15s, color 0.15s;
 }
 
+.canvas-controls-icon-btn:hover,
+.canvas-controls-icon-btn--active,
 .canvas-controls-zoom-btn:hover {
     background: var(--cratis-surface-100);
     color: var(--cratis-text-color);
@@ -2430,6 +2415,10 @@
     cursor: not-allowed;
     opacity: var(--cratis-disabled-opacity);
 }
+.cratis-choice-field:has(.cratis-choice-field__native:disabled) {
+    cursor: not-allowed;
+    opacity: var(--cratis-disabled-opacity);
+}
 .cratis-field-input[data-invalid='true'],
 .cratis-field-input[aria-invalid='true'] {
     border-color: var(--cratis-red-500);
@@ -2465,7 +2454,9 @@
 .cratis-password-field__toggle:hover {
     background: var(--cratis-surface-hover);
 }
-.cratis-password-field__toggle:focus-visible {
+.cratis-password-field__toggle:focus-visible,
+.cratis-slider-field__input:focus-visible,
+.cratis-color-field__input:focus-visible {
     outline: none;
     box-shadow: var(--cratis-focus-ring);
 }
@@ -2477,10 +2468,6 @@
     gap: 0.5rem;
     cursor: pointer;
 }
-.cratis-choice-field:has(.cratis-choice-field__native:disabled) {
-    cursor: not-allowed;
-    opacity: var(--cratis-disabled-opacity);
-}
 .cratis-choice-field__native {
     position: absolute;
     width: 1px;
@@ -2592,10 +2579,6 @@
     width: 100%;
     accent-color: var(--cratis-primary-color);
 }
-.cratis-slider-field__input:focus-visible {
-    outline: none;
-    box-shadow: var(--cratis-focus-ring);
-}
 .cratis-slider-field__value {
     min-width: 2.5rem;
     text-align: end;
@@ -2665,10 +2648,6 @@
     border-radius: var(--cratis-border-radius);
     background: var(--cratis-control-background);
 }
-.cratis-color-field__input:focus-visible {
-    outline: none;
-    box-shadow: var(--cratis-focus-ring);
-}
 .cratis-color-field__value {
     font-family: ui-monospace, monospace;
 }
@@ -3035,7 +3014,9 @@
     box-shadow: var(--cratis-focus-ring);
 }
 .cratis-toggle-group[data-disabled],
-.cratis-tabs[data-disabled] {
+.cratis-tabs[data-disabled],
+.cratis-toggle-group__option[data-disabled],
+.cratis-tabs__tab[data-disabled] {
     cursor: not-allowed;
     opacity: var(--cratis-disabled-opacity);
 }
@@ -3074,10 +3055,6 @@
     box-shadow: var(--cratis-shadow-card, none);
     font-weight: 600;
 }
-.cratis-toggle-group__option[data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--cratis-disabled-opacity);
-}
 .cratis-toggle-group__icon {
     display: inline-flex;
 }
@@ -3108,10 +3085,6 @@
     color: var(--cratis-text-color);
     font-weight: 600;
 }
-.cratis-tabs__tab[data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--cratis-disabled-opacity);
-}
 .cratis-tabs__panel {
     padding: 0.75rem 0;
     outline: none;
@@ -3477,7 +3450,8 @@
 .cratis-number-input[data-invalid='true'] .cratis-number-input__group {
     border-color: var(--cratis-red-500);
 }
-.cratis-number-input[data-disabled='true'] {
+.cratis-number-input[data-disabled='true'],
+.cratis-number-input__step:disabled {
     cursor: not-allowed;
     opacity: var(--cratis-disabled-opacity);
 }
@@ -3539,10 +3513,6 @@
     outline: 2px solid var(--cratis-primary-color);
     outline-offset: -3px;
 }
-.cratis-number-input__step:disabled {
-    cursor: not-allowed;
-    opacity: var(--cratis-disabled-opacity);
-}
 .cratis-number-input__description,
 .cratis-number-input__error {
     display: block;
@@ -3623,7 +3593,8 @@
     background: var(--cratis-surface-100);
 }
 .cratis-text-input:disabled,
-.cratis-text-area:disabled {
+.cratis-text-area:disabled,
+.cratis-choice[data-disabled='true'] {
     cursor: not-allowed;
     opacity: var(--cratis-disabled-opacity);
 }
@@ -3640,10 +3611,6 @@
     color: var(--cratis-text-color);
     cursor: pointer;
 }
-.cratis-choice[data-disabled='true'] {
-    cursor: not-allowed;
-    opacity: var(--cratis-disabled-opacity);
-}
 .cratis-choice[data-readonly='true']:not([data-disabled='true']) {
     cursor: default;
 }
@@ -3997,7 +3964,9 @@
     background: var(--cratis-highlight-bg);
     color: var(--cratis-highlight-text-color);
 }
-.cratis-datatable__empty-cell {
+.cratis-datatable__empty-cell,
+.cratis-datatable__loading-cell,
+.cratis-datatable__failure-cell {
     padding: 2rem 1rem;
     color: var(--cratis-text-color-secondary);
     text-align: center;
@@ -4846,7 +4815,8 @@
     box-shadow: inset 0 1px 0 var(--cratis-surface-border);
 }
 
-.pv-search input:focus {
+.pv-search input:focus,
+.pv-filter-group-search input:focus {
     outline: none;
     border-color: var(--cratis-primary-color);
     box-shadow: var(--cratis-focus-ring);
@@ -4866,12 +4836,6 @@
     font-size: 0.85rem;
 }
 
-.pv-filter-group-search input:focus {
-    outline: none;
-    border-color: var(--cratis-primary-color);
-    box-shadow: var(--cratis-focus-ring);
-}
-
 /* Reusable checkbox/radio option list (CheckboxListFilter) */
 .pv-option-list {
     position: relative;
@@ -5534,7 +5498,8 @@
 }
 
 .pv-filter-button.active,
-.pv-filter-button:hover {
+.pv-filter-button:hover,
+.pv-filter-icon-button.active {
     background: var(--cratis-surface-hover);
     box-shadow: var(--cratis-focus-ring);
 }
@@ -5562,11 +5527,6 @@
     background: var(--cratis-surface-hover);
 }
 
-.pv-filter-icon-button.active {
-    background: var(--cratis-surface-hover);
-    box-shadow: var(--cratis-focus-ring);
-}
-
 .pv-filter-badge {
     position: absolute;
     top: -4px;
@@ -5953,7 +5913,8 @@
     background: var(--cratis-highlight-bg);
 }
 
-.pv-axis-label:focus-visible {
+.pv-axis-label:focus-visible,
+.pv-card:focus-visible {
     outline: none;
     border-color: var(--cratis-primary-color);
     box-shadow: var(--cratis-focus-ring);
@@ -6083,12 +6044,6 @@
     transition: border-color 160ms ease;
 }
 
-.pv-card:focus-visible {
-    outline: none;
-    border-color: var(--cratis-primary-color);
-    box-shadow: var(--cratis-focus-ring);
-}
-
 .pv-card.selected {
     border-color: var(--cratis-primary-color);
     box-shadow:
@@ -6420,6 +6375,18 @@
   min-height: 400px;
 }
 
+.pv-loading__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .pv-spinner {
   width: 80px;
   height: 80px;
@@ -7421,7 +7388,8 @@
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 
 /* ── Toolbar container ───────────────────────────────────────────────────── */
-.toolbar {
+.toolbar,
+.toolbar-group {
     background: var(--cratis-surface-card);
     border: 1px solid var(--cratis-surface-border);
     box-shadow: var(--cratis-shadow-overlay);
@@ -7476,17 +7444,10 @@
     white-space: nowrap;
 }
 
-/* ── Toolbar section (context switching) ────────────────────────────────── */
-
-/*
- * The section is a fixed-size container that transitions smoothly between
- * the dimensions required by each context.
- * Overflow stays visible in the settled state so absolutely-positioned
- * children (e.g. fan-out panels) can extend beyond the section's bounds.
- * During a context resize transition, a temporary modifier clips incoming
- * content so buttons do not float outside the current toolbar bounds.
- */
-.toolbar-section {
+/* Context sections and group slots resize alike. Only transitioning modifiers clip contents;
+   settled panels can extend beyond the section bounds. */
+.toolbar-section,
+.toolbar-slot-section {
     position: relative;
     transition:
         width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
@@ -7711,33 +7672,7 @@
     gap: 0.5rem;
 }
 
-/*
- * Each ToolbarGroup is a self-contained pill that matches the visual style
- * of a standalone Toolbar.
- */
-.toolbar-group {
-    background: var(--cratis-surface-card);
-    border: 1px solid var(--cratis-surface-border);
-    box-shadow: var(--cratis-shadow-overlay);
-}
-
-/* ── Toolbar slot transition (ToolbarGroup slot content) ─────────────────── */
-
-/*
- * Size-morphing container for slot content inside a ToolbarGroup or ToolbarLayout.
- * Mirrors the .toolbar-section transition parameters for visual consistency —
- * the container resizes smoothly while content cross-fades.
- * Overflow stays visible in the settled state so absolutely-positioned children
- * (fan-out and folder panels, and the hover tooltips inside them) can escape the
- * section's bounds; it is only clipped while outgoing content is fading out, so
- * that content does not bleed past the container mid-transition.
- */
-.toolbar-slot-section {
-    position: relative;
-    transition:
-        width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-        height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-}
+/* ToolbarGroup slots use the section transition above. */
 
 .toolbar-slot-section--transitioning {
     overflow: hidden;