@godxjp/ui 19.4.1 → 19.5.0

package/dist/styles/control.css

@@ -106,7 +106,7 @@
   }
 
   .ui-button--default:hover {
-    background: hsl(var(--primary) / 0.9);
+    background: hsl(var(--primary-hover));
   }
 
   .ui-button--destructive {
@@ -550,7 +550,8 @@
     width: 100%;
     height: 100%;
     flex-direction: column;
-    overflow: hidden;
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
     border-radius: var(--control-radius);
     background: hsl(var(--popover));
     color: hsl(var(--popover-foreground));
@@ -823,33 +824,28 @@
   .ui-otp-group[data-appearance="grouped"] .ui-otp-slot[data-active="true"] {
     box-shadow: none;
   }
+
   .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
-    border-color: hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
-    box-shadow: 0 0 0 var(--focus-ring-width)
-      hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
+    border-color: hsl(var(--focus-ring-color, var(--ring)));
+  }
+
+  .ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) {
+    --focus-ring-color: var(--destructive);
   }
   .ui-otp-container:has(.ui-otp-input[aria-invalid="true"])
     .ui-otp-group[data-appearance="grouped"] {
     border-color: hsl(var(--destructive));
   }
-  .ui-otp-container:has(.ui-otp-input[aria-invalid="true"])
-    .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
-  }
   .ui-otp-container:has(.ui-otp-input:disabled) .ui-otp-group[data-appearance="grouped"] {
     background: hsl(var(--muted));
   }
+
   .ui-otp-slot[data-active="true"] {
     z-index: 1;
-    box-shadow: 0 0 0 var(--focus-ring-width)
-      hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
   }
   .ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-slot {
     border-color: hsl(var(--destructive));
   }
-  .ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-slot[data-active="true"] {
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
-  }
   .ui-otp-container:has(.ui-otp-input:disabled) .ui-otp-slot {
     cursor: not-allowed;
     background: hsl(var(--muted));
@@ -917,6 +913,73 @@
     border-radius: var(--radius-sm);
   }
 
