@ponchia/ui 0.2.2 → 0.3.0

package/classes/index.d.ts

@@ -1,9 +1,189 @@
-/** @ponchia/ui — typed class-name contract. */
+/** @ponchia/ui — GENERATED from classes/index.js by scripts/gen-dts.mjs.
+ *  Do not edit by hand; run `npm run dts:build`. Drift-checked in CI. */
 
 export type ClassValue = string | false | null | undefined | ClassValue[];
 
-/** The flat registry of every class @ponchia/ui defines. */
-export declare const cls: Readonly<Record<string, string>>;
+/** The flat registry of every class @ponchia/ui defines (literal). */
+export declare const cls: {
+  readonly button: 'ui-button';
+  readonly buttonGhost: 'ui-button--ghost';
+  readonly buttonSubtle: 'ui-button--subtle';
+  readonly buttonDanger: 'ui-button--danger';
+  readonly buttonIcon: 'ui-button--icon';
+  readonly card: 'ui-card';
+  readonly cardHead: 'ui-card__head';
+  readonly cardAccent: 'ui-card--accent';
+  readonly cardInteractive: 'ui-card--interactive';
+  readonly badge: 'ui-badge';
+  readonly badgeAccent: 'ui-badge--accent';
+  readonly badgeSuccess: 'ui-badge--success';
+  readonly badgeWarning: 'ui-badge--warning';
+  readonly badgeDanger: 'ui-badge--danger';
+  readonly chip: 'ui-chip';
+  readonly chipAccent: 'ui-chip--accent';
+  readonly link: 'ui-link';
+  readonly linkArrow: 'ui-link--arrow';
+  readonly keyValue: 'ui-key-value';
+  readonly dot: 'ui-dot';
+  readonly dotAccent: 'ui-dot--accent';
+  readonly dotSuccess: 'ui-dot--success';
+  readonly dotWarning: 'ui-dot--warning';
+  readonly dotDanger: 'ui-dot--danger';
+  readonly dotLive: 'ui-dot--live';
+  readonly dotgrid: 'ui-dotgrid';
+  readonly dotgridAccent: 'ui-dotgrid--accent';
+  readonly dotgridDense: 'ui-dotgrid--dense';
+  readonly dotfield: 'ui-dotfield';
+  readonly dotrule: 'ui-dotrule';
+  readonly dotbar: 'ui-dotbar';
+  readonly dotbarIndeterminate: 'ui-dotbar--indeterminate';
+  readonly dotloader: 'ui-dotloader';
+  readonly dotspinner: 'ui-dotspinner';
+  readonly dotspinnerSm: 'ui-dotspinner--sm';
+  readonly dotspinnerLg: 'ui-dotspinner--lg';
+  readonly field: 'ui-field';
+  readonly label: 'ui-label';
+  readonly input: 'ui-input';
+  readonly select: 'ui-select';
+  readonly textarea: 'ui-textarea';
+  readonly search: 'ui-search';
+  readonly check: 'ui-check';
+  readonly switch: 'ui-switch';
+  readonly switchTrack: 'ui-switch__track';
+  readonly switchThumb: 'ui-switch__thumb';
+  readonly hint: 'ui-hint';
+  readonly hintError: 'ui-hint--error';
+  readonly alert: 'ui-alert';
+  readonly alertTitle: 'ui-alert__title';
+  readonly alertBody: 'ui-alert__body';
+  readonly alertDismiss: 'ui-alert__dismiss';
+  readonly alertAccent: 'ui-alert--accent';
+  readonly alertSuccess: 'ui-alert--success';
+  readonly alertWarning: 'ui-alert--warning';
+  readonly alertDanger: 'ui-alert--danger';
+  readonly toastStack: 'ui-toast-stack';
+  readonly toast: 'ui-toast';
+  readonly toastTitle: 'ui-toast__title';
+  readonly toastAccent: 'ui-toast--accent';
+  readonly toastSuccess: 'ui-toast--success';
+  readonly toastWarning: 'ui-toast--warning';
+  readonly toastDanger: 'ui-toast--danger';
+  readonly tooltip: 'ui-tooltip';
+  readonly tooltipBubble: 'ui-tooltip__bubble';
+  readonly progress: 'ui-progress';
+  readonly progressBar: 'ui-progress__bar';
+  readonly progressIndeterminate: 'ui-progress--indeterminate';
+  readonly modal: 'ui-modal';
+  readonly modalHead: 'ui-modal__head';
+  readonly modalTitle: 'ui-modal__title';
+  readonly modalBody: 'ui-modal__body';
+  readonly modalFoot: 'ui-modal__foot';
+  readonly modalClose: 'ui-modal__close';
+  readonly modalDrawer: 'ui-modal--drawer';
+  readonly menuHost: 'ui-menu-host';
+  readonly menu: 'ui-menu';
+  readonly menuLabel: 'ui-menu__label';
+  readonly menuItem: 'ui-menu__item';
+  readonly menuSep: 'ui-menu__sep';
+  readonly tabs: 'ui-tabs';
+  readonly tabsList: 'ui-tabs__list';
+  readonly tab: 'ui-tab';
+  readonly tabsPanel: 'ui-tabs__panel';
+  readonly accordion: 'ui-accordion';
+  readonly accordionItem: 'ui-accordion__item';
+  readonly accordionSummary: 'ui-accordion__summary';
+  readonly accordionBody: 'ui-accordion__body';
+  readonly segmented: 'ui-segmented';
+  readonly segmentedOption: 'ui-segmented__option';
+  readonly breadcrumb: 'ui-breadcrumb';
+  readonly breadcrumbItem: 'ui-breadcrumb__item';
+  readonly pagination: 'ui-pagination';
+  readonly paginationItem: 'ui-pagination__item';
+  readonly avatar: 'ui-avatar';
+  readonly avatarSm: 'ui-avatar--sm';
+  readonly avatarLg: 'ui-avatar--lg';
+  readonly avatarGroup: 'ui-avatar-group';
+  readonly table: 'ui-table';
+  readonly tableDense: 'ui-table--dense';
+  readonly tableComfortable: 'ui-table--comfortable';
+  readonly tableLined: 'ui-table--lined';
+  readonly tableWrap: 'ui-table-wrap';
+  readonly tableEmpty: 'ui-table__empty';
+  readonly panel: 'ui-panel';
+  readonly panelHead: 'ui-panel__head';
+  readonly surface: 'ui-surface';
+  readonly stack: 'ui-stack';
+  readonly cluster: 'ui-cluster';
+  readonly clusterBetween: 'ui-cluster--between';
+  readonly grid: 'ui-grid';
+  readonly divider: 'ui-divider';
+  readonly status: 'ui-status';
+  readonly eyebrow: 'ui-eyebrow';
+  readonly eyebrowMuted: 'ui-eyebrow--muted';
+  readonly prose: 'ui-prose';
+  readonly proseCompact: 'ui-prose--compact';
+  readonly quote: 'ui-quote';
+  readonly quoteCite: 'ui-quote__cite';
+  readonly container: 'ui-container';
+  readonly containerNarrow: 'ui-container--narrow';
+  readonly skiplink: 'ui-skiplink';
+  readonly siteheader: 'ui-siteheader';
+  readonly siteheaderBrand: 'ui-siteheader__brand';
+  readonly siteheaderActions: 'ui-siteheader__actions';
+  readonly sitenav: 'ui-sitenav';
+  readonly sitemenu: 'ui-sitemenu';
+  readonly sitemenuPanel: 'ui-sitemenu__panel';
+  readonly sitefooter: 'ui-sitefooter';
+  readonly sitefooterLinks: 'ui-sitefooter__links';
+  readonly tags: 'ui-tags';
+  readonly tag: 'ui-tag';
+  readonly tagAccent: 'ui-tag--accent';
+  readonly meta: 'ui-meta';
+  readonly metaItem: 'ui-meta__item';
+  readonly display: 'ui-display';
+  readonly mono: 'ui-mono';
+  readonly muted: 'ui-muted';
+  readonly visuallyHidden: 'ui-visually-hidden';
+  readonly reveal: 'ui-reveal';
+  readonly stagger: 'ui-stagger';
+  readonly staggerAuto: 'ui-stagger--auto';
+  readonly matrix: 'ui-matrix';
+  readonly skeleton: 'ui-skeleton';
+  readonly spinner: 'ui-spinner';
+  readonly caret: 'ui-caret';
+  readonly animateIn: 'ui-animate-in';
+  readonly animateFade: 'ui-animate-fade';
+  readonly animateDot: 'ui-animate-dot';
+  readonly animateMatrix: 'ui-animate-matrix';
+  readonly appShell: 'ui-app-shell';
+  readonly appShellFull: 'ui-app-shell--full';
+  readonly appRail: 'ui-app-rail';
+  readonly appRailBrand: 'ui-app-rail__brand';
+  readonly appRailToggle: 'ui-app-rail__toggle';
+  readonly appRailFoot: 'ui-app-rail__foot';
+  readonly appTopbar: 'ui-app-topbar';
+  readonly appTopbarTitle: 'ui-app-topbar__title';
+  readonly appToolbar: 'ui-app-toolbar';
+  readonly appToolbarGroup: 'ui-app-toolbar__group';
+  readonly appNav: 'ui-app-nav';
+  readonly appNavSection: 'ui-app-nav__section';
+  readonly appMain: 'ui-app-main';
+  readonly appContent: 'ui-app-content';
+  readonly appPanel: 'ui-app-panel';
+  readonly appPanelHead: 'ui-app-panel__head';
+  readonly appPanelTitle: 'ui-app-panel__title';
+  readonly appMetrics: 'ui-app-metrics';
+  readonly appMetric: 'ui-app-metric';
+  readonly appMetricLabel: 'ui-app-metric__label';
+  readonly appMetricValue: 'ui-app-metric__value';
+  readonly appMetricDelta: 'ui-app-metric__delta';
+  readonly appEmptyState: 'ui-app-empty-state';
+  readonly themetoggleButton: 'ui-themetoggle__button';
+  readonly themetogglePrefix: 'ui-themetoggle__prefix';
+  readonly themetoggleLabel: 'ui-themetoggle__label';
+  readonly themetoggleTrack: 'ui-themetoggle__track';
+  readonly themetoggleThumb: 'ui-themetoggle__thumb';
+};
 
 /** classnames-style joiner: skips falsy, flattens arrays. */
 export declare function cx(...parts: ClassValue[]): string;
