@godxjp/ui 19.4.2 → 19.5.0

package/dist/styles/alert-layout.css

@@ -191,6 +191,10 @@
     block-size: var(--toast-icon-size);
   }
 
+  [data-sonner-toast][data-expanded="false"][data-front="false"][data-styled="true"] > * {
+    visibility: hidden;
+  }
+
   .ui-skeleton-block {
     border-radius: var(--skeleton-radius);
     background: var(--skeleton-background, hsl(var(--muted)));

package/dist/styles/base.css

@@ -1,6 +1,8 @@
 
 @import "tailwindcss";
 
+@import "tw-animate-css";
+
 @layer godxjp-ui-responsive;
 
 [lang="ja"] {

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 {

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 {

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,36 +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,
-    a.ui-list-row,
-    .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);
   }
 
@@ -58,7 +102,9 @@
     --focus-ring-opacity: var(--topbar-icon-focus-ring-alpha);
   }
 
-  a.ui-list-row {
+  a.ui-list-row,
+  tr.ui-focus-ring,
+  .sb-nav-item {
     --focus-ring-offset: calc(-1 * var(--focus-ring-width));
   }
 
@@ -74,17 +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/layout.css

@@ -80,7 +80,8 @@
   }
 
   .ui-aspect-ratio {
-    overflow: hidden;
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
   }
 
   .ui-brand-glow {

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

@@ -127,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"] {
@@ -209,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);

package/dist/styles/shell-layout.css

@@ -85,7 +85,7 @@
 
   .app-main:focus-visible {
     outline: none;
-    box-shadow: inset 0 0 0 var(--region-focus-ring-width)
+    box-shadow: inset 0 0 0 calc(var(--region-focus-ring-width) * var(--focus-outline))
       var(--region-focus-ring-color, hsl(var(--focus-ring-color, var(--ring))));
   }
 
@@ -497,7 +497,7 @@
     display: none;
   }
 
-  .app-mobile-nav-trigger {
+  .app-root .app-mobile-nav-trigger {
     display: none;
     flex: 0 0 auto;
     margin-inline-end: var(--space-1);
@@ -557,7 +557,7 @@
       display: flex;
     }
 
-    .app-mobile-nav-trigger {
+    .app-root .app-mobile-nav-trigger {
       display: inline-flex;
     }
 
@@ -827,6 +827,13 @@
     gap: var(--sidebar-nav-gap);
   }
 
+  .ui-nav-list {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--sidebar-nav-gap);
+  }
+
   .sb-nav-item {
     display: flex;
     width: 100%;
@@ -848,11 +855,6 @@
     text-align: start;
   }
 
-  .sb-nav-item:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
-  }
-
   .sb-nav-item:hover {
     background: hsl(var(--accent));
     color: var(--sidebar-nav-item-hover-foreground, hsl(var(--foreground)));
@@ -1144,6 +1146,8 @@
     max-width: 100%;
     min-width: 0;
     flex: 1 1 0%;
+
+    align-self: stretch;
     align-items: center;
     gap: var(--topbar-gap);
     padding-inline: var(--topbar-inset);
@@ -1156,6 +1160,8 @@
   .ui-topbar-end {
     display: flex;
     min-width: 0;
+
+    align-self: stretch;
     align-items: center;
     gap: var(--topbar-gap);
     overflow: clip;
@@ -1175,11 +1181,13 @@
   .ui-topbar-start {
     flex: 0 1 auto;
   }
+
   .ui-topbar-start > :last-child {
     max-width: 100%;
     min-width: 0;
     flex: 0 1 auto;
-    overflow: hidden;
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
     line-height: var(--topbar-start-truncate-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1194,6 +1202,52 @@
     margin-inline-start: auto;
   }
 
+  .ui-topbar-item {
+    display: inline-flex;
+    min-width: var(--topbar-item-min-width);
+    flex: 0 0 auto;
+    align-self: stretch;
+    align-items: center;
+    justify-content: center;
+    gap: var(--topbar-item-gap);
+    padding-inline: var(--topbar-item-padding-inline);
+    border: 0;
+    border-radius: var(--topbar-item-radius);
+    background: transparent;
+    color: hsl(var(--topbar-item-color));
+    cursor: pointer;
+
+    font: inherit;
+    white-space: nowrap;
+    --focus-ring-offset: var(--topbar-item-focus-ring-offset);
+    transition:
+      background-color var(--duration-fast),
+      color var(--duration-fast);
+  }
+
+  .ui-topbar-item:hover {
+    background: hsl(var(--topbar-item-hover-background));
+    color: hsl(var(--topbar-item-hover-color));
+  }
+
+  .ui-topbar-item:active,
+  .ui-topbar-item[data-state="open"] {
+    background: hsl(var(--topbar-item-active-background));
+    color: hsl(var(--topbar-item-hover-color));
+  }
+
+  .ui-topbar-item:disabled,
+  .ui-topbar-item[data-disabled] {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  .ui-topbar-item > svg {
+    width: var(--topbar-icon-size);
+    height: var(--topbar-icon-size);
+    flex: 0 0 auto;
+  }
+
   @media (width <= 68.75rem) {
     .ui-topbar-center {
       display: var(--topbar-center-compact-display);
@@ -1518,7 +1572,7 @@
 
   .ui-mobile-shell-main:focus-visible {
     outline: none;
-    box-shadow: inset 0 0 0 var(--region-focus-ring-width)
+    box-shadow: inset 0 0 0 calc(var(--region-focus-ring-width) * var(--focus-outline))
       var(--region-focus-ring-color, hsl(var(--focus-ring-color, var(--ring))));
   }
 

package/dist/tokens/antd.generated.css

@@ -0,0 +1,40 @@
+
+
+:root {
+
+  --primary-hover: 206 100% 29.4%;
+
+  --primary-active: 208 100% 22%;
+
+  --primary-border: 198 68% 66%;
+  --destructive-hover: 359 50.6% 53.1%;
+  --destructive-active: 355 70.6% 33.3%;
+
+  --control-outline: 192.1 100% 44.7%;
+  --control-outline-alpha: 0.11;
+
+  --control-outline-error: 4.3 87.6% 34.7%;
+  --control-outline-error-alpha: 0.09;
+
+  --ring: var(--primary);
+}
+
+.dark,
+:root[data-theme="dark"] {
+
+  --primary-hover: 202.2 74.6% 64.5%;
+
+  --primary-active: 200.2 81.3% 74.9%;
+
+  --primary-border: 204.6 46.7% 23.5%;
+  --destructive-hover: 358.8 42.3% 53.1%;
+  --destructive-active: 357.3 50.6% 34.1%;
+
+  --control-outline: 204.6 99% 61.8%;
+  --control-outline-alpha: 0.29;
+
+  --control-outline-error: 351.5 98.3% 53.5%;
+  --control-outline-error-alpha: 0.06;
+
+  --ring: var(--primary);
+}