+  .ui-segmented {
+    display: inline-flex;
+    max-width: 100%;
+    align-items: stretch;
+    padding: var(--segmented-track-padding);
+    border-radius: var(--segmented-track-radius);
+    background: hsl(var(--segmented-track-background));
+    color: hsl(var(--segmented-item-color));
+    font-size: var(--font-size-base);
+  }
+
+  .ui-segmented-item {
+    display: inline-flex;
+    min-width: 0;
+    height: var(--segmented-item-height);
+    align-items: center;
+    justify-content: center;
+    gap: var(--segmented-item-gap);
+    padding-inline: var(--segmented-item-padding-inline);
+    border: 0;
+    border-radius: var(--segmented-item-radius);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+
+    font: inherit;
+    white-space: nowrap;
+
+    transition: color var(--duration-fast);
+  }
+
+  .ui-segmented-item:not([data-state="checked"]):not([data-disabled]):hover {
+    background: hsl(var(--segmented-item-hover-background));
+    color: hsl(var(--segmented-item-hover-color));
+  }
+  .ui-segmented-item:not([data-state="checked"]):not([data-disabled]):active {
+    background: hsl(var(--segmented-item-active-background));
+  }
+
+  .ui-segmented-item[data-state="checked"] {
+    background: hsl(var(--segmented-item-selected-background));
+    box-shadow: var(--segmented-item-selected-shadow);
+    color: hsl(var(--segmented-item-selected-color));
+  }
+
+  .ui-segmented-item[data-disabled] {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  .ui-segmented-item-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ui-segmented-item-icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
+  .ui-segmented-item-icon > svg {
+    width: var(--icon-size-md);
+    height: var(--icon-size-md);
+    display: inline-block;
+    vertical-align: middle;
+  }
+
   .ui-tag-input {
     display: flex;
     flex-wrap: wrap;
@@ -1008,6 +1071,11 @@
     cursor: not-allowed;
   }
 
+  .ui-control-trigger[data-width="bounded"] {
+    inline-size: var(--control-bounded-width);
+    max-inline-size: 100%;
+  }
+
   .ui-control[data-size="sm"] {
     --control-height: var(--control-height-sm);
   }
@@ -1112,16 +1180,16 @@
   }
 
   .ui-search-select-panel {
+    --popover-surface-inline-size: max-content;
+    --popover-space-inset: 0;
     display: flex;
     flex-direction: column;
     max-block-size: var(--radix-popover-content-available-height);
-    inline-size: max-content;
     max-inline-size: min(
       var(--search-select-panel-max-width),
       calc(100vw - var(--search-select-panel-viewport-inset))
     );
     min-inline-size: var(--radix-popover-trigger-width);
-    padding: 0;
   }
 
   .ui-search-select-command {
@@ -1271,9 +1339,9 @@
   }
 
   .ui-cascader-popover {
-    inline-size: auto;
+    --popover-surface-inline-size: auto;
+    --popover-space-inset: 0;
     min-inline-size: var(--radix-popover-trigger-width);
-    padding: 0;
   }
 
   .ui-cascader-empty {
@@ -1479,13 +1547,13 @@
   }
 
   .ui-time-picker-popover {
-    inline-size: auto;
-    padding: 0;
+    --popover-surface-inline-size: auto;
+    --popover-space-inset: 0;
   }
 
   .ui-control-panel-flush {
-    inline-size: auto;
-    padding: 0;
+    --popover-surface-inline-size: auto;
+    --popover-space-inset: 0;
   }
 
   .ui-control-inline-affix-pair-affixed {
@@ -1584,8 +1652,8 @@
 @layer components {
 
   .ui-tree-select-popover {
-    inline-size: var(--radix-popover-trigger-width);
-    padding: 0;
+    --popover-surface-inline-size: var(--radix-popover-trigger-width);
+    --popover-space-inset: 0;
   }
 
   .ui-tree-select-list {
@@ -1968,8 +2036,8 @@
   }
 
   .ui-month-picker-panel {
-    inline-size: auto;
-    padding: var(--month-picker-panel-space-inset);
+    --popover-surface-inline-size: auto;
+    --popover-space-inset: var(--month-picker-panel-space-inset);
   }
 
   .ui-month-picker-nav {
@@ -2063,3 +2131,32 @@
     color: var(--button-count-secondary-color, hsl(var(--secondary)));
   }
 }
+
+@layer components {
+  .ui-button[data-wrap] {
+    --button-wrap-min-height: var(--control-height);
+    height: auto;
+    min-height: var(--button-wrap-min-height);
+    max-inline-size: 100%;
+    padding-block: var(--space-1);
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+  .ui-button[data-wrap][data-size="xs"] {
+    --button-wrap-min-height: var(--control-height-xs);
+  }
+  .ui-button[data-wrap][data-size="sm"] {
+    --button-wrap-min-height: var(--control-height-sm);
+  }
+  .ui-button[data-wrap][data-size="lg"] {
+    --button-wrap-min-height: var(--control-height-lg);
+  }
+  .ui-button[data-align="start"] {
+    justify-content: flex-start;
+    text-align: start;
+  }
+  .ui-button[data-align="end"] {
+    justify-content: flex-end;
+    text-align: end;
+  }
+}

package/dist/styles/data-display-layout.css

@@ -412,7 +412,8 @@
 }
 
 .ui-carousel-viewport {
-  overflow: hidden;
+  overflow: clip;
+  overflow-clip-margin: var(--focus-ring-clip-margin);
 }
 
 .ui-carousel-content {
@@ -983,7 +984,9 @@
     box-sizing: border-box;
     inline-size: calc(100% / var(--timeline-grid-event-lanes, 1));
     block-size: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-event-span, 0));
-    min-block-size: var(--timeline-grid-event-min-height);
+    min-block-size: calc(
+      var(--timeline-grid-hour-height) * var(--timeline-grid-event-min-height-minutes) / 60
+    );
     padding-inline-end: var(--timeline-grid-event-gap);
     padding-block-end: var(--timeline-grid-event-gap);
   }
@@ -1064,3 +1067,22 @@
     pointer-events: none;
   }
 }
