@kouji-ui/components 0.1.1

package/src/dialog/dialog.css

@@ -0,0 +1,56 @@
+@layer kj.component {
+  .kj-dialog-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgb(0 0 0 / 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+  .kj-dialog {
+    display: flex;
+    flex-direction: column;
+    background: var(--kj-bg-elevated);
+    color: var(--kj-fg-default);
+    border-radius: var(--kj-radius-box);
+    box-shadow: var(--kj-shadow-lg);
+    min-width: 24rem;
+    max-width: min(40rem, calc(100vw - 2rem));
+    max-height: calc(100vh - 4rem);
+    overflow: hidden;
+    padding: var(--kj-space-xl);
+  }
+  .kj-dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: var(--kj-space-lg) var(--kj-space-xl);
+    border-bottom: var(--kj-border) solid var(--kj-border-muted);
+  }
+  .kj-dialog-header[data-align="center"] { justify-content: center; }
+  .kj-dialog-title {
+    display: block;
+    margin: 0;
+    font: 600 1.125rem / 1.3 var(--kj-font-sans);
+    color: var(--kj-fg-default);
+  }
+  .kj-dialog-body {
+    flex: 1;
+    color: var(--kj-fg-default);
+    font: 0.9375rem / 1.5 var(--kj-font-sans);
+  }
+  .kj-dialog-body[data-padded] { padding: var(--kj-space-lg) var(--kj-space-xl); }
+  .kj-dialog-body[data-scroll] { overflow-y: auto; }
+  .kj-dialog-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-sm);
+    padding: var(--kj-space-lg) var(--kj-space-xl);
+    border-top: var(--kj-border) solid var(--kj-border-muted);
+  }
+  .kj-dialog-footer[data-align="start"]   { justify-content: flex-start; }
+  .kj-dialog-footer[data-align="center"]  { justify-content: center; }
+  .kj-dialog-footer[data-align="end"]     { justify-content: flex-end; }
+  .kj-dialog-footer[data-align="between"] { justify-content: space-between; }
+}

package/src/dialog/dialog.playground.ts

