@ojiepermana/angular 22.1.11 → 22.1.12

package/theme/styles/css/base/components.css

@@ -0,0 +1,553 @@
+/**
+ * Global component-facing styles that should react to the active theme.
+ */
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+    outline-color: hsl(var(--ring) / var(--opacity-50));
+  }
+
+  html,
+  body {
+    min-height: 100%;
+  }
+
+  html {
+    background: hsl(var(--background));
+  }
+
+  body {
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+    letter-spacing: var(--letter-spacing);
+    transition:
+      background-color var(--duration-normal) var(--ease-standard),
+      color var(--duration-normal) var(--ease-standard),
+      border-color var(--duration-normal) var(--ease-standard),
+      box-shadow var(--duration-normal) var(--ease-standard),
+      outline-color var(--duration-normal) var(--ease-standard);
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+  }
+
+  html,
+  body,
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--scrollbar-thumb)) hsl(var(--scrollbar-track));
+  }
+
+  *::-webkit-scrollbar {
+    width: var(--scrollbar-size);
+    height: var(--scrollbar-size);
+  }
+
+  *::-webkit-scrollbar-track {
+    background: hsl(var(--scrollbar-track));
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: hsl(var(--scrollbar-thumb));
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    border-radius: var(--scrollbar-radius);
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--scrollbar-thumb-hover));
+    background-clip: padding-box;
+  }
+
+  ::selection {
+    background: hsl(var(--primary) / var(--opacity-24));
+    color: hsl(var(--foreground));
+  }
+
+  @media (forced-colors: active) {
+    html,
+    body,
+    * {
+      scrollbar-width: auto;
+      scrollbar-color: auto;
+    }
+
+    *::-webkit-scrollbar-thumb {
+      background: CanvasText;
+      border-color: transparent;
+    }
+
+    :where(button, [href], input, select, textarea, [tabindex]):focus-visible {
+      outline: 2px solid Highlight !important;
+      outline-offset: 2px;
+      box-shadow: none !important;
+    }
+  }
+
+  @media (pointer: coarse) {
+    :where(
+      button,
+      [role='button'],
+      [role='option'],
+      [role='tab'],
+      [role='menuitem'],
+      [role='gridcell'][tabindex]
+    ) {
+      min-inline-size: 2.75rem;
+      min-block-size: 2.75rem;
+    }
+  }
+}
+
+@layer components {
+  /* Icon family per appearance: Material Symbols Rounded is the default
+   * (IconComponent's own fallback); any border-rail scope — the layout axis
+   * (data-layout-appearance) or a navigation type-style (data-type-style) —
+   * swaps the inherited token to Sharp so every <Icon> inside follows. */
+  [data-layout-appearance='border-rail'],
+  [data-type-style='border-rail'] {
+    --icon-font-family: 'Material Symbols Sharp';
+  }
+
+  .nav-text {
+    font-family: var(--nav-font-family, var(--font-sans));
+    font-size: var(--nav-text-size, var(--text-base));
+    line-height: var(--nav-text-line-height, var(--text-base--line-height));
+    font-weight: var(--nav-text-weight, 450);
+    letter-spacing: var(--nav-text-tracking, -0.006em);
+  }
+
+  .nav-subtitle {
+    font-family: var(--nav-font-family, var(--font-sans));
+    font-size: var(--nav-subtitle-size, var(--text-xs));
+    line-height: var(--nav-subtitle-line-height, 1.35);
+    font-weight: 400;
+    letter-spacing: 0;
+  }
+
+  .nav-hover-surface {
+    @apply relative isolate hover:text-accent-foreground;
+  }
+
+  .nav-hover-surface::before {
+    content: '';
+    border-radius: inherit;
+    @apply pointer-events-none absolute inset-y-0 left-2 right-2 z-0 bg-transparent transition-colors;
+  }
+
+  .nav-hover-surface:hover::before {
+    @apply bg-accent;
+  }
+
+  .nav-hover-surface > * {
+    @apply relative z-10;
+  }
+
+  .nav-heading {
+    font-family: var(--nav-heading-font-family, var(--nav-font-family, var(--font-sans)));
+    font-size: var(--nav-heading-size, var(--text-sm));
+    line-height: var(--nav-heading-line-height, var(--text-sm--line-height));
+    font-weight: var(--nav-heading-weight, 600);
+    letter-spacing: var(--nav-heading-letter-spacing, 0.08em);
+    text-transform: uppercase;
+  }
+
+  .nav-badge {
+    font-family: var(--nav-badge-font-family, var(--nav-font-family, var(--font-sans)));
+    font-size: var(--nav-badge-size, var(--text-sm));
+    line-height: var(--nav-badge-line-height, var(--text-sm--line-height));
+    font-weight: var(--nav-badge-weight, 500);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0;
+  }
+
+  /* Modal overlay backdrop shared by Dialog, Sheet, and Drawer. The element is
+   * rendered inside the CDK overlay container (outside component view
+   * encapsulation), so its styles must live in this global layer. The default
+   * `dim` surface uses the --overlay-backdrop token so it recolors with the
+   * active theme/mode; components opt into `blur`/`transparent` via a modifier
+   * class. Fade-in rides on CDK's .cdk-overlay-backdrop opacity transition. */
+  .dialog-backdrop {
+    background-color: hsl(var(--overlay-backdrop));
+  }
+
+  /* The gap between a menu trigger and the surface it opens.
+   *
+   * It is transparent padding on the CDK pane rather than a position offset,
+   * because CDK applies offsets as a `transform` AFTER it has clamped the pane
+   * to the viewport: the offset then pushes the panel straight back off screen
+   * by its own size, which on a 375px phone left the panel's top edge at minus
+   * four. Padding is part of the box CDK measures, so the clamp sees it.
+   *
+   * All four sides, because a menu can open to any of them, and the pane is
+   * transparent so the extra space is invisible on the other three. */
+  .menu-panel {
+    padding: var(--spacing-xs);
+  }
+
+  .dialog-backdrop.dialog-backdrop-blur {
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+  }
+
+  .dialog-backdrop.dialog-backdrop-transparent {
+    background-color: transparent;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  /* Layout `honeycomb` surface — a TRUE tessellated flat-top hexagon grid drawn
+   * as a token-colored mask layer, so it recolors with the active theme/neutral
+   * (light + dark) like the other `<Layout surface>` patterns. Adjacent hexagons
+   * SHARE a single edge (no gaps), and `vector-effect: non-scaling-stroke` pins
+   * every line to a fixed 1px regardless of cell size. The SVG tile is exactly
+   * one lattice period (width 3s × height s√3, s=24px) so `mask-repeat` tiles it
+   * seamlessly; the path is solid-stroke and color+faintness are owned by
+   * --layout-grid-color (the dense `grid` tier — pattern LINE tier at
+   * --layout-grid-line-opacity, since honeycomb is multi-axis; see the
+   * --layout-pattern-* system in base/theme.css). Tune cell size via
+   * --layout-hex-size — keep the √3 (≈1.732) width:height ratio or the hexagons
+   * stretch. Edit the pattern here, not per-theme. */
+  .layout-surface-honeycomb {
+    position: relative;
+    --layout-hex-size: 43.2px 24.941px;
+    --layout-hex-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='41.569' viewBox='0 0 72 41.569'><path d='M-12 -62.354L-24 -83.138L-48 -83.138L-60 -62.354L-48 -41.569L-24 -41.569ZM-12 -20.785L-24 -41.569L-48 -41.569L-60 -20.785L-48 0L-24 0ZM-12 20.785L-24 0L-48 0L-60 20.785L-48 41.569L-24 41.569ZM-12 62.354L-24 41.569L-48 41.569L-60 62.354L-48 83.138L-24 83.138ZM-12 103.923L-24 83.138L-48 83.138L-60 103.923L-48 124.708L-24 124.708ZM-12 145.492L-24 124.708L-48 124.708L-60 145.492L-48 166.277L-24 166.277ZM24 -83.138L12 -103.923L-12 -103.923L-24 -83.138L-12 -62.354L12 -62.354ZM24 -41.569L12 -62.354L-12 -62.354L-24 -41.569L-12 -20.785L12 -20.785ZM24 0L12 -20.785L-12 -20.785L-24 0L-12 20.785L12 20.785ZM24 41.569L12 20.785L-12 20.785L-24 41.569L-12 62.354L12 62.354ZM24 83.138L12 62.354L-12 62.354L-24 83.138L-12 103.923L12 103.923ZM24 124.708L12 103.923L-12 103.923L-24 124.708L-12 145.492L12 145.492ZM60 -62.354L48 -83.138L24 -83.138L12 -62.354L24 -41.569L48 -41.569ZM60 -20.785L48 -41.569L24 -41.569L12 -20.785L24 0L48 0ZM60 20.785L48 0L24 0L12 20.785L24 41.569L48 41.569ZM60 62.354L48 41.569L24 41.569L12 62.354L24 83.138L48 83.138ZM60 103.923L48 83.138L24 83.138L12 103.923L24 124.708L48 124.708ZM60 145.492L48 124.708L24 124.708L12 145.492L24 166.277L48 166.277ZM96 -83.138L84 -103.923L60 -103.923L48 -83.138L60 -62.354L84 -62.354ZM96 -41.569L84 -62.354L60 -62.354L48 -41.569L60 -20.785L84 -20.785ZM96 0L84 -20.785L60 -20.785L48 0L60 20.785L84 20.785ZM96 41.569L84 20.785L60 20.785L48 41.569L60 62.354L84 62.354ZM96 83.138L84 62.354L60 62.354L48 83.138L60 103.923L84 103.923ZM96 124.708L84 103.923L60 103.923L48 124.708L60 145.492L84 145.492ZM132 -62.354L120 -83.138L96 -83.138L84 -62.354L96 -41.569L120 -41.569ZM132 -20.785L120 -41.569L96 -41.569L84 -20.785L96 0L120 0ZM132 20.785L120 0L96 0L84 20.785L96 41.569L120 41.569ZM132 62.354L120 41.569L96 41.569L84 62.354L96 83.138L120 83.138ZM132 103.923L120 83.138L96 83.138L84 103.923L96 124.708L120 124.708ZM132 145.492L120 124.708L96 124.708L84 145.492L96 166.277L120 166.277Z' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>");
+  }
+
+  .layout-surface-honeycomb::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    background-color: var(--layout-grid-color);
+    -webkit-mask-image: var(--layout-hex-mask);
+    mask-image: var(--layout-hex-mask);
+    -webkit-mask-repeat: repeat;
+    mask-repeat: repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: var(--layout-hex-size);
+    mask-size: var(--layout-hex-size);
+  }
+
+  /* Layout `matrix` surface — a scattered field of binary digits (0/1) at
+   * varied sizes with per-glyph opacity baked into the SVG, painted as a mask
+   * layer so it recolors with the active theme like the other `<Layout surface>`
+   * patterns. The glyphs paint with --layout-matrix-color — the pattern NODE
+  * tier (the active neutral family's hue; an achromatic node on
+  * theme-neutral='base') at --layout-matrix-opacity, the global faintness knob
+   * toned down for dark mode in base/tokens.css — giving a soft "digital"
+   * signature behind content. The SVG tile is one square period
+   * (--layout-matrix-size) and `mask-repeat` tiles it seamlessly; every glyph
+   * sits inside the tile so the seam never cuts a digit. Edit the field here,
+   * not per-theme. */
+  .layout-surface-matrix {
+    position: relative;
+    --layout-matrix-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g font-family='monospace' fill='black' text-anchor='middle' dominant-baseline='middle'><text x='14' y='12' font-size='13' fill-opacity='.35'>0</text><text x='43' y='11' font-size='12' fill-opacity='.85'>0</text><text x='59' y='11' font-size='11' fill-opacity='.45'>0</text><text x='80' y='15' font-size='12' fill-opacity='.45'>0</text><text x='110' y='17' font-size='8' fill-opacity='.3'>1</text><text x='137' y='11' font-size='9' fill-opacity='.6'>1</text><text x='150' y='11' font-size='10' fill-opacity='.35'>0</text><text x='179' y='18' font-size='10' fill-opacity='.85'>0</text><text x='203' y='17' font-size='12' fill-opacity='.7'>0</text><text x='226' y='15' font-size='10' fill-opacity='1'>1</text><text x='21' y='37' font-size='10' fill-opacity='.45'>0</text><text x='34' y='37' font-size='11' fill-opacity='.7'>1</text><text x='60' y='45' font-size='9' fill-opacity='.4'>1</text><text x='88' y='35' font-size='11' fill-opacity='.3'>1</text><text x='114' y='34' font-size='12' fill-opacity='.55'>1</text><text x='134' y='40' font-size='12' fill-opacity='.35'>1</text><text x='159' y='44' font-size='11' fill-opacity='.3'>0</text><text x='181' y='37' font-size='12' fill-opacity='.5'>1</text><text x='203' y='44' font-size='10' fill-opacity='.7'>0</text><text x='222' y='40' font-size='11' fill-opacity='.45'>0</text><text x='19' y='58' font-size='10' fill-opacity='.6'>1</text><text x='44' y='62' font-size='9' fill-opacity='.6'>1</text><text x='63' y='67' font-size='11' fill-opacity='.6'>1</text><text x='91' y='64' font-size='11' fill-opacity='.4'>0</text><text x='103' y='58' font-size='13' fill-opacity='.3'>0</text><text x='131' y='63' font-size='10' fill-opacity='.3'>1</text><text x='150' y='63' font-size='12' fill-opacity='.4'>1</text><text x='180' y='62' font-size='12' fill-opacity='.7'>0</text><text x='206' y='66' font-size='13' fill-opacity='.6'>1</text><text x='223' y='57' font-size='13' fill-opacity='.3'>1</text><text x='12' y='91' font-size='11' fill-opacity='.35'>0</text><text x='37' y='80' font-size='8' fill-opacity='.85'>0</text><text x='57' y='84' font-size='8' fill-opacity='.45'>0</text><text x='87' y='81' font-size='10' fill-opacity='1'>1</text><text x='107' y='81' font-size='11' fill-opacity='.7'>1</text><text x='131' y='80' font-size='9' fill-opacity='.5'>1</text><text x='154' y='88' font-size='12' fill-opacity='.45'>0</text><text x='183' y='86' font-size='9' fill-opacity='.85'>0</text><text x='198' y='87' font-size='9' fill-opacity='.85'>1</text><text x='222' y='81' font-size='15' fill-opacity='.85'>0</text><text x='16' y='108' font-size='13' fill-opacity='1'>0</text><text x='43' y='114' font-size='10' fill-opacity='.6'>0</text><text x='65' y='105' font-size='12' fill-opacity='.55'>1</text><text x='88' y='114' font-size='15' fill-opacity='.7'>1</text><text x='106' y='111' font-size='10' fill-opacity='.55'>1</text><text x='137' y='107' font-size='10' fill-opacity='.45'>0</text><text x='154' y='106' font-size='11' fill-opacity='.7'>0</text><text x='183' y='107' font-size='13' fill-opacity='.35'>0</text><text x='206' y='112' font-size='15' fill-opacity='.7'>0</text><text x='229' y='108' font-size='13' fill-opacity='.35'>1</text><text x='20' y='137' font-size='11' fill-opacity='.6'>1</text><text x='42' y='127' font-size='9' fill-opacity='.4'>0</text><text x='57' y='133' font-size='11' fill-opacity='1'>0</text><text x='89' y='137' font-size='13' fill-opacity='.4'>1</text><text x='109' y='127' font-size='8' fill-opacity='.85'>0</text><text x='135' y='127' font-size='10' fill-opacity='.3'>0</text><text x='152' y='129' font-size='10' fill-opacity='.5'>1</text><text x='178' y='136' font-size='8' fill-opacity='.7'>1</text><text x='203' y='135' font-size='12' fill-opacity='.85'>1</text><text x='220' y='127' font-size='12' fill-opacity='.7'>0</text><text x='19' y='156' font-size='15' fill-opacity='.4'>0</text><text x='35' y='156' font-size='9' fill-opacity='.55'>0</text><text x='64' y='155' font-size='11' fill-opacity='.85'>0</text><text x='80' y='151' font-size='8' fill-opacity='.85'>0</text><text x='108' y='149' font-size='9' fill-opacity='.55'>1</text><text x='133' y='155' font-size='12' fill-opacity='.5'>0</text><text x='154' y='155' font-size='11' fill-opacity='.85'>0</text><text x='182' y='160' font-size='10' fill-opacity='.7'>0</text><text x='197' y='150' font-size='11' fill-opacity='.35'>1</text><text x='226' y='154' font-size='10' fill-opacity='.35'>1</text><text x='21' y='174' font-size='14' fill-opacity='.4'>1</text><text x='36' y='173' font-size='11' fill-opacity='.35'>0</text><text x='61' y='178' font-size='13' fill-opacity='.4'>0</text><text x='88' y='184' font-size='11' fill-opacity='.6'>1</text><text x='105' y='176' font-size='14' fill-opacity='.3'>1</text><text x='130' y='177' font-size='14' fill-opacity='.6'>0</text><text x='153' y='179' font-size='12' fill-opacity='.35'>0</text><text x='184' y='181' font-size='9' fill-opacity='.5'>0</text><text x='198' y='183' font-size='9' fill-opacity='.4'>1</text><text x='228' y='182' font-size='13' fill-opacity='.6'>1</text><text x='12' y='206' font-size='12' fill-opacity='.55'>1</text><text x='34' y='196' font-size='14' fill-opacity='.6'>0</text><text x='67' y='198' font-size='8' fill-opacity='.5'>0</text><text x='80' y='205' font-size='9' fill-opacity='.35'>1</text><text x='108' y='199' font-size='12' fill-opacity='.5'>1</text><text x='133' y='195' font-size='14' fill-opacity='.35'>0</text><text x='160' y='198' font-size='9' fill-opacity='.5'>0</text><text x='179' y='201' font-size='10' fill-opacity='.7'>1</text><text x='201' y='197' font-size='10' fill-opacity='.5'>0</text><text x='218' y='195' font-size='12' fill-opacity='.85'>0</text><text x='16' y='229' font-size='9' fill-opacity='.7'>1</text><text x='40' y='229' font-size='12' fill-opacity='.45'>1</text><text x='68' y='222' font-size='14' fill-opacity='.6'>0</text><text x='91' y='230' font-size='9' fill-opacity='.35'>0</text><text x='110' y='229' font-size='11' fill-opacity='.3'>0</text><text x='127' y='228' font-size='12' fill-opacity='1'>1</text><text x='152' y='222' font-size='11' fill-opacity='.4'>0</text><text x='175' y='218' font-size='10' fill-opacity='.85'>1</text><text x='199' y='218' font-size='10' fill-opacity='.55'>0</text><text x='220' y='222' font-size='9' fill-opacity='.5'>1</text></g></svg>");
+    /* Glow layer mask — ~10% of the digits (10 of 100), placed only in the tile's
+     * EDGE bands (never the center). Each is drawn twice through a `feGaussianBlur`
+     * filter (soft bloom halo) plus once sharp (lit core); painted brighter than the
+     * field via --layout-matrix-glow-opacity on `::after`. Static — no animation. */
+    --layout-matrix-glow-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><defs><filter id='g' x='-80%' y='-80%' width='260%' height='260%'><feGaussianBlur stdDeviation='2.2'/></filter></defs><g font-family='monospace' fill='black' text-anchor='middle' dominant-baseline='middle'><g filter='url(%23g)'><text x='43' y='11' font-size='12' fill-opacity='1'>0</text><text x='203' y='17' font-size='12' fill-opacity='1'>0</text><text x='12' y='91' font-size='11' fill-opacity='1'>0</text><text x='12' y='206' font-size='12' fill-opacity='1'>1</text><text x='226' y='154' font-size='10' fill-opacity='1'>1</text><text x='229' y='108' font-size='13' fill-opacity='1'>1</text><text x='40' y='229' font-size='12' fill-opacity='1'>1</text><text x='175' y='218' font-size='10' fill-opacity='1'>1</text><text x='179' y='18' font-size='10' fill-opacity='1'>0</text><text x='16' y='108' font-size='13' fill-opacity='1'>0</text></g><g filter='url(%23g)'><text x='43' y='11' font-size='12' fill-opacity='1'>0</text><text x='203' y='17' font-size='12' fill-opacity='1'>0</text><text x='12' y='91' font-size='11' fill-opacity='1'>0</text><text x='12' y='206' font-size='12' fill-opacity='1'>1</text><text x='226' y='154' font-size='10' fill-opacity='1'>1</text><text x='229' y='108' font-size='13' fill-opacity='1'>1</text><text x='40' y='229' font-size='12' fill-opacity='1'>1</text><text x='175' y='218' font-size='10' fill-opacity='1'>1</text><text x='179' y='18' font-size='10' fill-opacity='1'>0</text><text x='16' y='108' font-size='13' fill-opacity='1'>0</text></g><g><text x='43' y='11' font-size='12' fill-opacity='1'>0</text><text x='203' y='17' font-size='12' fill-opacity='1'>0</text><text x='12' y='91' font-size='11' fill-opacity='1'>0</text><text x='12' y='206' font-size='12' fill-opacity='1'>1</text><text x='226' y='154' font-size='10' fill-opacity='1'>1</text><text x='229' y='108' font-size='13' fill-opacity='1'>1</text><text x='40' y='229' font-size='12' fill-opacity='1'>1</text><text x='175' y='218' font-size='10' fill-opacity='1'>1</text><text x='179' y='18' font-size='10' fill-opacity='1'>0</text><text x='16' y='108' font-size='13' fill-opacity='1'>0</text></g></g></svg>");
+  }
+
+  .layout-surface-matrix::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    background-color: var(--layout-matrix-color);
+    -webkit-mask-image: var(--layout-matrix-mask);
+    mask-image: var(--layout-matrix-mask);
+    -webkit-mask-repeat: repeat;
+    mask-repeat: repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: var(--layout-matrix-size);
+    mask-size: var(--layout-matrix-size);
+  }
+
+  /* Sparse edge-glow accents: the glow glyph mask (repeating) intersected with a
+   * radial edge-vignette so the lit digits appear only toward the layout edges
+   * and fade out behind centered content (`hindari di tengah`). `intersect`
+   * (std) / `source-in` (-webkit-) keep both masks ANDed. */
+  .layout-surface-matrix::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    background-color: var(--layout-matrix-glow-color);
+    -webkit-mask-image:
+      var(--layout-matrix-glow-mask),
+      radial-gradient(ellipse 78% 78% at center, transparent 36%, #000 80%);
+    mask-image:
+      var(--layout-matrix-glow-mask),
+      radial-gradient(ellipse 78% 78% at center, transparent 36%, #000 80%);
+    -webkit-mask-repeat: repeat, no-repeat;
+    mask-repeat: repeat, no-repeat;
+    -webkit-mask-position: center, center;
+    mask-position: center, center;
+    -webkit-mask-size:
+      var(--layout-matrix-size),
+      100% 100%;
+    mask-size:
+      var(--layout-matrix-size),
+      100% 100%;
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
+  /* Layout `grid-line` surface — a dark mosaic of 2rem square cells; a richer
+   * cousin of `grid`. A faint uniform grid with scattered BRIGHT highlight
+   * squares + L-corners and a few subtly-lit cells, all painted as ONE
+   * token-colored mask layer (same mechanism as `.layout-surface-honeycomb` /
+   * `.layout-surface-matrix`). EVERYTHING lives in the single mask — base
+   * grid, glows, and cell fills — so the layers stay pixel-aligned. The glow
+   * paints with the pattern HIGHLIGHT tier (--layout-grid-highlight-color,
+   * base/theme.css): the active neutral family's hue, or the accent
+   * hue/saturation on theme-neutral='base' — with
+   * lightness pinned to --layout-grid-highlight-l either way, so brightness
+   * stays put. --layout-grid-highlight-opacity is the global faintness knob.
+   * Every fill /
+   * stroke is white (%23fff) and serves only as an ALPHA mask: low alpha = faint
+   * grid/cell, high alpha = bright glow. `vector-effect: non-scaling-stroke`
+   * pins every line to a fixed 1px regardless of cell size.
+   *
+   * The tile is 6x6 cells (viewBox 0 0 192 192 = 32 units/cell) so mask-size is
+   * 9.96rem (one cell ≈ 1.66rem — 17% smaller than the 2rem `grid` family size;
+   * tune via --layout-grid-line-size). SEAMLESS: the grid is drawn
+   * at 0..192 on BOTH edges. A 1px non-scaling stroke centered on a tile edge has
+   * its outer half clipped by the SVG viewBox, so under `mask-repeat: repeat` each
+   * seam gets one half-stroke from the tile on each side ([191.5,192] + [192,192.5])
+   * which combine into a single full 1px line — an even grid with no doubling and
+   * no thinned seam. Every highlight/fill stays in the interior (>=32, <=160) so
+   * no glow is ever clipped at a tile edge. Edit the pattern here, not per-theme. */
+  .layout-surface-grid-line {
+    position: relative;
+    --layout-grid-line-size: 9.96rem 9.96rem;
+    --layout-grid-line-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'><path d='M0 0V192M32 0V192M64 0V192M96 0V192M128 0V192M160 0V192M192 0V192M0 0H192M0 32H192M0 64H192M0 96H192M0 128H192M0 160H192M0 192H192' fill='none' stroke='%23fff' stroke-width='1' stroke-opacity='0.25' vector-effect='non-scaling-stroke'/><g fill='%23fff'><rect x='66' y='34' width='28' height='28' fill-opacity='0.1'/><rect x='130' y='34' width='28' height='28' fill-opacity='0.06'/><rect x='34' y='66' width='28' height='28' fill-opacity='0.12'/><rect x='98' y='66' width='28' height='28' fill-opacity='0.07'/><rect x='66' y='98' width='28' height='28' fill-opacity='0.09'/><rect x='130' y='98' width='28' height='28' fill-opacity='0.05'/><rect x='34' y='130' width='28' height='28' fill-opacity='0.11'/><rect x='98' y='130' width='28' height='28' fill-opacity='0.06'/></g><g fill='none' stroke='%23fff' stroke-width='1' vector-effect='non-scaling-stroke'><rect x='32' y='32' width='32' height='32' stroke-opacity='0.85'/><rect x='128' y='64' width='32' height='32' stroke-opacity='0.8'/><rect x='32' y='96' width='32' height='32' stroke-opacity='0.9'/><rect x='128' y='128' width='32' height='32' stroke-opacity='0.82'/><path d='M128 32L96 32L96 64' stroke-opacity='0.7'/><path d='M64 96L96 96L96 64' stroke-opacity='0.75'/><path d='M96 96L128 96L128 128' stroke-opacity='0.72'/><path d='M64 128L64 160L96 160' stroke-opacity='0.68'/></g></svg>");
+  }
+
+  .layout-surface-grid-line::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    /* Tinted glow: the pattern HIGHLIGHT tier at --layout-grid-highlight-opacity
+    * — the active neutral family's hue, or the achromatic base neutral;
+     * its lightness is anchored by --layout-grid-highlight-l. */
+    background-color: var(--layout-grid-highlight-color);
+    -webkit-mask-image: var(--layout-grid-line-mask);
+    mask-image: var(--layout-grid-line-mask);
+    -webkit-mask-repeat: repeat;
+    mask-repeat: repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: var(--layout-grid-line-size);
+    mask-size: var(--layout-grid-line-size);
+  }
+
+  /* Layout `circuit` surface — a tileable PCB / circuit-board texture: routed
+   * copper traces with 45° chamfered bends, via nodes, and concentric ring pads,
+   * echoing a printed circuit board. Built as the same kind of token-colored mask
+   * layer as `.layout-surface-honeycomb` / `.layout-surface-matrix`, but with TWO
+   * stacked layers because a mask only carries ALPHA (one color per layer):
+   *   ::before — the copper TRACES, painted in --layout-circuit-trace-color (the
+   *              pattern LINE tier the grid family uses, so the board recolors
+  *              per neutral + dark mode; achromatic on theme-neutral='base').
+   *              Faintness = --layout-circuit-opacity × the per-trace alpha baked
+   *              into the SVG (ghost 0.22 · trace 0.55-0.6 · trunk 0.9), giving
+   *              the copper-weight variation of a real board.
+   *   ::after  — the via NODES + concentric pads, painted in
+   *              --layout-circuit-node-color (the pattern NODE tier, like
+   *              `matrix`: the neutral family's hue, --primary on
+   *              theme-neutral='base') so the connection points GLOW while the
+   *              traces stay quiet. Faintness = --layout-circuit-node-opacity
+   *              (toned down for dark mode in base/tokens.css, since the bright
+   *              node color blooms on dark).
+   * Both layers share ONE tile geometry (--layout-circuit-size) and `mask-position:
+   * center`, so traces and nodes stay pixel-aligned. `vector-effect:
+   * non-scaling-stroke` pins every line to its authored px width at any scale.
+   *
+   * SEAMLESS BY CONSTRUCTION (240x240 tile): every horizontal bus enters at x=0
+   * and exits at x=240 at the SAME y (wraps left/right) and every vertical bus
+   * enters at y=0 / exits at y=240 at the SAME x (wraps top/bottom); the long
+   * buses bridge each seam so the board reads continuous. All interior branches,
+   * vias, and rings stay inside an 18px edge keep-out, so tiling never clips a
+   * node. Keep both SVG data URLs pixel-aligned and re-run the visual seam check
+   * whenever their geometry changes. */
+  .layout-surface-circuit {
+    position: relative;
+    --layout-circuit-size: 240px;
+    --layout-circuit-traces: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><path d='M20 70L38 70L48.24 65.76L56 58' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.22' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M210 150L210 172L205.76 182.24L196 192' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.22' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M28 150L28 176' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.22' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M212 40L224 40' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.22' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M0 40L54 40L64.24 35.76L75.76 24.24L86 20L114 20L124.24 24.24L135.76 35.76L146 40L240 40' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.6' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M0 120L34 120L44.24 115.76L55.76 104.24L66 100L94 100L104.24 104.24L115.76 115.76L126 120L154 120L164.24 124.24L175.76 135.76L186 140L194 140L204.24 135.76L215.76 124.24L226 120L240 120' fill='none' stroke='%23000' stroke-width='1.5' stroke-opacity='0.9' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M0 200L94 200L104.24 204.24L115.76 215.76L126 220L154 220L164.24 215.76L175.76 204.24L186 200L240 200' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.6' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M60 0L60 54L64.24 64.24L75.76 75.76L80 86L80 154L75.76 164.24L64.24 175.76L60 186L60 240' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.55' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M180 0L180 64L175.76 74.24L164.24 85.76L160 96L160 144L164.24 154.24L175.76 165.76L180 176L180 240' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.55' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M100 100L100 64' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.4' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M160 120L194 120L200 114L200 84' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.4' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M80 120L80 96' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.4' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M140 200L140 164' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.4' stroke-linejoin='round' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
+    --layout-circuit-nodes: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><circle cx='60' cy='40' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='140' cy='40' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='100' cy='200' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='180' cy='200' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='60' cy='100' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='120' cy='120' r='3.2' fill='%23000' fill-opacity='0.85'/><circle cx='180' cy='140' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='80' cy='80' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='80' cy='160' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='160' cy='90' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='160' cy='150' r='3' fill='%23000' fill-opacity='0.85'/><circle cx='100' cy='100' r='2.6' fill='%23000' fill-opacity='0.85'/><circle cx='200' cy='120' r='2.6' fill='%23000' fill-opacity='0.85'/><circle cx='140' cy='200' r='2.6' fill='%23000' fill-opacity='0.85'/><circle cx='100' cy='60' r='6' fill='none' stroke='%23000' stroke-width='1.2' stroke-opacity='0.7' vector-effect='non-scaling-stroke'/><circle cx='100' cy='60' r='2' fill='%23000' fill-opacity='0.85'/><circle cx='200' cy='80' r='6' fill='none' stroke='%23000' stroke-width='1.2' stroke-opacity='0.7' vector-effect='non-scaling-stroke'/><circle cx='200' cy='80' r='2' fill='%23000' fill-opacity='0.85'/><circle cx='140' cy='160' r='6' fill='none' stroke='%23000' stroke-width='1.2' stroke-opacity='0.7' vector-effect='non-scaling-stroke'/><circle cx='140' cy='160' r='2' fill='%23000' fill-opacity='0.85'/><circle cx='40' cy='160' r='4.5' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.55' vector-effect='non-scaling-stroke'/><circle cx='215' cy='40' r='4' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.55' vector-effect='non-scaling-stroke'/><circle cx='25' cy='200' r='4' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='0.55' vector-effect='non-scaling-stroke'/></svg>");
+  }
+
+  .layout-surface-circuit::before,
+  .layout-surface-circuit::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    -webkit-mask-repeat: repeat;
+    mask-repeat: repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: var(--layout-circuit-size);
+    mask-size: var(--layout-circuit-size);
+  }
+
+  .layout-surface-circuit::before {
+    background-color: var(--layout-circuit-trace-color);
+    -webkit-mask-image: var(--layout-circuit-traces);
+    mask-image: var(--layout-circuit-traces);
+  }
+
+  .layout-surface-circuit::after {
+    background-color: var(--layout-circuit-node-color);
+    -webkit-mask-image: var(--layout-circuit-nodes);
+    mask-image: var(--layout-circuit-nodes);
+  }
+
+  /* Window-drag regions for the desktop shell titlebar (<ShellBar>).
+   *
+   * Every desktop runtime marks its drag surface differently and none of them
+   * can be expressed as a Tailwind utility, so the shell stamps both markers on
+   * one element: Tauri reads the `data-tauri-drag-region` attribute (set by the
+   * component), Electron reads the `-webkit-app-region` CSS property below. A
+   * drag surface must not smear a text selection or fire the native
+   * long-press/callout while the window is being moved.
+   */
+  .shell-drag-region {
+    -webkit-app-region: drag;
+    app-region: drag;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+  }
+
+  /* Interactive children of a drag region opt back out, otherwise the runtime
+   * swallows their clicks as window drags. */
+  .shell-no-drag {
+    -webkit-app-region: no-drag;
+    app-region: no-drag;
+  }
+
+  /* Native app-region hit testing is not ordinary DOM z-index hit testing:
+   * Electron can still treat a lower drag rectangle as window chrome beneath a
+   * fixed overlay. Suspend the ancestor drag region while the desktop flyout is
+   * mounted; Tauri remains safe because its direct marker only reacts when that
+   * marked element itself is the click target. */
+  [data-shell-root].shell-drag-region:has([data-navigation-flyout-panel='true']) {
+    -webkit-app-region: no-drag;
+    app-region: no-drag;
+  }
+
+  /* The desktop shell owns a transparent drag layer behind the complete window
+   * frame. Foreground application content sits one stacking tier above it and
+   * opts out of Electron's inherited drag region, so exposed chrome/margins drag
+   * the window while Layout, buttons, fields, overlays, and routed content retain
+   * normal pointer interaction. Tauri only activates the directly marked layer,
+   * therefore foreground descendants need no blanket data attribute override. */
+  [data-shell-root] > :not([data-shell-frame-drag-region]):not([data-shell-bar]),
+  [data-shell-root] [data-layout-root] {
+    position: relative;
+    z-index: 10;
+    -webkit-app-region: no-drag;
+    app-region: no-drag;
+  }
+
+  /* <Layout> sizes itself from --layout-viewport-height (100dvh by default: it is
+   * normally the whole browser viewport). Inside a <Shell> it instead grows into
+   * whatever the titlebar left over: the shell is a column flexbox, so
+   * `height: auto` plus a zero flex-basis hands the layout the remaining space, and
+   * min-height:0 lets it shrink below its content so its own scroll regions keep
+   * working. Without this it would overflow the window by exactly the bar's height.
+   *
+   * Deliberately a DESCENDANT selector, not a child one: this design system wraps
+   * things in `display: contents` hosts (LayoutWrapperDefault, and consumers' own
+   * shells), so the layout root is almost never a DOM child of <Shell> even though
+   * `contents` makes it the shell's actual flex item. A child selector would miss
+   * every consumer using the recommended wrapper. A <Layout> nested inside another
+   * <Layout> is not a supported composition, so over-reach is not a concern. */
+  [data-shell-root] [data-layout-root] {
+    --layout-viewport-height: auto;
+    flex: 1 1 0%;
+    min-height: 0;
+  }
+
+  /* `frame='modern'`: inset the app so it floats as a panel inside the window
+   * instead of meeting its edges. No top margin — the panel meets the titlebar,
+   * which shares the surround's colour and drops its border, so the bar and the
+   * gap around the panel read as one continuous frame.
+   *
+   * Releasing the width is load-bearing, not tidying. <Layout> sizes itself to
+   * `--layout-viewport-width` (100% by default), which resolves against the shell's
+   * content box and IGNORES these margins — the panel would keep full width, shift
+   * over, and overflow the window by exactly the inset (clipped by the shell's
+   * overflow-hidden, so only the leading gap would show). At `auto` the flex line
+   * stretches it into the space left over, giving a real gap on both sides.
+   *
+   * It goes through the variable rather than a plain `width: auto` here because the
+   * layout's width is a Tailwind UTILITY: @layer utilities outranks
+   * @layer components no matter how specific this selector is.
+   *
+   * The inset is margin on the layout, not padding on <Shell>: the titlebar is the
+   * shell's other flex child, so padding would indent it too — breaking the
+   * full-bleed drag region and pulling the macOS traffic lights off the window
+   * corner. */
+  [data-shell-root][data-shell-frame='modern'] [data-layout-root] {
+    --layout-viewport-width: auto;
+    margin: 0 var(--shell-frame-inset) var(--shell-frame-inset);
+  }
+
+  /* Give the app inside a desktop window a panel edge: rounded to
+   * --shell-frame-radius (12px) and outlined with --shell-frame-border. The layout
+   * root already clips its own overflow, so the radius carries through to the frame
+   * and every surface painted inside it, and `box-border` keeps the outline from
+   * changing the panel's size.
+   *
+   * `classic` is flush against the titlebar, so its top edge stays square AND
+   * borderless: the app meets the bar there, and the bar already draws that seam
+   * with its own `border-b` — outlining it again would double the line, and rounding
+   * it would cut two notches of chrome into an otherwise continuous join. */
+  [data-shell-root][data-shell-mode='desktop'] [data-layout-root] {
+    border: 1px solid hsl(var(--shell-frame-border));
+    border-top-width: 0;
+    border-radius: 0;
+  }
+
+  /* `classic` is flush with the titlebar, so neither the shell layout nor its
+   * inner frame may cut rounded notches into the window edge. The inner frame
+   * carries a Tailwind radius utility, which is why this override is important. */
+  [data-shell-root][data-shell-mode='desktop'][data-shell-frame='classic'] [data-layout-frame] {
+    border-radius: 0 !important;
+  }
+
+  /* `modern` is a free-floating panel: closed and rounded on all four sides. Its
+   * titlebar drops the divider, so the panel's own top edge is what closes it. */
+  [data-shell-root][data-shell-mode='desktop'][data-shell-frame='modern'] [data-layout-root] {
+    border-top-width: 1px;
+    border-radius: var(--shell-frame-radius);
+  }
+}
+
+@layer utilities {
+  html[theme-space='compact'] NavigationSidebar [data-navigation-sidebar-subtitle],
+  html[theme-space='compact'] NavigationSidebar [data-navigation-group-subtitle],
+  html[theme-space='compact'] PageHeader[data-page-slot='header'] [data-page-subtitle] {
+    display: none;
+  }
+}

package/theme/styles/css/base/index.css

@@ -0,0 +1,14 @@
+/*
+ * Lightweight default theme stylesheet (exported as `@ojiepermana/angular/theme/theme.css`).
+ *
+ * Base only: core design tokens, light/dark, and component styles. It does NOT
+ * pull in the runtime theme axes (color palettes, neutral families, radius and
+ * space presets) so consumers ship a minimal stylesheet by default.
+ *
+ * Need the runtime axes? Either import the full sheet:
+ *   @import '@ojiepermana/angular/theme/theme-full.css';
+ * or opt in to only the axes you use:
+ *   @import '@ojiepermana/angular/theme/styles/css/color/index.css';
+ *   @import '@ojiepermana/angular/theme/styles/css/neutral/index.css';
+ */
+@import './package.css';

package/theme/styles/css/base/package.css

@@ -0,0 +1,9 @@
+/**
+ * Internal grouped base theme stylesheet.
+ */
+@import './theme.css';
+@import './tokens.css';
+@import './status.css';
+@import './prefers-dark.css';
+@import './components.css';
+@import './print.css';