+
+@layer components {
+  a.ui-list-row {
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  a.ui-list-row:hover {
+    background: hsl(var(--muted));
+  }
+  a.ui-list-row[aria-current="page"] {
+
+    background: hsl(var(--accent));
+    box-shadow: inset var(--space-1) 0 0 hsl(var(--primary));
+  }
+  [dir="rtl"] a.ui-list-row[aria-current="page"] {
+    box-shadow: inset calc(-1 * var(--space-1)) 0 0 hsl(var(--primary));
+  }
+}

package/dist/styles/dialog-layout.css

@@ -256,7 +256,8 @@
 
   .ui-popover-content {
     z-index: var(--overlay-z-index);
-    width: var(--popover-width);
+
+    width: var(--popover-surface-inline-size, var(--popover-width));
     padding: var(--popover-space-inset);
     border-radius: var(--popover-radius);
     border: 1px solid var(--popover-surface-border-color, hsl(var(--border)));

package/dist/styles/focus-ring.css

@@ -3,11 +3,13 @@
 
   :is(
     .ui-focus-ring,
-    .ui-button,
-    .ui-control,
+    .ui-focus-ring-outline,
     .ui-input,
+    .ui-control,
     .ui-control-multiline,
     .ui-control-trigger,
+    .ui-tag-input,
+    .ui-button,
     .ui-toggle,
     .ui-checkbox,
     .ui-radio,
@@ -17,35 +19,78 @@
     .ui-pagination-link,
     .ui-legal-document-toc-link,
     .ui-code-block,
+    .ui-accordion-trigger,
+    .ui-carousel-dot,
+    .ui-rating-star,
+    a.ui-list-row,
+    .sb-nav-item,
     .sb-user,
     .tb-icon-btn
   ):focus-visible,
   .ui-control-trigger[data-state="open"],
   .ui-tag-input:focus-within,
   .ui-control-composite-field:focus-within,
-  .ui-control-composite-field[data-state="open"] {
-    outline: none;
+  .ui-control-composite-field[data-state="open"],
+  .ui-otp-slot[data-active="true"],
+  .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
+    outline: var(--focus-ring-width) solid
+      hsl(var(--focus-outline-color) / var(--focus-ring-opacity, 1));
+    outline-offset: var(--focus-ring-offset);
 
-    --tw-ring-shadow: 0 0 0 var(--focus-ring-width)
-      hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
-    box-shadow: 0 0 0 var(--focus-ring-width)
-      hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
+    transition:
+      outline-offset 0s,
+      outline 0s;
   }
 
-  :is(
-    .ui-focus-ring-outline,
-    .ui-accordion-trigger,
-    .ui-carousel-dot,
-    .ui-rating-star,
-    .ui-legal-document-section
-  ):focus-visible {
-    outline: var(--focus-ring-width) solid
-      hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
-    outline-offset: var(--focus-ring-offset, 0px);
+  :root[data-focus-outline="on"]
+    :is(
+      .ui-focus-ring,
+      .ui-focus-ring-outline,
+      .ui-input,
+      .ui-control,
+      .ui-control-multiline,
+      .ui-control-trigger,
+      .ui-tag-input,
+      .ui-button,
+      .ui-toggle,
+      .ui-checkbox,
+      .ui-radio,
+      .ui-slider-thumb,
+      .ui-switch,
+      .ui-steps-inline-control,
+      .ui-pagination-link,
+      .ui-legal-document-toc-link,
+      .ui-code-block,
+      .ui-accordion-trigger,
+      .ui-carousel-dot,
+      .ui-rating-star,
+      a.ui-list-row,
+      .sb-nav-item,
+      .sb-user,
+      .tb-icon-btn
+    ):focus-visible,
+  :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
+  :root[data-focus-outline="on"] .ui-tag-input:focus-within,
+  :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,
+  :root[data-focus-outline="on"] .ui-control-composite-field[data-state="open"],
+  :root[data-focus-outline="on"] .ui-otp-slot[data-active="true"],
+  :root[data-focus-outline="on"]
+    .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
+    --tw-ring-shadow: var(--focus-field-shadow);
+    box-shadow: var(--focus-field-shadow);
+  }
+
+  :root[data-focus-outline="on"]
+    :is(.ui-input, .ui-control, .ui-control-multiline, .ui-control-trigger, .ui-tag-input):focus-visible,
+  :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
+  :root[data-focus-outline="on"] .ui-tag-input:focus-within,
+  :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,
+  :root[data-focus-outline="on"] .ui-control-composite-field[data-state="open"] {
+    --input: var(--focus-ring-color, var(--ring));
   }
 
   .ui-toggle {
-    --focus-ring-width: var(--toggle-focus-ring-width);
+    --focus-ring-weight: var(--toggle-focus-ring-width);
     --focus-ring-opacity: var(--toggle-focus-ring-alpha);
   }
 
@@ -57,6 +102,12 @@
     --focus-ring-opacity: var(--topbar-icon-focus-ring-alpha);
   }
 
+  a.ui-list-row,
+  tr.ui-focus-ring,
+  .sb-nav-item {
+    --focus-ring-offset: calc(-1 * var(--focus-ring-width));
+  }
+
   .ui-accordion-trigger {
     --focus-ring-offset: var(--accordion-focus-ring-offset);
   }
@@ -69,13 +120,24 @@
     --focus-ring-offset: var(--rating-focus-ring-offset);
   }
 
