@godxjp/ui 22.0.0 → 23.1.0

package/dist/styles/focus-ring.css

@@ -14,6 +14,18 @@
     .ui-checkbox,
     .ui-radio,
     .ui-slider-thumb,
+    .ui-control-affix-action,
+    .ui-control-inline-affix-action,
+    .ui-search-input-clear,
+    .ui-tag-input-remove,
+    .ui-color-picker-input,
+    .ui-upload-tile-add,
+    .ui-upload-picture-empty,
+    .ui-upload-dropzone,
+    .ui-tabs-add,
+    .ui-steps-control,
+    .ui-carousel-previous,
+    .ui-carousel-next,
     .ui-steps-inline-control,
     .ui-pagination-link,
     .ui-legal-document-toc-link,
@@ -29,7 +41,9 @@
   ):focus-visible,
 
   .ui-checkbox[data-focus-visible],
+  .ui-radio[data-focus-visible],
   .ui-switch[data-focus-visible],
+  .ui-slider-thumb[data-focus-visible],
   .ui-focus-ring[data-focus-visible],
   .ui-control-trigger[data-state="open"],
   .ui-tag-input:focus-within,
@@ -60,6 +74,18 @@
       .ui-checkbox,
       .ui-radio,
       .ui-slider-thumb,
+      .ui-control-affix-action,
+      .ui-control-inline-affix-action,
+      .ui-search-input-clear,
+      .ui-tag-input-remove,
+      .ui-color-picker-input,
+      .ui-upload-tile-add,
+      .ui-upload-picture-empty,
+      .ui-upload-dropzone,
+      .ui-tabs-add,
+      .ui-steps-control,
+      .ui-carousel-previous,
+      .ui-carousel-next,
       .ui-steps-inline-control,
       .ui-pagination-link,
       .ui-legal-document-toc-link,
@@ -75,7 +101,9 @@
     ):focus-visible,
 
   :root[data-focus-outline="on"] .ui-checkbox[data-focus-visible],
+  :root[data-focus-outline="on"] .ui-radio[data-focus-visible],
   :root[data-focus-outline="on"] .ui-switch[data-focus-visible],
+  :root[data-focus-outline="on"] .ui-slider-thumb[data-focus-visible],
   :root[data-focus-outline="on"] .ui-focus-ring[data-focus-visible],
   :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
   :root[data-focus-outline="on"] .ui-tag-input:focus-within,

package/dist/styles/fonts.css

@@ -6,11 +6,95 @@
 @import "@fontsource/noto-sans-jp/500.css";
 @import "@fontsource/noto-sans-jp/700.css";
 
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 400;
+  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
+  size-adjust: 103.02%;
+  ascent-override: 112.6%;
+  descent-override: 27.96%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 500;
+  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
+  size-adjust: 105.5%;
+  ascent-override: 109.95%;
+  descent-override: 27.3%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 700;
+  src:
+    local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"),
+    local("LiberationSans-Bold");
+  size-adjust: 101.5%;
+  ascent-override: 114.29%;
+  descent-override: 28.37%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1D00-1DBF, U+1E00-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 400;
+  src:
+    local("Hiragino Sans W3"), local("HiraginoSans-W3"), local("Hiragino Kaku Gothic ProN W3"),
+    local("HiraKakuProN-W3"), local("Yu Gothic Medium"), local("YuGothic-Medium"), local("Meiryo"),
+    local("Noto Sans CJK JP"), local("NotoSansCJKjp-Regular"), local("IPAGothic");
+  ascent-override: 116%;
+  descent-override: 28.8%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+20000-2FA1F;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 500;
+  src:
+    local("Hiragino Sans W5"), local("HiraginoSans-W5"), local("Hiragino Kaku Gothic ProN W3"),
+    local("HiraKakuProN-W3"), local("Yu Gothic Medium"), local("YuGothic-Medium"), local("Meiryo"),
+    local("Noto Sans CJK JP Medium"), local("NotoSansCJKjp-Medium"), local("Noto Sans CJK JP"),
+    local("NotoSansCJKjp-Regular"), local("IPAGothic");
+  ascent-override: 116%;
+  descent-override: 28.8%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+20000-2FA1F;
+}
+@font-face {
+  font-family: "Noto Sans JP Fallback";
+  font-weight: 700;
+  src:
+    local("Hiragino Sans W6"), local("HiraginoSans-W6"), local("Hiragino Kaku Gothic ProN W6"),
+    local("HiraKakuProN-W6"), local("Yu Gothic Bold"), local("YuGothic-Bold"), local("Meiryo Bold"),
+    local("Meiryo-Bold"), local("Noto Sans CJK JP Bold"), local("NotoSansCJKjp-Bold"),
+    local("IPAGothic");
+  ascent-override: 116%;
+  descent-override: 28.8%;
+  line-gap-override: 0%;
+  unicode-range:
+    U+3000-30FF, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+20000-2FA1F;
+}
+
 :root {
   --font-sans-base:
-    "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic,
-    "M PLUS 2", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
+    "Noto Sans JP", "Noto Sans JP Fallback", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
+    "Yu Gothic Medium", YuGothic, "M PLUS 2", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, system-ui, sans-serif;
   --font-sans-vi:
-    "Noto Sans JP", "M PLUS 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui,
-    sans-serif;
+    "Noto Sans JP", "Noto Sans JP Fallback", "M PLUS 2", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, system-ui, sans-serif;
 }

