@godxjp/ui 21.0.0 → 23.0.0

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/navigation-layout.css

@@ -96,6 +96,10 @@
 
   .ui-tabs-bar > [data-slot="tabs-list"] {
     min-inline-size: 0;
+    flex: 0 1 auto;
+  }
+
+  [data-slot="tabs"]:not([data-orientation="vertical"]) .ui-tabs-bar > [data-slot="tabs-list"] {
     flex: 1 1 auto;
   }
 
@@ -146,6 +150,27 @@
     block-size: var(--tabs-tab-remove-icon-size);
   }
 
+  .ui-tabs-overflow {
+    display: inline-flex;
+    flex: 0 0 auto;
+    inline-size: var(--tabs-overflow-size);
+    block-size: var(--tabs-overflow-size);
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--tabs-overflow-radius);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-tabs-overflow:hover {
+    background: hsl(var(--accent));
+    color: hsl(var(--accent-foreground));
+  }
+
+  .ui-tabs-overflow-icon {
+    inline-size: var(--tabs-overflow-icon-size);
+    block-size: var(--tabs-overflow-icon-size);
+  }
+
   .ui-tabs-add {
     display: inline-flex;
     flex: 0 0 auto;
@@ -208,30 +233,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,
@@ -247,12 +248,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 {
@@ -267,19 +262,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;
@@ -288,50 +274,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);
@@ -340,8 +301,6 @@
     background: hsl(var(--border));
   }
 
-  .ui-context-menu-label,
-  .ui-menubar-label,
   .ui-dropdown-menu-label {
     height: auto;
     min-height: var(--menu-item-height);
@@ -349,19 +308,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;
@@ -369,160 +323,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 {