@godxjp/ui 18.4.0 → 18.6.0

package/dist/styles/navigation-layout.css

@@ -1,4 +1,47 @@
 @layer components {
+  .ui-app-setting-picker-inline {
+    width: auto;
+    min-height: 0;
+    height: auto;
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+    font: inherit;
+  }
+
+  [data-slot="auth-legal-footer"] .ui-app-setting-picker-inline {
+    width: auto;
+    min-height: 0;
+    height: auto;
+    border-width: 0;
+    border-radius: 0;
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .ui-app-setting-picker-inline:hover,
+  .ui-app-setting-picker-inline[data-state="open"] {
+    background: transparent;
+    color: hsl(var(--foreground));
+    text-decoration: underline;
+  }
+
+  /*
+   * AppSettingPicker `compact` (gh#217) — a small, content-hugging LABELLED trigger for auth /
+   * legal footers: it keeps the icon, the readable value and the real control chrome (so it is
+   * obviously a switcher), but re-tiers the box to --control-height-sm and drops the picker's owned
+   * per-kind width. Every value is a token; the height comes from the official control tier, never
+   * a literal or an ad-hoc calc.
+   */
+  .ui-app-setting-picker-compact {
+    --control-height: var(--app-setting-picker-compact-control-height);
+    --control-padding-x: var(--app-setting-picker-compact-padding-x);
+    --control-font-size: var(--app-setting-picker-compact-font-size);
+  }
   [data-slot="tabs-list"] {
     max-inline-size: var(--tabs-list-max-inline-size);
     overflow-x: var(--tabs-list-overflow);
@@ -6,6 +49,45 @@
     scrollbar-width: thin;
   }
 
+  /* Tabs `line` — the ACTIVE decoration is a token-owned bar and nothing else (gh#248). It is
+   * deliberately painted here (not as an `after:*` utility) so it stays independent of the
+   * `:focus-visible` ring utilities: "selected" and "keyboard-focused" are two different states and
+   * must remain visually distinct (WCAG 2.4.7). Logical insets keep the vertical rail on the
+   * inline-END edge under dir="rtl" too. */
+  [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
+    content: "";
+    position: absolute;
+    background: var(--tabs-indicator-background, hsl(var(--primary)));
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+    pointer-events: none;
+  }
+
+  [data-slot="tabs-list"][data-variant="line"][data-orientation="horizontal"]
+    [data-slot="tabs-trigger"]::after {
+    inset-inline: 0;
+    inset-block-end: calc(-1 * var(--tabs-indicator-offset));
+    block-size: var(--tabs-indicator-size);
+  }
+
+  [data-slot="tabs-list"][data-variant="line"][data-orientation="vertical"]
+    [data-slot="tabs-trigger"]::after {
+    inset-block: 0;
+    inset-inline-end: calc(-1 * var(--tabs-indicator-offset));
+    inline-size: var(--tabs-indicator-size);
+  }
+
+  [data-slot="tabs-list"][data-variant="line"]
+    [data-slot="tabs-trigger"][data-state="active"]::after {
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
+      transition: none;
+    }
+  }
+
   .ui-context-menu-content {
     z-index: 50;
     min-width: 10rem;
@@ -277,3 +359,73 @@
     transform-origin: center;
   }
 }
+
+@layer components {
+  .ui-steps-inline {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--steps-inline-gap);
+    font-size: var(--steps-inline-font-size);
+    line-height: var(--line-height-tight);
+  }
+
+  .ui-steps-inline-item {
+    display: inline-flex;
+    min-width: 0;
+    flex: 0 1 auto;
+    align-items: center;
+    gap: var(--steps-inline-gap);
+    text-align: start;
+  }
+
+  .ui-steps-inline-control {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--steps-inline-item-gap);
+    border-radius: var(--radius-sm);
+    outline: none;
+  }
+
+  button.ui-steps-inline-control:focus-visible {
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
+  }
+
+  .ui-steps-inline-index {
+    flex: none;
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--font-weight-bold);
+  }
+
+  .ui-steps-inline-title {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .ui-steps-inline-item[data-status="finish"] .ui-steps-inline-control {
+    color: hsl(var(--primary));
+  }
+
+  .ui-steps-inline-item[data-status="process"] .ui-steps-inline-control {
+    color: hsl(var(--foreground));
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-steps-inline-item[data-status="error"] .ui-steps-inline-control {
+    color: hsl(var(--destructive));
+  }
+
+  .ui-steps-inline-item[data-status="wait"] .ui-steps-inline-control,
+  .ui-steps-inline-separator {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-steps-inline-separator {
+    width: var(--steps-inline-separator-size);
+    height: var(--steps-inline-separator-size);
+    flex: none;
+  }
+}