package/dist/styles/form-layout.css

@@ -2,6 +2,10 @@
 
 @layer components {
 
+  .ui-form-field-note {
+    word-break: auto-phrase;
+  }
+
   .ui-form-field-required {
     margin-inline-start: var(--space-inline-xs);
     color: hsl(var(--destructive));

package/dist/styles/layout.css

@@ -997,7 +997,8 @@
     flex-wrap: nowrap;
     min-width: 0;
     align-items: center;
-    justify-content: flex-end;
+
+    justify-content: safe flex-end;
     gap: var(--pagination-gap);
   }
 

package/dist/styles/navigation-layout.css

@@ -103,6 +103,11 @@
     flex: 1 1 auto;
   }
 
+  [data-slot="tabs"][data-orientation="vertical"] > [data-slot="tabs-list"],
+  [data-slot="tabs"][data-orientation="vertical"] > .ui-tabs-bar {
+    flex-shrink: 0;
+  }
+
   .ui-tabs-extra {
     display: flex;
     flex: 0 0 auto;
@@ -194,6 +199,12 @@
     block-size: var(--tabs-add-icon-size);
   }
 
+  .ui-pagination {
+    max-inline-size: 100%;
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
   .ui-pagination .ui-button svg,
   .ui-pagination .ui-pagination-link svg {
     inline-size: var(--pagination-icon-size);
@@ -205,11 +216,11 @@
   }
 
   .ui-pagination[data-align="center"] {
-    justify-content: center;
+    justify-content: safe center;
   }
 
   .ui-pagination[data-align="end"] {
-    justify-content: flex-end;
+    justify-content: safe flex-end;
   }
 
   .ui-pagination[data-size="sm"] {
@@ -233,30 +244,6 @@
     text-align: center;
   }
 
-  .ui-context-menu-content {
-    z-index: var(--overlay-z-index);
-    min-width: var(--menu-content-min-width);
-    overflow: hidden;
-    border-radius: var(--radius-md);
-    border: 1px solid hsl(var(--border));
-    background: hsl(var(--popover));
-    color: hsl(var(--popover-foreground));
-    padding: var(--space-1);
-    box-shadow: var(--shadow-md), var(--shadow-glow);
-  }
-
-  .ui-context-menu-item,
-  .ui-context-menu-label,
-  .ui-context-menu-sub-trigger,
-  .ui-context-menu-checkbox-item,
-  .ui-context-menu-radio-item,
-  .ui-context-menu-shortcut,
-  .ui-menubar-item,
-  .ui-menubar-label,
-  .ui-menubar-trigger,
-  .ui-menubar-sub-trigger,
-  .ui-menubar-checkbox-item,
-  .ui-menubar-radio-item,
   .ui-dropdown-menu-item,
   .ui-dropdown-menu-label,
   .ui-dropdown-menu-sub-trigger,
@@ -272,12 +259,6 @@
     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 {
@@ -292,19 +273,10 @@
     padding-inline-start: var(--menu-item-inset-space-inline-start);
   }
 
-  .ui-context-menu-item,
-  .ui-context-menu-checkbox-item,
-  .ui-context-menu-radio-item,
-  .ui-context-menu-sub-trigger,
-  .ui-menubar-item,
-  .ui-menubar-checkbox-item,
-  .ui-menubar-radio-item,
-  .ui-menubar-sub-trigger,
   .ui-dropdown-menu-item,
   .ui-dropdown-menu-checkbox-item,
   .ui-dropdown-menu-radio-item,
-  .ui-dropdown-menu-sub-trigger,
-  .ui-navigation-menu-link {
+  .ui-dropdown-menu-sub-trigger {
     cursor: pointer;
     outline: none;
     user-select: none;
@@ -313,50 +285,25 @@
       color 150ms ease;
   }
 
-  .ui-context-menu-item:hover,
-  .ui-context-menu-sub-trigger:hover,
-  .ui-menubar-item:hover,
-  .ui-menubar-sub-trigger:hover,
   .ui-dropdown-menu-item:hover,
-  .ui-dropdown-menu-sub-trigger:hover,
-  .ui-navigation-menu-link:hover,
-  .ui-navigation-menu-item:hover {
-    background: var(--menubar-item-hover-background, hsl(var(--accent)));
-    color: var(--menubar-item-hover-foreground, hsl(var(--accent-foreground)));
-  }
-
-  .ui-context-menu-item[data-state="open"],
-  .ui-context-menu-item[data-state="checked"],
-  .ui-context-menu-item[data-highlighted],
-  .ui-menubar-item[data-state="open"],
-  .ui-menubar-item[data-state="active"],
-  .ui-menubar-item[data-state="checked"],
-  .ui-menubar-sub-trigger[data-state="open"],
+  .ui-dropdown-menu-sub-trigger:hover {
+    background: var(--menu-item-hover-background, hsl(var(--accent)));
+    color: var(--menu-item-hover-foreground, hsl(var(--accent-foreground)));
+  }
+
   .ui-dropdown-menu-item[data-state="open"],
   .ui-dropdown-menu-item[data-highlighted],
   .ui-dropdown-menu-checkbox-item[data-highlighted],
   .ui-dropdown-menu-radio-item[data-highlighted],
-  .ui-dropdown-menu-sub-trigger[data-state="open"],
-  .ui-navigation-menu-link[data-highlighted],
-  .ui-navigation-menu-item[data-focus-visible] {
-    background: var(--menubar-item-hover-background, hsl(var(--accent)));
-    color: var(--menubar-item-hover-foreground, hsl(var(--accent-foreground)));
+  .ui-dropdown-menu-sub-trigger[data-state="open"] {
+    background: var(--menu-item-hover-background, hsl(var(--accent)));
+    color: var(--menu-item-hover-foreground, hsl(var(--accent-foreground)));
   }
 
-  .ui-context-menu-item[data-variant="destructive"],
-  .ui-menubar-item[data-variant="destructive"],
   .ui-dropdown-menu-item[data-variant="destructive"] {
     color: hsl(var(--destructive));
   }
 
-  .ui-context-menu-item[data-variant="destructive"][data-state="focused"],
-  .ui-menubar-item[data-variant="destructive"][data-state="focused"] {
-    background: hsl(var(--destructive));
-    color: hsl(var(--destructive-foreground));
-  }
-
-  .ui-context-menu-separator,
-  .ui-menubar-separator,
   .ui-dropdown-menu-separator,
   .ui-select-separator {
     margin-block: var(--menu-separator-space-block);
@@ -365,8 +312,6 @@
     background: hsl(var(--border));
   }
 
-  .ui-context-menu-label,
-  .ui-menubar-label,
   .ui-dropdown-menu-label {
     height: auto;
     min-height: var(--menu-item-height);
@@ -374,19 +319,14 @@
     font-weight: var(--font-weight-medium);
   }
 
-  .ui-context-menu-shortcut,
-  .ui-menubar-shortcut,
   .ui-dropdown-menu-shortcut {
     margin-inline-start: auto;
     text-align: end;
     color: hsl(var(--muted-foreground));
-    font-size: var(--menubar-shortcut-font-size);
+    font-size: var(--menu-shortcut-font-size);
   }
 
-  .ui-context-menu-item-indicator,
-  .ui-menubar-item-indicator,
-  .ui-dropdown-menu-item-indicator,
-  .ui-navigation-menu-item-indicator {
+  .ui-dropdown-menu-item-indicator {
     display: inline-flex;
     width: 1rem;
     height: 1rem;
@@ -394,160 +334,6 @@
     justify-content: center;
     color: hsl(var(--accent-foreground));
   }
-
-  .ui-context-menu-check,
-  .ui-menubar-check {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .ui-context-menu-dot,
-  .ui-menubar-dot {
-    width: 0.5rem;
-    height: 0.5rem;
-    border-radius: var(--radius-pill);
-    background: currentColor;
-  }
-
-  .ui-context-menu-sub-content,
-  .ui-context-menu-sub-trigger,
-  .ui-menubar-sub-content,
-  .ui-menubar-sub-trigger {
-    position: relative;
-  }
-
-  .ui-context-menu-sub-content,
-  .ui-menubar-sub-content {
-    min-width: 10rem;
-    overflow: hidden;
-    border-radius: var(--radius-md);
-    border: 1px solid hsl(var(--border));
-    background: hsl(var(--popover));
-    color: hsl(var(--popover-foreground));
-    padding: var(--space-1);
-    box-shadow: var(--shadow-md), var(--shadow-glow);
-  }
-
-  .ui-context-menu-sub-trigger-icon,
-  .ui-menubar-sub-trigger-icon {
-    width: var(--menu-icon-size);
-    height: var(--menu-icon-size);
-    margin-inline-start: auto;
-    opacity: 0.75;
-  }
-
-  .ui-menubar {
-    display: flex;
-    min-height: var(--control-height);
-    align-items: center;
-    gap: var(--space-1);
-    border-radius: var(--radius-md);
-  }
-
-  .ui-menubar-trigger {
-    height: var(--control-height);
-    padding: 0 var(--space-3);
-    border-radius: var(--radius-md);
-  }
-
-  .ui-menubar-content {
-    min-width: 10rem;
-    overflow: hidden;
-    border-radius: var(--radius-md);
-    border: 1px solid hsl(var(--border));
-    background: hsl(var(--popover));
-    color: hsl(var(--popover-foreground));
-    padding: var(--space-1);
-    box-shadow: var(--shadow-md), var(--shadow-glow);
-  }
-
-  .ui-menubar-trigger[data-state="open"],
-  .ui-menubar-sub-trigger[data-state="open"] {
-    background: var(--menubar-item-hover-background, hsl(var(--accent)));
-    color: var(--menubar-item-hover-foreground, hsl(var(--accent-foreground)));
-  }
-
-  .ui-navigation-menu {
-    position: relative;
-    width: max-content;
-  }
-
-  .ui-navigation-menu-list {
-    display: flex;
-    align-items: center;
-    gap: var(--space-1);
-  }
-
-  .ui-navigation-menu-item,
-  .ui-navigation-menu-trigger {
-    position: relative;
-    cursor: pointer;
-    border-radius: var(--radius-md);
-    padding-inline: var(--space-2);
-    padding-block: var(--space-2);
-    height: var(--control-height);
-    font-size: var(--font-size-base);
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-1);
-    outline: none;
-  }
-
-  .ui-navigation-menu-trigger-icon {
-    width: var(--navigation-menu-trigger-icon-size);
-    height: var(--navigation-menu-trigger-icon-size);
-    margin-inline-start: var(--space-2);
-    opacity: 0.7;
-  }
-
-  .ui-navigation-menu-content {
-    position: absolute;
-    top: 100%;
-    inset-inline-start: 0;
-    min-width: 14rem;
-    z-index: 50;
-    overflow: hidden;
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-md);
-    background: hsl(var(--popover));
-    color: hsl(var(--popover-foreground));
-    padding: var(--space-1);
-    box-shadow: var(--shadow-md), var(--shadow-glow);
-  }
-
-  .ui-navigation-menu-link {
-    width: 100%;
-    cursor: pointer;
-  }
-
-  .ui-navigation-menu-viewport {
-    position: absolute;
-    inset-inline-start: 0;
-    top: 100%;
-    width: 100%;
-    overflow: hidden;
-    border-radius: var(--radius-md);
-    border: 1px solid hsl(var(--border));
-    background: hsl(var(--popover));
-    color: hsl(var(--popover-foreground));
-  }
-
-  .ui-navigation-menu-indicator {
-    position: absolute;
-    top: 100%;
-    z-index: 50;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 0.75rem;
-    overflow: hidden;
-  }
-
-  .ui-navigation-menu-item-indicator {
-    width: 100%;
-    transition: transform 200ms ease;
-    transform-origin: center;
-  }
 }
 
 @layer components {