@godxjp/ui 33.20.0 → 33.22.1

package/dist/styles/logo-layout.css

@@ -71,6 +71,33 @@
     translate: 0 var(--logo-glyph-optical-offset, var(--logo-glyph-x-descender-optical-offset));
   }
 
+  @supports (text-box: trim-both cap alphabetic) {
+    .ui-logo-glyph[data-ink] {
+      translate: 0 var(--logo-glyph-optical-offset, 0em);
+    }
+
+    .ui-logo-glyph[data-ink="cap-baseline"] {
+      text-box: trim-both cap alphabetic;
+    }
+
+    .ui-logo-glyph[data-ink="cap-descender"] {
+      text-box: trim-both cap alphabetic;
+    }
+
+    .ui-logo-glyph[data-ink="x-baseline"] {
+      text-box: trim-both ex alphabetic;
+    }
+
+    .ui-logo-glyph[data-ink="x-descender"] {
+      text-box: trim-both ex alphabetic;
+    }
+
+    .ui-logo-glyph:is([data-ink="cap-descender"], [data-ink="x-descender"]) {
+      translate: 0
+        var(--logo-glyph-optical-offset, var(--logo-glyph-descender-trimmed-optical-offset));
+    }
+  }
+
   .ui-logo[data-size="xs"] {
     width: var(--logo-size-xs);
     height: var(--logo-size-xs);

package/dist/styles/shell-layout.css

@@ -299,10 +299,18 @@
 
   .app-footer {
     grid-area: footer;
+    padding-inline: var(--space-page-x);
+    flex-shrink: 0;
     border-top: var(--stroke-hairline) solid hsl(var(--border));
     background: hsl(var(--background));
   }
 
+  @media (max-width: 720px) {
+    .app-footer {
+      padding-inline: var(--space-page-compact-x);
+    }
+  }
+
   .app-main .ui-page-container {
     width: 100%;
   }
@@ -713,6 +721,31 @@
     color: hsl(var(--muted-foreground));
   }
 