-  .ui-legal-document-section {
-    --focus-ring-offset: var(--legal-document-section-focus-ring-offset);
+  :is(.ui-control, .ui-input, .ui-control-multiline, .ui-tag-input):not(
+    .ui-app-setting-picker-icon,
+    .ui-app-setting-picker-inline
+  ) {
+    --focus-ring-weight: var(--control-focus-ring-width);
   }
 
   .ui-command-input:focus-visible {
-    --focus-ring-width: 0;
+    --focus-field-shadow: none;
+    --focus-ring-weight: 0px;
     outline: none;
     box-shadow: none;
   }
+
+  [aria-invalid="true"] {
+    --focus-ring-color: var(--destructive);
+    --focus-outline-color: var(--destructive);
+    --focus-ring-glow-color: var(--control-outline-error);
+    --focus-ring-glow-alpha: var(--control-outline-error-alpha);
+  }
 }

package/dist/styles/form-layout.css

@@ -1,6 +1,12 @@
 
 
 @layer components {
+
+  .ui-form-field-required {
+    margin-inline-start: var(--space-inline-xs);
+    color: hsl(var(--destructive));
+  }
+
   .ui-form {
     display: flex;
     flex-direction: column;

package/dist/styles/layout.css

@@ -80,7 +80,8 @@
   }
 
   .ui-aspect-ratio {
-    overflow: hidden;
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
   }
 
   .ui-brand-glow {
@@ -239,7 +240,7 @@
   .ui-responsive-grid {
     display: grid;
     gap: var(--space-stack-md);
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: repeat(var(--responsive-grid-base, 1), minmax(0, 1fr));
   }
 
   .ui-responsive-grid[data-gap="none"] {
@@ -1348,3 +1349,38 @@
     }
   }
 }
+
+@layer components {
+  .ui-master-detail-back {
+    display: none;
+  }
+  .ui-master-detail[data-mobile-pane] {
+    position: relative;
+  }
+  .ui-master-detail-measure {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 0;
+    block-size: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  .ui-master-detail-measure > span {
+    display: block;
+    inline-size: var(--master-detail-collapse-below);
+    block-size: 0;
+  }
+  .ui-master-detail[data-mobile-compact][data-mobile-pane="master"] > .ui-master-detail-detail,
+  .ui-master-detail[data-mobile-compact][data-mobile-pane="detail"] > .ui-master-detail-master {
+    display: none;
+  }
+  .ui-master-detail[data-mobile-compact] > .ui-master-detail-master {
+    max-block-size: none;
+    overflow: visible;
+  }
+  .ui-master-detail[data-mobile-compact] .ui-master-detail-back {
+    display: block;
+    margin-block-end: var(--space-3);
+  }
+}

package/dist/styles/logo-layout.css

@@ -15,6 +15,62 @@
     user-select: none;
   }
 