@@ -0,0 +1,136 @@
+import { ChangeDetectionStrategy, Component, effect, inject, signal } from '@angular/core';
+import { KjDialog, KjDialogService } from './dialog';
+import { KjButtonComponent } from '../button/button';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals. The `open` toggle drives the
+ * service-launched dialog; the title / message text + actions toggle are
+ * baked into the body component via a small registry signal so the live
+ * dialog reflects the knobs while open.
+ */
+const title = signal('Save changes?');
+const message = signal('Your edits will be applied immediately.');
+const showCancel = signal(true);
+
+// Bridge signal — read by the body component below. Module-scope because the
+// dialog body is instantiated through KjDialogService and cannot accept inputs.
+const open = signal(false);
+
+@Component({
+  selector: 'kj-dialog-playground-body',
+  standalone: true,
+  imports: [KjDialog, KjButtonComponent],
+  template: `
+    <kj-dialog>
+      <h2 style="margin:0 0 var(--kj-space-md)">{{ title() }}</h2>
+      <p>{{ message() }}</p>
+      <div style="display:flex; gap: var(--kj-space-sm); justify-content: flex-end; margin-top: var(--kj-space-lg)">
+        @if (showCancel()) {
+          <kj-button kjVariant="ghost">Cancel</kj-button>
+        }
+        <kj-button kjVariant="default">Save</kj-button>
+      </div>
+    </kj-dialog>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class KjDialogPlaygroundBody {
+  protected readonly title = title;
+  protected readonly message = message;
+  protected readonly showCancel = showCancel;
+}
+
+@Component({
+  selector: 'kj-dialog-playground',
+  standalone: true,
+  imports: [KjButtonComponent],
+  styles: [`
+    :host { display: flex; flex-direction: column; gap: var(--kj-space-lg); align-items: flex-start; min-height: 12rem; }
+    .pg-static {
+      width: min(24rem, 100%);
+      background: var(--kj-bg-elevated);
+      color: var(--kj-fg-default);
+      border: var(--kj-border) solid var(--kj-border-default);
+      border-radius: var(--kj-radius-box);
+      padding: var(--kj-space-xl);
+      box-shadow: var(--kj-shadow-lg);
+      font: 0.9375rem / 1.5 var(--kj-font-sans);
+    }
+    .pg-static h3 { margin: 0 0 var(--kj-space-md); font-size: 1.125rem; }
+    .pg-static p { margin: 0; color: var(--kj-fg-muted); }
+    .pg-static__actions { display: flex; gap: var(--kj-space-sm); justify-content: flex-end; margin-top: var(--kj-space-lg); }
+  `],
+  template: `
+    <kj-button (click)="onOpen()">Open dialog</kj-button>
+    <div class="pg-static" role="dialog" aria-label="Dialog preview">
+      <h3>{{ title() }}</h3>
+      <p>{{ message() }}</p>
+      <div class="pg-static__actions">
+        @if (showCancel()) {
+          <kj-button kjVariant="ghost">Cancel</kj-button>
+        }
+        <kj-button kjVariant="default">Save</kj-button>
+      </div>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjDialogPlaygroundDemo {
+  private readonly dialog = inject(KjDialogService);
+
+  protected readonly title = title;
+  protected readonly message = message;
+  protected readonly showCancel = showCancel;
+  protected readonly open = open;
+
+  constructor() {
+    // React to the open knob — open the dialog when toggled true, ignore when
+    // toggled back to false (the dialog manages its own close lifecycle).
+    effect(() => {
+      if (open()) {
+        const ref = this.dialog.open(KjDialogPlaygroundBody);
+        ref.afterClosed$.subscribe(() => open.set(false));
+      }
+    });
+  }
+
+  protected onOpen(): void {
+    open.set(true);
+  }
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjDialogPlaygroundDemo,
+  state: {
+    title: title as unknown as ReturnType<typeof signal>,
+    message: message as unknown as ReturnType<typeof signal>,
+    showCancel: showCancel as unknown as ReturnType<typeof signal>,
+    open: open as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    { kind: 'text', name: 'title', label: 'title' },
+    { kind: 'text', name: 'message', label: 'message' },
+    { kind: 'toggle', name: 'showCancel', label: 'show cancel' },
+    { kind: 'toggle', name: 'open', label: 'open' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      title: string;
+      message: string;
+      showCancel: boolean;
+      open: boolean;
+    };
+    const lines: string[] = [];
+    lines.push(`<kj-button (click)="open()">Open dialog</kj-button>`);
+    lines.push('');
+    lines.push('// dialog body component');
+    lines.push('<kj-dialog>');
+    lines.push(`  <h2>${s.title}</h2>`);
+    lines.push(`  <p>${s.message}</p>`);
+    if (s.showCancel) lines.push('  <kj-button kjVariant="ghost">Cancel</kj-button>');
+    lines.push('  <kj-button kjVariant="default">Save</kj-button>');
+    lines.push('</kj-dialog>');
+    return lines.join('\n');
+  },
+};

package/src/dialog/dialog.ts

@@ -0,0 +1,82 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+export {
+  KjDialog,
+  KjDialogService,
+  KjDialogRef,
+  type KjDialogOpenOptions,
+} from '@kouji-ui/core';
+
+/**
+ * Service-launched modal dialog. Inject `KjDialogService` and call `open()`
+ * with a template; mount `[kjDialog]` once near your trigger to host the
+ * panel. The wrapper component exists purely to give the dialog suite a
+ * dedicated documentation page.
+ *
+ * @doc-keyboard
+ *   Escape         — Closes the dialog (only the topmost overlay receives Escape when nested)
+ *   Tab            — Cycles focus within the dialog (focus trap via `tabCycle({ returnFocus: true })`)
+ *   Shift+Tab      — Cycles focus backward, wrapping at the first focusable element
+ *
+ * @doc-aria
+ *   role           — "dialog" by default; the service sets "alertdialog" when opened with `alert: true`
+ *   aria-modal     — "true" when a backdrop with `inertSiblings` is active (the default for modal dialogs)
+ *   aria-labelledby — wire to the id of your `<kj-dialog-title>` so the dialog has an accessible name
+ *   aria-describedby — wire to the id of your description node when the title alone is not sufficient
+ *
+ * @doc-touch
+ *   The dialog surface itself is not a touch target. Footer action buttons should use `size="lg"` (44px) to meet WCAG 2.5.5 — the confirmation, scrollable, and with-form examples follow this pattern.
+ *
+ * @doc-a11y
+ *   Focus is trapped inside the dialog while it is open and returned to the
+ *   triggering element on close (`returnFocus: true`). Siblings outside the
+ *   dialog are marked `inert` while it is open, so assistive tech sees only
+ *   the dialog tree. When stacking dialogs (nested overlays), only the topmost
+ *   overlay receives Escape and outside-click, preventing accidental dismissal
+ *   of background dialogs. The wrapper does not generate an accessible name —
+ *   you must provide one via `aria-labelledby` (pointing to a visible heading)
+ *   or `aria-label`.
+ *
+ * @doc-related drawer,popover,confirm-popup
+ *
+ * @doc
+ * @doc-name dialog
+ * @doc-is-main
+ * @doc-example Default
+ *   The simplest service-launched dialog — open a body component from a button.
+ *   @doc-file dialog.default.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common dialog usages — open a confirmation and
+ *   resolve through `afterClosed$`.
+ *   @doc-file dialog.usage.example.ts
+ * @doc-example Confirmation
+ *   Yes/no confirmation with a typed result via `KjDialogRef<T, R>`.
+ *   @doc-file dialog.confirmation.example.ts
+ * @doc-example Scrollable
+ *   Long bodies scroll inside the panel while the header / footer stay pinned.
+ *   @doc-file dialog.scrollable.example.ts
+ * @doc-example With form
+ *   A reactive form lives inside the panel; submit closes with the value.
+ *   @doc-file dialog.with-form.example.ts
+ * @doc-example Nested overlays
+ *   Open another dialog from inside a dialog — only the topmost gets Escape.
+ *   @doc-file dialog.nested.example.ts
+ *
+ * @doc-css-var
+ *   --kj-bg-elevated  — Panel background fill. Inherited from the theme.
+ *   --kj-radius-box   — Panel corner radius. Inherited from the theme.
+ *   --kj-shadow-lg    — Box shadow under the panel. Inherited from the theme.
+ *   --kj-space-xl     — Default panel padding.
+ *
+ * @doc-category Library/Overlay
+ */
+@Component({
+  selector: 'kj-dialog-shell',
+  standalone: true,
+  template: `<ng-content />`,
+  styleUrl: './dialog.css',
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjDialogComponent {}

package/src/dialog/index.ts

@@ -0,0 +1 @@
+export * from './dialog';

package/src/divider/_examples/divider.example.ts

@@ -0,0 +1,27 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjDividerComponent } from '../divider';
+
+/**
+ * Default usage example for KjDividerComponent.
+ * Renders a horizontal rule between two short text blocks so the
+ * separator's spacing and stroke are visible against real content.
+ */
+@Component({
+  selector: 'kj-divider-example',
+  standalone: true,
+  imports: [KjDividerComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <p>Above the divider — the first paragraph of content.</p>
+    <kj-divider />
+    <p>Below the divider — the second paragraph of content.</p>
+  `,
+})
+export class KjDividerExample {}

package/src/divider/_examples/divider.sizes.example.ts

@@ -0,0 +1,33 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjDividerComponent } from '../divider';
+
+/**
+ * Size presets — `sm` / `md` / `lg` — stacked vertically. The size
+ * routing pairs a thicker stroke with looser surrounding spacing,
+ * so the visual rhythm changes alongside the rule thickness.
+ */
+@Component({
+  selector: 'kj-divider-sizes-example',
+  standalone: true,
+  imports: [KjDividerComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <p>Small — tight spacing, hairline rule.</p>
+    <kj-divider kjSize="sm" />
+    <p>Medium — the default size.</p>
+    <kj-divider kjSize="md" />
+    <p>Large — generous spacing, thicker rule.</p>
+    <kj-divider kjSize="lg" />
+    <p>Trailing content for the largest size.</p>
+  `,
+})
+export class KjDividerSizesExample {}

package/src/divider/_examples/divider.structural.example.ts

@@ -0,0 +1,55 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjDividerComponent } from '../divider';
+
+/**
+ * Structural (semantic) divider between two page sections. With
+ * `kjStructural="true"` the rule keeps the implicit `role="separator"`
+ * from the underlying `<hr>` and drops the decorative `aria-hidden`,
+ * so assistive technologies announce the break between the two
+ * regions that aren't already demarcated by surrounding landmark
+ * or heading structure.
+ */
+@Component({
+  selector: 'kj-divider-structural-example',
+  standalone: true,
+  imports: [KjDividerComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+      }
+      section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-xs);
+      }
+      ul {
+        margin: 0;
+        padding-inline-start: var(--kj-space-lg);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <section>
+      <p>Account preferences — tune how your profile is presented.</p>
+      <ul>
+        <li>Display name</li>
+        <li>Avatar</li>
+      </ul>
+    </section>
+
+    <kj-divider [kjStructural]="true" />
+
+    <section>
+      <p>Notifications — choose which events reach your inbox.</p>
+      <ul>
+        <li>Mentions</li>
+        <li>Weekly digest</li>
+      </ul>
+    </section>
+  `,
+})
+export class KjDividerStructuralExample {}

package/src/divider/_examples/divider.usage.example.ts

@@ -0,0 +1,48 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjDividerComponent } from '../divider';
+
+/**
+ * A walkthrough of the most common divider usages — a structural horizontal
+ * separator, a labelled rule, and a vertical divider inside a flex row.
+ */
+@Component({
+  selector: 'kj-divider-usage-example',
+  standalone: true,
+  imports: [KjDividerComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-lg);
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: var(--kj-space-md);
+        height: 2rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <section>
+      <p>First section content.</p>
+      <kj-divider [kjStructural]="true" />
+      <p>Second section content.</p>
+    </section>
+
+    <section>
+      <kj-divider [kjStructural]="true">OR</kj-divider>
+    </section>
+
+    <div class="row">
+      <span>Item A</span>
+      <kj-divider kjOrientation="vertical" />
+      <span>Item B</span>
+      <kj-divider kjOrientation="vertical" />
+      <span>Item C</span>
+    </div>
+  `,
+})
+export class KjDividerUsageExample {}

package/src/divider/_examples/divider.variants.example.ts

@@ -0,0 +1,33 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjDividerComponent } from '../divider';
+
+/**
+ * Line-style variants — `solid` / `dashed` / `dotted` — stacked
+ * vertically with short content between each pair so the stroke of
+ * each variant reads against real surrounding text.
+ */
+@Component({
+  selector: 'kj-divider-variants-example',
+  standalone: true,
+  imports: [KjDividerComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <p>Solid — the default rule style.</p>
+    <kj-divider kjVariant="solid" />
+    <p>Dashed — repeats short strokes.</p>
+    <kj-divider kjVariant="dashed" />
+    <p>Dotted — repeats round dots.</p>
+    <kj-divider kjVariant="dotted" />
+    <p>Trailing content for the last variant.</p>
+  `,
+})
+export class KjDividerVariantsExample {}

package/src/divider/_examples/divider.vertical.example.ts

@@ -0,0 +1,38 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjDividerComponent } from '../divider';
+
+/**
+ * Vertical orientation between two inline elements. The wrapper's
+ * `display: contents` host means the `<kj-divider>` element itself
+ * does not introduce an extra block-level box, so the surrounding
+ * row-flex strip lays out the rule between the two siblings.
+ */
+@Component({
+  selector: 'kj-divider-vertical-example',
+  standalone: true,
+  imports: [KjDividerComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: var(--kj-space-md);
+        min-block-size: 2rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <span>Inbox</span>
+      <kj-divider kjOrientation="vertical" />
+      <span>Drafts</span>
+      <kj-divider kjOrientation="vertical" />
+      <span>Sent</span>
+    </div>
+  `,
+})
+export class KjDividerVerticalExample {}

package/src/divider/_examples/divider.with-content.example.ts

@@ -0,0 +1,38 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjDividerComponent } from '../divider';
+
+/**
+ * Divider with a label nestled into the rule. The canonical "OR"
+ * sign-in divider plus a labelled section break — both are
+ * structural because the label *is* the demarcation between the
+ * two regions it separates.
+ */
+@Component({
+  selector: 'kj-divider-with-content-example',
+  standalone: true,
+  imports: [KjDividerComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-lg);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div>
+      <p>Sign in with your password.</p>
+      <kj-divider [kjStructural]="true">OR</kj-divider>
+      <p>Continue with a single sign-on provider.</p>
+    </div>
+
+    <div>
+      <p>Recent activity from earlier this week.</p>
+      <kj-divider [kjStructural]="true">Today</kj-divider>
+      <p>Activity from the last twenty-four hours.</p>
+    </div>
+  `,
+})
+export class KjDividerWithContentExample {}

package/src/divider/_examples/index.ts

@@ -0,0 +1,9 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjDividerExample } from './divider.example';
+export { KjDividerSizesExample } from './divider.sizes.example';
+export { KjDividerStructuralExample } from './divider.structural.example';
+export { KjDividerUsageExample } from './divider.usage.example';
+export { KjDividerVariantsExample } from './divider.variants.example';
+export { KjDividerVerticalExample } from './divider.vertical.example';
+export { KjDividerWithContentExample } from './divider.with-content.example';

package/src/divider/divider.css

@@ -0,0 +1,93 @@
+@layer kj.component {
+  .kj-divider {
+    --kj-divider-color:     var(--kj-border-default, color-mix(in oklch, var(--kj-fg-default) 20%, transparent));
+    --kj-divider-thickness: 1px;
+    --kj-divider-spacing:   var(--kj-space-md, 1rem);
+    --kj-divider-gap:       var(--kj-space-md, 1rem);
+
+    border: 0;
+    color: inherit;
+  }
+
+  /* Rule-only (the <hr> branch and any <div> with no projected label). */
+  .kj-divider[data-with-content="false"] {
+    block-size: var(--kj-divider-thickness);
+    inline-size: 100%;
+    margin-block: var(--kj-divider-spacing);
+    background-color: var(--kj-divider-color);
+  }
+
+  /* Vertical, rule-only — flips the axis using logical sizing. */
+  .kj-divider[data-with-content="false"][data-orientation="vertical"] {
+    inline-size: var(--kj-divider-thickness);
+    block-size: auto;
+    align-self: stretch;
+    margin-block: 0;
+    margin-inline: var(--kj-divider-spacing);
+  }
+
+  /* With-content (label nestled into the rule). */
+  .kj-divider[data-with-content="true"] {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-divider-gap);
+    margin-block: var(--kj-divider-spacing);
+  }
+
+  .kj-divider[data-with-content="true"][data-orientation="vertical"] {
+    flex-direction: column;
+    block-size: 100%;
+    margin-block: 0;
+    margin-inline: var(--kj-divider-spacing);
+  }
+
+  .kj-divider[data-with-content="true"]::before,
+  .kj-divider[data-with-content="true"]::after {
+    content: "";
+    flex: 1 1 0;
+    background-color: var(--kj-divider-color);
+    block-size: var(--kj-divider-thickness);
+  }
+
+  .kj-divider[data-with-content="true"][data-orientation="vertical"]::before,
+  .kj-divider[data-with-content="true"][data-orientation="vertical"]::after {
+    inline-size: var(--kj-divider-thickness);
+    block-size: auto;
+  }
+
+  /* Alignment of the projected label within the rule. */
+  .kj-divider[data-with-content="true"][data-align="start"]::before  { flex-grow: 0; flex-basis: 1rem; }
+  .kj-divider[data-with-content="true"][data-align="end"]::after     { flex-grow: 0; flex-basis: 1rem; }
+
+  /* Variant routing — line style. */
+  .kj-divider[data-variant="dashed"][data-with-content="false"] {
+    background-color: transparent;
+    border-block-start: var(--kj-divider-thickness) dashed var(--kj-divider-color);
+    block-size: 0;
+  }
+  .kj-divider[data-variant="dashed"][data-with-content="false"][data-orientation="vertical"] {
+    border-block-start: 0;
+    border-inline-start: var(--kj-divider-thickness) dashed var(--kj-divider-color);
+    inline-size: 0;
+  }
+  .kj-divider[data-variant="dotted"][data-with-content="false"] {
+    background-color: transparent;
+    border-block-start: var(--kj-divider-thickness) dotted var(--kj-divider-color);
+    block-size: 0;
+  }
+  .kj-divider[data-variant="dotted"][data-with-content="false"][data-orientation="vertical"] {
+    border-block-start: 0;
+    border-inline-start: var(--kj-divider-thickness) dotted var(--kj-divider-color);
+    inline-size: 0;
+  }
+
+  /* Size routing — spacing + thickness. */
+  .kj-divider[data-size="sm"] { --kj-divider-spacing: var(--kj-space-sm, 0.5rem); --kj-divider-thickness: 1px; }
+  .kj-divider[data-size="lg"] { --kj-divider-spacing: var(--kj-space-lg, 2rem);  --kj-divider-thickness: 2px; }
+
+  .kj-divider__content {
+    color: var(--kj-fg-default);
+    font: inherit;
+    white-space: nowrap;
+  }
+}