@@ -77,6 +257,12 @@ export interface AvatarOpts {
 export interface ProseOpts {
   compact?: boolean;
 }
+export interface ContainerOpts {
+  narrow?: boolean;
+}
+export interface TagOpts {
+  accent?: boolean;
+}
 
 export interface Ui {
   button(opts?: ButtonOpts): string;
@@ -100,6 +286,8 @@ export interface Ui {
   tab(opts?: TabOpts): string;
   avatar(opts?: AvatarOpts): string;
   prose(opts?: ProseOpts): string;
+  container(opts?: ContainerOpts): string;
+  tag(opts?: TagOpts): string;
 }
 
 export declare const ui: Ui;

package/classes/index.js

@@ -97,6 +97,7 @@ export const cls = Object.freeze({
   modalFoot: 'ui-modal__foot',
   modalClose: 'ui-modal__close',
   modalDrawer: 'ui-modal--drawer',
+  menuHost: 'ui-menu-host',
   menu: 'ui-menu',
   menuLabel: 'ui-menu__label',
   menuItem: 'ui-menu__item',
@@ -142,6 +143,25 @@ export const cls = Object.freeze({
   eyebrowMuted: 'ui-eyebrow--muted',
   prose: 'ui-prose',
   proseCompact: 'ui-prose--compact',
+  quote: 'ui-quote',
+  quoteCite: 'ui-quote__cite',
+  // site shell
+  container: 'ui-container',
+  containerNarrow: 'ui-container--narrow',
+  skiplink: 'ui-skiplink',
+  siteheader: 'ui-siteheader',
+  siteheaderBrand: 'ui-siteheader__brand',
+  siteheaderActions: 'ui-siteheader__actions',
+  sitenav: 'ui-sitenav',
+  sitemenu: 'ui-sitemenu',
+  sitemenuPanel: 'ui-sitemenu__panel',
+  sitefooter: 'ui-sitefooter',
+  sitefooterLinks: 'ui-sitefooter__links',
+  tags: 'ui-tags',
+  tag: 'ui-tag',
+  tagAccent: 'ui-tag--accent',
+  meta: 'ui-meta',
+  metaItem: 'ui-meta__item',
   display: 'ui-display',
   mono: 'ui-mono',
   muted: 'ui-muted',
@@ -158,6 +178,36 @@ export const cls = Object.freeze({
   animateFade: 'ui-animate-fade',
   animateDot: 'ui-animate-dot',
   animateMatrix: 'ui-animate-matrix',
+  // admin shell (was the legacy .app-* vocabulary; promoted in 0.3.0)
+  appShell: 'ui-app-shell',
+  appShellFull: 'ui-app-shell--full',
+  appRail: 'ui-app-rail',
+  appRailBrand: 'ui-app-rail__brand',
+  appRailToggle: 'ui-app-rail__toggle',
+  appRailFoot: 'ui-app-rail__foot',
+  appTopbar: 'ui-app-topbar',
+  appTopbarTitle: 'ui-app-topbar__title',
+  appToolbar: 'ui-app-toolbar',
+  appToolbarGroup: 'ui-app-toolbar__group',
+  appNav: 'ui-app-nav',
+  appNavSection: 'ui-app-nav__section',
+  appMain: 'ui-app-main',
+  appContent: 'ui-app-content',
+  appPanel: 'ui-app-panel',
+  appPanelHead: 'ui-app-panel__head',
+  appPanelTitle: 'ui-app-panel__title',
+  appMetrics: 'ui-app-metrics',
+  appMetric: 'ui-app-metric',
+  appMetricLabel: 'ui-app-metric__label',
+  appMetricValue: 'ui-app-metric__value',
+  appMetricDelta: 'ui-app-metric__delta',
+  appEmptyState: 'ui-app-empty-state',
+  // theme toggle (was the legacy .theme-toggle__* vocabulary)
+  themetoggleButton: 'ui-themetoggle__button',
+  themetogglePrefix: 'ui-themetoggle__prefix',
+  themetoggleLabel: 'ui-themetoggle__label',
+  themetoggleTrack: 'ui-themetoggle__track',
+  themetoggleThumb: 'ui-themetoggle__thumb',
 });
 
 /** classnames-style joiner: skips falsy, flattens nested arrays of any depth. */
@@ -176,7 +226,7 @@ export const ui = {
       variant === 'ghost' && cls.buttonGhost,
       variant === 'subtle' && cls.buttonSubtle,
       variant === 'danger' && cls.buttonDanger,
-      icon && cls.buttonIcon
+      icon && cls.buttonIcon,
     ),
   card: ({ accent, interactive } = {}) =>
     j(cls.card, accent && cls.cardAccent, interactive && cls.cardInteractive),
@@ -186,7 +236,7 @@ export const ui = {
       tone === 'accent' && cls.badgeAccent,
       tone === 'success' && cls.badgeSuccess,
       tone === 'warning' && cls.badgeWarning,
-      tone === 'danger' && cls.badgeDanger
+      tone === 'danger' && cls.badgeDanger,
     ),
   chip: ({ accent } = {}) => j(cls.chip, accent && cls.chipAccent),
   link: ({ arrow } = {}) => j(cls.link, arrow && cls.linkArrow),
@@ -197,7 +247,7 @@ export const ui = {
       tone === 'success' && cls.dotSuccess,
       tone === 'warning' && cls.dotWarning,
       tone === 'danger' && cls.dotDanger,
-      live && cls.dotLive
+      live && cls.dotLive,
     ),
   dotgrid: ({ accent, dense } = {}) =>
     j(cls.dotgrid, accent && cls.dotgridAccent, dense && cls.dotgridDense),
@@ -206,7 +256,7 @@ export const ui = {
       cls.table,
       density === 'dense' && cls.tableDense,
       density === 'comfortable' && cls.tableComfortable,
-      lined && cls.tableLined
+      lined && cls.tableLined,
     ),
   eyebrow: ({ muted } = {}) => j(cls.eyebrow, muted && cls.eyebrowMuted),
   hint: ({ error } = {}) => j(cls.hint, error && cls.hintError),
@@ -218,7 +268,7 @@ export const ui = {
       tone === 'accent' && cls.alertAccent,
       tone === 'success' && cls.alertSuccess,
       tone === 'warning' && cls.alertWarning,
-      tone === 'danger' && cls.alertDanger
+      tone === 'danger' && cls.alertDanger,
     ),
   toast: ({ tone } = {}) =>
     j(
@@ -226,19 +276,19 @@ export const ui = {
       tone === 'accent' && cls.toastAccent,
       tone === 'success' && cls.toastSuccess,
       tone === 'warning' && cls.toastWarning,
-      tone === 'danger' && cls.toastDanger
+      tone === 'danger' && cls.toastDanger,
     ),
-  progress: ({ indeterminate } = {}) =>
-    j(cls.progress, indeterminate && cls.progressIndeterminate),
+  progress: ({ indeterminate } = {}) => j(cls.progress, indeterminate && cls.progressIndeterminate),
   dotspinner: ({ size } = {}) =>
     j(cls.dotspinner, size === 'sm' && cls.dotspinnerSm, size === 'lg' && cls.dotspinnerLg),
-  dotbar: ({ indeterminate } = {}) =>
-    j(cls.dotbar, indeterminate && cls.dotbarIndeterminate),
+  dotbar: ({ indeterminate } = {}) => j(cls.dotbar, indeterminate && cls.dotbarIndeterminate),
   modal: ({ drawer } = {}) => j(cls.modal, drawer && cls.modalDrawer),
   tab: ({ active } = {}) => j(cls.tab, active && 'is-active'),
   avatar: ({ size } = {}) =>
     j(cls.avatar, size === 'sm' && cls.avatarSm, size === 'lg' && cls.avatarLg),
   prose: ({ compact } = {}) => j(cls.prose, compact && cls.proseCompact),
+  container: ({ narrow } = {}) => j(cls.container, narrow && cls.containerNarrow),
+  tag: ({ accent } = {}) => j(cls.tag, accent && cls.tagAccent),
 };
 
 export default ui;

package/css/app.css

@@ -3,19 +3,19 @@
    For admin / operator dashboards.
    ========================================================================== */
 
-.app-shell {
+.ui-app-shell {
   display: grid;
   grid-template-columns: var(--app-rail, 14rem) minmax(0, 1fr);
   min-block-size: 100vh;
 }
 
-.app-shell--full {
+.ui-app-shell--full {
   grid-template-columns: minmax(0, 1fr);
 }
 
 /* --- Sidebar rail --- */
 
-.app-rail {
+.ui-app-rail {
   background: var(--panel);
   border-inline-end: 1px solid var(--line);
   display: flex;
@@ -28,7 +28,7 @@
   overflow-y: auto;
 }
 
-.app-rail__brand {
+.ui-app-rail__brand {
   align-items: center;
   color: var(--text);
   display: flex;
@@ -40,7 +40,7 @@
   text-transform: uppercase;
 }
 
-.app-rail__brand::before {
+.ui-app-rail__brand::before {
   background: var(--accent);
   border-radius: 50%;
   content: '';
@@ -48,12 +48,12 @@
   inline-size: 0.5rem;
 }
 
-.app-nav {
+.ui-app-nav {
   display: grid;
   gap: 0.15rem;
 }
 
-.app-nav__section {
+.ui-app-nav__section {
   color: var(--text-dim);
   font-family: var(--mono);
   font-size: var(--text-2xs);
@@ -63,7 +63,7 @@
   text-transform: uppercase;
 }
 
-.app-nav a {
+.ui-app-nav a {
   align-items: center;
   border-inline-start: 2px solid transparent;
   color: var(--text-soft);
@@ -78,7 +78,7 @@
     color var(--duration-fast) var(--ease-standard);
 }
 
-.app-nav a::before {
+.ui-app-nav a::before {
   background: currentColor;
   border-radius: 50%;
   content: '';
@@ -87,22 +87,22 @@
   inline-size: 0.34rem;
 }
 
-.app-nav a:hover {
+.ui-app-nav a:hover {
   background: var(--bg-accent);
   color: var(--text);
 }
 
-.app-nav a.is-active {
+.ui-app-nav a.is-active {
   background: var(--accent-soft);
   border-inline-start-color: var(--accent);
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
-.app-nav a.is-active::before {
+.ui-app-nav a.is-active::before {
   opacity: 1;
 }
 
-.app-rail__foot {
+.ui-app-rail__foot {
   border-block-start: 1px solid var(--line);
   color: var(--text-dim);
   font-family: var(--mono);
@@ -113,13 +113,13 @@
 
 /* --- Main column --- */
 
-.app-main {
+.ui-app-main {
   display: flex;
   flex-direction: column;
   min-inline-size: 0;
 }
 
-.app-topbar {
+.ui-app-topbar {
   align-items: center;
   background: color-mix(in srgb, var(--bg) 86%, transparent);
   backdrop-filter: blur(8px);
@@ -133,7 +133,7 @@
   z-index: 10;
 }
 
-.app-topbar__title {
+.ui-app-topbar__title {
   color: var(--text);
   font-family: var(--display);
   font-size: 1.1rem;
@@ -142,7 +142,7 @@
   text-transform: uppercase;
 }
 
-.app-content {
+.ui-app-content {
   display: grid;
   gap: var(--space-lg);
   padding: var(--space-lg);
@@ -150,7 +150,7 @@
 
 /* --- Toolbar --- */
 
-.app-toolbar {
+.ui-app-toolbar {
   align-items: center;
   background: var(--panel);
   border: 1px solid var(--line);
@@ -162,7 +162,7 @@
   padding: 0.7rem 0.85rem;
 }
 
-.app-toolbar__group {
+.ui-app-toolbar__group {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -171,7 +171,7 @@
 
 /* --- Panel --- */
 
-.app-panel {
+.ui-app-panel {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
@@ -180,14 +180,14 @@
   padding: var(--space-md);
 }
 
-.app-panel__head {
+.ui-app-panel__head {
   align-items: flex-start;
   display: flex;
   gap: 0.7rem;
   justify-content: space-between;
 }
 
-.app-panel__title {
+.ui-app-panel__title {
   color: var(--text);
   font-family: var(--display);
   font-size: 0.95rem;
@@ -196,21 +196,21 @@
   text-transform: uppercase;
 }
 
-.app-panel__head p,
-.app-empty-state p {
+.ui-app-panel__head p,
+.ui-app-empty-state p {
   color: var(--text-dim);
   margin: 0.3rem 0 0;
 }
 
 /* --- Metric tiles --- */
 
-.app-metrics {
+.ui-app-metrics {
   display: grid;
   gap: var(--space-md);
   grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
 }
 
-.app-metric {
+.ui-app-metric {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
@@ -219,7 +219,7 @@
   padding: var(--space-md);
 }
 
-.app-metric__label {
+.ui-app-metric__label {
   color: var(--text-dim);
   font-family: var(--mono);
   font-size: var(--text-2xs);
@@ -227,7 +227,7 @@
   text-transform: uppercase;
 }
 
-.app-metric__value {
+.ui-app-metric__value {
   color: var(--text);
   font-family: var(--display);
   font-size: 1.9rem;
@@ -236,22 +236,22 @@
   line-height: 1;
 }
 
-.app-metric__delta {
+.ui-app-metric__delta {
   font-family: var(--mono);
   font-size: var(--text-xs);
 }
 
-.app-metric__delta.is-pos {
+.ui-app-metric__delta.is-pos {
   color: var(--success);
 }
 
-.app-metric__delta.is-neg {
+.ui-app-metric__delta.is-neg {
   color: var(--danger);
 }
 
 /* --- Empty state --- */
 
-.app-empty-state {
+.ui-app-empty-state {
   border: 1px dashed var(--line-strong);
   border-radius: var(--radius-md);
   color: var(--text-dim);
@@ -261,16 +261,16 @@
 
 /* --- Mobile rail collapse --- */
 
-.app-rail__toggle {
+.ui-app-rail__toggle {
   display: none;
 }
 
 @media (max-width: 880px) {
-  .app-shell {
+  .ui-app-shell {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .app-rail {
+  .ui-app-rail {
     flex-direction: row;
     block-size: auto;
     overflow-x: auto;
@@ -279,31 +279,31 @@
     z-index: 11;
   }
 
-  .app-rail__foot {
+  .ui-app-rail__foot {
     display: none;
   }
 
-  .app-nav {
+  .ui-app-nav {
     grid-auto-flow: column;
     gap: 0.15rem;
   }
 
-  .app-nav__section {
+  .ui-app-nav__section {
     display: none;
   }
 
-  .app-nav a {
+  .ui-app-nav a {
     border-inline-start: 0;
     border-block-end: 2px solid transparent;
     white-space: nowrap;
   }
 
-  .app-nav a.is-active {
+  .ui-app-nav a.is-active {
     border-inline-start: 0;
     border-block-end-color: var(--accent);
   }
 
-  .app-content {
+  .ui-app-content {
     padding: var(--space-md);
   }
 }