+  .ui-logo-glyph {
+    --logo-glyph-advance-width: max(
+      var(--logo-glyph-fullwidth-width),
+      calc(
+        var(--logo-glyph-fullwidth-count, 0) * var(--logo-glyph-fullwidth-width) +
+          var(--logo-glyph-wide-count, 0) * var(--logo-glyph-wide-width) +
+          var(--logo-glyph-narrow-count, 0) * var(--logo-glyph-narrow-width) +
+          var(--logo-glyph-space-count, 0) * var(--logo-glyph-space-width)
+      )
+    );
+
+    white-space: nowrap;
+    font-size: min(
+      var(--logo-font-size-md),
+      calc(var(--logo-size-md) * var(--logo-glyph-fit-max-width) / var(--logo-glyph-advance-width))
+    );
+    translate: 0 var(--logo-glyph-optical-offset, 0em);
+  }
+
+  .ui-logo[data-size="xs"] .ui-logo-glyph {
+    font-size: min(
+      var(--logo-font-size-xs),
+      calc(var(--logo-size-xs) * var(--logo-glyph-fit-max-width) / var(--logo-glyph-advance-width))
+    );
+  }
+
+  .ui-logo[data-size="sm"] .ui-logo-glyph {
+    font-size: min(
+      var(--logo-font-size-sm),
+      calc(var(--logo-size-sm) * var(--logo-glyph-fit-max-width) / var(--logo-glyph-advance-width))
+    );
+  }
+
+  .ui-logo[data-size="lg"] .ui-logo-glyph {
+    font-size: min(
+      var(--logo-font-size-lg),
+      calc(var(--logo-size-lg) * var(--logo-glyph-fit-max-width) / var(--logo-glyph-advance-width))
+    );
+  }
+
+  .ui-logo-glyph[data-ink="cap-baseline"] {
+    translate: 0 var(--logo-glyph-optical-offset, var(--logo-glyph-cap-baseline-optical-offset));
+  }
+
+  .ui-logo-glyph[data-ink="cap-descender"] {
+    translate: 0 var(--logo-glyph-optical-offset, var(--logo-glyph-cap-descender-optical-offset));
+  }
+
+  .ui-logo-glyph[data-ink="x-baseline"] {
+    translate: 0 var(--logo-glyph-optical-offset, var(--logo-glyph-x-baseline-optical-offset));
+  }
+
+  .ui-logo-glyph[data-ink="x-descender"] {
+    translate: 0 var(--logo-glyph-optical-offset, var(--logo-glyph-x-descender-optical-offset));
+  }
+
   .ui-logo[data-size="xs"] {
     width: var(--logo-size-xs);
     height: var(--logo-size-xs);

package/dist/styles/navigation-layout.css

@@ -82,7 +82,8 @@
     }
   }
 
-  .ui-pagination .ui-button svg {
+  .ui-pagination .ui-button svg,
+  .ui-pagination .ui-pagination-link svg {
     inline-size: var(--pagination-icon-size);
     block-size: var(--pagination-icon-size);
   }
@@ -126,6 +127,20 @@
     font-size: var(--menu-item-font-size);
   }
 
+  .ui-context-menu-item > svg,
+  .ui-context-menu-checkbox-item > svg,
+  .ui-context-menu-radio-item > svg,
+  .ui-menubar-item > svg,
+  .ui-menubar-checkbox-item > svg,
+  .ui-menubar-radio-item > svg,
+  .ui-dropdown-menu-item > svg,
+  .ui-dropdown-menu-checkbox-item > svg,
+  .ui-dropdown-menu-radio-item > svg {
+    width: var(--menu-icon-size);
+    height: var(--menu-icon-size);
+    flex: 0 0 auto;
+  }
+
   .ui-dropdown-menu-item[data-inset="true"],
   .ui-dropdown-menu-label[data-inset="true"],
   .ui-dropdown-menu-sub-trigger[data-inset="true"] {
@@ -208,6 +223,7 @@
   .ui-context-menu-label,
   .ui-menubar-label,
   .ui-dropdown-menu-label {
+    height: auto;
     min-height: var(--menu-item-height);
     color: hsl(var(--muted-foreground));
     font-weight: var(--font-weight-medium);