+  .ui-centered-shell {
+    --centered-shell-page-ink: var(--foreground);
+    --centered-shell-page-canvas: var(--background);
+  }
+
+  .ui-centered-shell-footer[data-tone="inverse"] {
+    --foreground: var(
+      --centered-shell-footer-inverse-foreground,
+      var(--centered-shell-page-canvas)
+    );
+    --muted-foreground: var(
+      --centered-shell-footer-inverse-muted-foreground,
+      var(--centered-shell-page-canvas)
+    );
+    --border: var(--centered-shell-footer-inverse-border, var(--centered-shell-page-canvas));
+    --text-link: var(--centered-shell-footer-inverse-link-color, var(--centered-shell-page-canvas));
+    --ring: var(--centered-shell-footer-inverse-link-color, var(--centered-shell-page-canvas));
+    --focus-ring-color: var(--ring);
+    background: hsl(
+      var(--centered-shell-footer-inverse-background, var(--centered-shell-page-ink))
+    );
+    color: hsl(var(--foreground));
+    border-top-color: transparent;
+  }
+
   @media (max-width: 720px) {
     .ui-centered-shell-bar {
       padding-inline: var(--centered-shell-bar-padding-x-compact);
@@ -760,7 +793,7 @@
   }
 
   .app-topbar-logo,
-  .app-topbar-logo > a {
+  .app-topbar-logo > a:not(.ui-logo) {
     display: flex;
     align-items: center;
   }
@@ -2367,6 +2400,12 @@
     color: hsl(var(--topbar-item-hover-color, var(--accent-foreground)));
   }
 
+  .ui-topbar-item[aria-current="page"] {
+    color: hsl(var(--topbar-item-current-color, var(--foreground)));
+    box-shadow: inset 0 calc(-1 * var(--topbar-item-current-indicator-size))
+      hsl(var(--topbar-item-current-indicator-color, var(--primary)));
+  }
+
   .ui-topbar-item:disabled,
   .ui-topbar-item[data-disabled] {
     opacity: var(--disabled-opacity);
@@ -2731,6 +2770,10 @@
   }
 
   .ui-mobile-shell-tabbar {
+    --control-height: var(--mobile-shell-control-height);
+    --control-height-sm: calc(var(--control-height) - calc(0.25rem * var(--scaling)));
+    --control-height-lg: calc(var(--control-height) + calc(0.25rem * var(--scaling)));
+    --control-height-xs: calc(var(--control-height) - calc(0.5rem * var(--scaling)));
     display: flex;
     min-block-size: calc(
       var(--mobile-shell-tab-bar-height) + var(--mobile-shell-safe-inset-block-end)
@@ -2739,15 +2782,23 @@
     flex: 0 0 auto;
     padding-block-end: var(--mobile-shell-safe-inset-block-end);
     padding-inline: var(--mobile-shell-safe-inset-inline);
-    border-block-start: var(--stroke-hairline) solid hsl(var(--border));
-    background: hsl(var(--card) / var(--card-alpha, 100%));
+    border-block-start: var(--mobile-shell-tab-bar-border);
+    background: var(--mobile-shell-tab-bar-background, hsl(var(--card) / var(--card-alpha, 100%)));
   }
 
   .ui-mobile-shell-tabbar > * {
+    block-size: auto;
+    min-block-size: var(--mobile-shell-control-height);
     min-inline-size: 0;
     flex: 1 1 0;
   }
 
+  .ui-mobile-shell-tabbar > [aria-current="page"] {
+    color: var(--mobile-shell-tab-bar-active-color, hsl(var(--text-brand, var(--primary))));
+    background: var(--mobile-shell-tab-bar-active-background, hsl(var(--accent)));
+    font-weight: var(--font-weight-medium);
+  }
+
   .ui-mobile-shell-actions:last-child {
     padding-block-end: calc(
       var(--mobile-shell-actions-padding-block) + var(--mobile-shell-safe-inset-block-end)
@@ -2828,6 +2879,7 @@
     }
     .app-root[data-responsive-navigation]
       > :is(.app-sidebar, .app-topbar, .app-nav-rail, .app-footer),
+    .app-root > .app-main > .app-footer,
     .app-breadcrumb,
     .app-mobile-nav-drawer {
       display: none;
@@ -2843,3 +2895,49 @@
     }
   }
 }
+
+@layer components {
+  .app-root[data-mobile-tab-bar] {
+    position: relative;
+
+    padding-block-end: var(
+      --app-shell-mobile-tab-bar-block-size,
+      calc(var(--mobile-shell-tab-bar-height) + var(--mobile-shell-safe-inset-block-end))
+    );
+  }
+
+  .app-root[data-mobile-tab-bar] > .app-main > .ui-page-container {
+    flex-shrink: 0;
+  }
+  .app-mobile-tab-bar {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+  }
+  @media (width > 56.25rem) {
+    .app-root[data-mobile-tab-bar] {
+      padding-block-end: 0;
+    }
+    .app-mobile-tab-bar {
+      display: none;
+    }
+  }
+}
+
+@layer components {
+  @media print {
+    .app-root[data-mobile-tab-bar] {
+      padding-block-end: 0;
+    }
+    .ui-mobile-shell-tabbar {
+      display: none;
+    }
+  }
+}
+
+@layer godxjp-ui-responsive {
+  .ui-mobile-shell-tabbar > * {
+    block-size: auto;
+    align-self: stretch;
+  }
+}

package/dist/styles/table-layout.css

@@ -3,7 +3,7 @@
 @layer components {
 
   [data-slot="table"] {
-    font-size: var(--table-font-size);
+    font-size: var(--table-font-size, var(--font-size-sm, var(--font-size-base)));
     line-height: var(--table-line-height);
   }
 
@@ -892,7 +892,7 @@
       --table-row-height: var(--table-action-collection-row-height-compact);
       --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
       --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
-      font-size: var(--table-action-collection-font-size-compact);
+      font-size: var(--table-font-size, var(--table-action-collection-font-size-compact));
 
       min-inline-size: max(
         var(--table-action-collection-min-inline-size-compact),
@@ -934,7 +934,7 @@
       --table-row-height: var(--table-action-collection-row-height-compact);
       --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
       --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
-      font-size: var(--table-action-collection-font-size-compact);
+      font-size: var(--table-font-size, var(--table-action-collection-font-size-compact));
 
       min-inline-size: max(
         var(--table-action-collection-min-inline-size-compact),
@@ -976,7 +976,7 @@
       --table-row-height: var(--table-action-collection-row-height-compact);
       --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
       --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
-      font-size: var(--table-action-collection-font-size-compact);
+      font-size: var(--table-font-size, var(--table-action-collection-font-size-compact));
 
       min-inline-size: max(
         var(--table-action-collection-min-inline-size-compact),
@@ -1018,7 +1018,7 @@
       --table-row-height: var(--table-action-collection-row-height-compact);
       --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
       --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
-      font-size: var(--table-action-collection-font-size-compact);
+      font-size: var(--table-font-size, var(--table-action-collection-font-size-compact));
 
       min-inline-size: max(
         var(--table-action-collection-min-inline-size-compact),
@@ -1072,8 +1072,11 @@
 
       height: auto;
 
-      border: 0;
-      border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+      border-inline: 0;
+      border-block-start: 0;
+      border-block-end-width: var(--table-row-border-width, var(--stroke-hairline));
+      border-block-end-style: solid;
+      border-block-end-color: hsl(var(--border));
       border-radius: 0;
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
@@ -1136,8 +1139,11 @@
 
       height: auto;
 
-      border: 0;
-      border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+      border-inline: 0;
+      border-block-start: 0;
+      border-block-end-width: var(--table-row-border-width, var(--stroke-hairline));
+      border-block-end-style: solid;
+      border-block-end-color: hsl(var(--border));
       border-radius: 0;
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
@@ -1198,8 +1204,11 @@
 
       height: auto;
 
-      border: 0;
-      border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+      border-inline: 0;
+      border-block-start: 0;
+      border-block-end-width: var(--table-row-border-width, var(--stroke-hairline));
+      border-block-end-style: solid;
+      border-block-end-color: hsl(var(--border));
       border-radius: 0;
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
@@ -1260,8 +1269,11 @@
 
       height: auto;
 
-      border: 0;
-      border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+      border-inline: 0;
+      border-block-start: 0;
+      border-block-end-width: var(--table-row-border-width, var(--stroke-hairline));
+      border-block-end-style: solid;
+      border-block-end-color: hsl(var(--border));
       border-radius: 0;
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x, var(--card-space-inset));

package/dist/styles/text-layout.css

@@ -5,6 +5,12 @@
     margin: 0;
   }
 
+  [data-slot="text"][data-size="inherit"] {
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
+
   [data-slot="text"][data-size="2xs"] {
     font-size: var(
       --font-size-2xs,