@ojiepermana/angular 0.0.2

package/theme/styles/presets/colors/brand.css

@@ -0,0 +1,11 @@
+:root,
+[data-theme-color='brand'] {
+  --theme-primary: oklch(0.59 0.18 257.5);
+  --theme-on-primary: oklch(0.985 0 0);
+  --theme-secondary: oklch(0.654 0.137 259.075);
+  --theme-on-secondary: oklch(0.205 0.012 285.9);
+  --theme-tertiary: oklch(0.72 0.096 260.483);
+  --theme-on-tertiary: oklch(0.205 0.012 285.9);
+  --theme-neutral: oklch(0.736 0.035 265.705);
+  --theme-on-neutral: oklch(0.205 0.012 285.9);
+}

package/theme/styles/presets/colors/cyan.css

@@ -0,0 +1,10 @@
+[data-theme-color='cyan'] {
+  --theme-primary: oklch(0.73 0.13 219.2);
+  --theme-on-primary: oklch(0.181 0.01 220.8);
+  --theme-secondary: oklch(0.755 0.097 223.466);
+  --theme-on-secondary: oklch(0.205 0.012 285.9);
+  --theme-tertiary: oklch(0.787 0.067 227.388);
+  --theme-on-tertiary: oklch(0.205 0.012 285.9);
+  --theme-neutral: oklch(0.756 0.024 242.306);
+  --theme-on-neutral: oklch(0.205 0.012 285.9);
+}

package/theme/styles/presets/colors/green.css

@@ -0,0 +1,10 @@
+[data-theme-color='green'] {
+  --theme-primary: oklch(0.68 0.18 153.4);
+  --theme-on-primary: oklch(0.188 0.012 162.1);
+  --theme-secondary: oklch(0.719 0.124 156.054);
+  --theme-on-secondary: oklch(0.205 0.012 285.9);
+  --theme-tertiary: oklch(0.763 0.08 158.902);
+  --theme-on-tertiary: oklch(0.205 0.012 285.9);
+  --theme-neutral: oklch(0.749 0.02 176.021);
+  --theme-on-neutral: oklch(0.205 0.012 285.9);
+}

package/theme/styles/presets/colors/index.css

@@ -0,0 +1,7 @@
+@import './brand.css';
+@import './blue.css';
+@import './green.css';
+@import './red.css';
+@import './cyan.css';
+@import './purple.css';
+@import './orange.css';

package/theme/styles/presets/colors/orange.css

@@ -0,0 +1,10 @@
+[data-theme-color='orange'] {
+  --theme-primary: oklch(0.74 0.16 68.4);
+  --theme-on-primary: oklch(0.188 0.012 73.2);
+  --theme-secondary: oklch(0.762 0.109 65.881);
+  --theme-on-secondary: oklch(0.205 0.012 285.9);
+  --theme-tertiary: oklch(0.792 0.069 63.101);
+  --theme-on-tertiary: oklch(0.205 0.012 285.9);
+  --theme-neutral: oklch(0.757 0.016 44.49);
+  --theme-on-neutral: oklch(0.205 0.012 285.9);
+}

package/theme/styles/presets/colors/purple.css

@@ -0,0 +1,10 @@
+[data-theme-color='purple'] {
+  --theme-primary: oklch(0.62 0.21 314.5);
+  --theme-on-primary: oklch(0.985 0 0);
+  --theme-secondary: oklch(0.676 0.158 313.149);
+  --theme-on-secondary: oklch(0.205 0.012 285.9);
+  --theme-tertiary: oklch(0.734 0.11 311.924);
+  --theme-on-tertiary: oklch(0.205 0.012 285.9);
+  --theme-neutral: oklch(0.74 0.039 307.23);
+  --theme-on-neutral: oklch(0.205 0.012 285.9);
+}

package/theme/styles/presets/colors/red.css

@@ -0,0 +1,10 @@
+[data-theme-color='red'] {
+  --theme-primary: oklch(0.63 0.23 27.2);
+  --theme-on-primary: oklch(0.985 0 0);
+  --theme-secondary: oklch(0.683 0.164 24.516);
+  --theme-on-secondary: oklch(0.205 0.012 285.9);
+  --theme-tertiary: oklch(0.739 0.109 21.822);
+  --theme-on-tertiary: oklch(0.205 0.012 285.9);
+  --theme-neutral: oklch(0.742 0.032 8.67);
+  --theme-on-neutral: oklch(0.205 0.012 285.9);
+}

package/theme/styles/presets/styles/flat.css

@@ -0,0 +1,30 @@
+:root,
+[data-theme-style='flat'] {
+  --typeface-plain: var(
+    --theme-style-flat-plain-font,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif
+  );
+  --typeface-brand: var(--theme-style-flat-brand-font, var(--typeface-plain));
+  --typeface-mono: var(
+    --theme-style-flat-mono-font,
+    'SFMono-Regular',
+    'Cascadia Mono',
+    'Liberation Mono',
+    ui-monospace,
+    monospace
+  );
+  --shell-surface: var(--card);
+  --shell-foreground: var(--card-foreground);
+  --shell-border: var(--border);
+  --shell-shadow: var(--shadow-xs);
+  --shell-backdrop: var(--backdrop);
+  --surface-elevated: var(--popover);
+  --surface-elevated-foreground: var(--popover-foreground);
+  --surface-elevated-border: var(--border);
+  --surface-elevated-shadow: var(--shadow-sm);
+}

package/theme/styles/presets/styles/glass.css

@@ -0,0 +1,34 @@
+[data-theme-style='glass'] {
+  --typeface-plain: var(
+    --theme-style-glass-plain-font,
+    'Avenir Next',
+    'Helvetica Neue',
+    'Segoe UI',
+    ui-sans-serif,
+    sans-serif
+  );
+  --typeface-brand: var(
+    --theme-style-glass-brand-font,
+    ui-rounded,
+    'Avenir Next',
+    'Segoe UI',
+    sans-serif
+  );
+  --typeface-mono: var(
+    --theme-style-glass-mono-font,
+    'SFMono-Regular',
+    'Cascadia Mono',
+    'Liberation Mono',
+    ui-monospace,
+    monospace
+  );
+  --shell-surface: color-mix(in oklab, var(--card) 84%, transparent);
+  --shell-foreground: var(--card-foreground);
+  --shell-border: color-mix(in oklab, var(--border) 82%, white 18%);
+  --shell-shadow: var(--shadow-md);
+  --shell-backdrop: blur(18px) saturate(1.14);
+  --surface-elevated: color-mix(in oklab, var(--popover) 90%, transparent);
+  --surface-elevated-foreground: var(--popover-foreground);
+  --surface-elevated-border: color-mix(in oklab, var(--border) 80%, white 20%);
+  --surface-elevated-shadow: var(--shadow-lg);
+}

package/theme/styles/presets/styles/index.css

@@ -0,0 +1,2 @@
+@import './flat.css';
+@import './glass.css';

package/theme/styles/roles/index.css

@@ -0,0 +1,49 @@
+:root {
+  /* Component-group role tokens bridge style presets and selectors. */
+  --nav-surface: color-mix(in oklab, var(--shell-surface) 92%, transparent);
+  --nav-foreground: var(--shell-foreground);
+  --nav-border: var(--shell-border);
+  --nav-item-hover-surface: var(--tertiary-container);
+  --nav-item-hover-foreground: var(--tertiary-container-foreground);
+  --nav-item-active-surface: var(--secondary-container);
+  --nav-item-active-foreground: var(--secondary-container-foreground);
+
+  --sidebar-chrome-surface: var(--sidebar);
+  --sidebar-chrome-foreground: var(--sidebar-foreground);
+  --sidebar-chrome-border: var(--sidebar-border);
+  --sidebar-item-hover-surface: var(--sidebar-accent);
+  --sidebar-item-hover-foreground: var(--sidebar-accent-foreground);
+  --sidebar-item-active-surface: var(--sidebar-primary);
+  --sidebar-item-active-foreground: var(--sidebar-primary-foreground);
+
+  --container-surface: var(--shell-surface);
+  --container-foreground: var(--shell-foreground);
+  --container-border: var(--shell-border);
+  --container-shadow: var(--shell-shadow);
+  --container-backdrop: var(--shell-backdrop);
+
+  --overlay-surface: var(--surface-elevated);
+  --overlay-foreground: var(--surface-elevated-foreground);
+  --overlay-border: var(--surface-elevated-border);
+  --overlay-shadow: var(--surface-elevated-shadow);
+  --overlay-backdrop: var(--shell-backdrop);
+
+  --data-surface: var(--container-surface);
+  --data-foreground: var(--container-foreground);
+  --data-border: var(--container-border);
+  --data-header-surface: color-mix(in oklab, var(--overlay-surface) 72%, var(--data-surface));
+  --data-header-foreground: var(--data-foreground);
+  --data-row-hover-surface: color-mix(in oklab, var(--tertiary-container) 72%, var(--data-surface));
+  --data-row-selected-surface: var(--secondary-container);
+
+  --control-surface: var(--container-surface);
+  --control-foreground: var(--container-foreground);
+  --control-border: var(--container-border);
+  --control-shadow: none;
+  --control-backdrop: var(--container-backdrop);
+  --control-hover-surface: var(--tertiary-container);
+  --control-hover-foreground: var(--tertiary-container-foreground);
+  --control-active-surface: var(--secondary-container);
+  --control-active-foreground: var(--secondary-container-foreground);
+  --control-focus-ring: var(--ring);
+}

package/theme/styles/tokens/foundation.css

@@ -0,0 +1,139 @@
+@theme inline {
+  --font-sans: var(--typeface-plain);
+  --font-display: var(--typeface-brand);
+  --font-mono: var(--typeface-mono);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-solid: var(--primary-solid);
+  --color-primary-solid-foreground: var(--primary-solid-foreground);
+  --color-primary-container: var(--primary-container);
+  --color-primary-container-foreground: var(--primary-container-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary-solid: var(--secondary-solid);
+  --color-secondary-solid-foreground: var(--secondary-solid-foreground);
+  --color-secondary-container: var(--secondary-container);
+  --color-secondary-container-foreground: var(--secondary-container-foreground);
+  --color-tertiary: var(--tertiary);
+  --color-tertiary-foreground: var(--tertiary-foreground);
+  --color-tertiary-solid: var(--tertiary-solid);
+  --color-tertiary-solid-foreground: var(--tertiary-solid-foreground);
+  --color-tertiary-container: var(--tertiary-container);
+  --color-tertiary-container-foreground: var(--tertiary-container-foreground);
+  --color-neutral: var(--neutral);
+  --color-neutral-foreground: var(--neutral-foreground);
+  --color-neutral-solid: var(--neutral-solid);
+  --color-neutral-solid-foreground: var(--neutral-solid-foreground);
+  --color-neutral-container: var(--neutral-container);
+  --color-neutral-container-foreground: var(--neutral-container-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-solid: var(--destructive-solid);
+  --color-destructive-solid-foreground: var(--destructive-solid-foreground);
+  --color-destructive-container: var(--destructive-container);
+  --color-destructive-container-foreground: var(--destructive-container-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-solid: var(--success-solid);
+  --color-success-solid-foreground: var(--success-solid-foreground);
+  --color-success-container: var(--success-container);
+  --color-success-container-foreground: var(--success-container-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-solid: var(--warning-solid);
+  --color-warning-solid-foreground: var(--warning-solid-foreground);
+  --color-warning-container: var(--warning-container);
+  --color-warning-container-foreground: var(--warning-container-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-solid: var(--info-solid);
+  --color-info-solid-foreground: var(--info-solid-foreground);
+  --color-info-container: var(--info-container);
+  --color-info-container-foreground: var(--info-container-foreground);
+  --color-disabled: var(--disabled);
+  --color-disabled-foreground: var(--disabled-foreground);
+  --color-disabled-border: var(--disabled-border);
+  --color-inverse: var(--inverse);
+  --color-inverse-foreground: var(--inverse-foreground);
+  --color-inverse-border: var(--inverse-border);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+/* Keep these radius tokens in :root as well so non-Tailwind consumers get the same values as @theme. */
+:root {
+  --typeface-plain:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --typeface-brand: var(--typeface-plain);
+  --typeface-mono: 'SFMono-Regular', 'Cascadia Mono', 'Liberation Mono', ui-monospace, monospace;
+  --radius: 0.75rem;
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.06);
+  --shadow-sm: 0 12px 24px -18px rgb(15 23 42 / 0.18);
+  --shadow-md: 0 20px 40px -24px rgb(15 23 42 / 0.22);
+  --shadow-lg: 0 32px 60px -32px rgb(15 23 42 / 0.28);
+  --backdrop: none;
+  --theme-primary: oklch(0.59 0.18 257.5);
+  --theme-on-primary: oklch(0.985 0 0);
+  --theme-secondary: oklch(0.654 0.137 259.075);
+  --theme-on-secondary: oklch(0.205 0.012 285.9);
+  --theme-tertiary: oklch(0.72 0.096 260.483);
+  --theme-on-tertiary: oklch(0.205 0.012 285.9);
+  --theme-neutral: oklch(0.736 0.035 265.705);
+  --theme-on-neutral: oklch(0.205 0.012 285.9);
+  --layout-shell-max-width: 100%;
+  --layout-shell-padding: 0rem;
+  --layout-shell-radius: 0rem;
+  --layout-sidebar-width: 17rem;
+  --layout-header-height: 3.75rem;
+  --layout-header-display: grid;
+  --layout-sidebar-display: flex;
+  --ngt-motion-duration-fast: 140ms;
+  --ngt-motion-duration-medium: 220ms;
+  --ngt-motion-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
+  --ngt-chrome-transition:
+    background-color var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard),
+    color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    border-color var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard),
+    box-shadow var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard),
+    outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    text-decoration-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard),
+    backdrop-filter var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard);
+  --ngt-shell-transition:
+    var(--ngt-chrome-transition),
+    border-radius var(--ngt-motion-duration-medium) var(--ngt-motion-ease-standard);
+  --ngt-control-transition:
+    var(--ngt-chrome-transition),
+    transform var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
+}

package/theme/styles/tokens/semantic.css

@@ -0,0 +1,87 @@
+:root {
+  color-scheme: light;
+  --background: oklch(0.988 0.003 286.1);
+  --foreground: oklch(0.205 0.012 285.9);
+  --card: oklch(0.998 0.001 286.4);
+  --card-foreground: var(--foreground);
+  --popover: oklch(0.997 0.002 286.5);
+  --popover-foreground: var(--foreground);
+  --primary-solid: var(--theme-primary);
+  --primary-solid-foreground: var(--theme-on-primary);
+  --primary-container: color-mix(in oklab, var(--theme-primary) 14%, var(--background));
+  --primary-container-foreground: var(--foreground);
+  --primary: var(--primary-solid);
+  --primary-foreground: var(--primary-solid-foreground);
+  --secondary-solid: var(--theme-secondary);
+  --secondary-solid-foreground: var(--theme-on-secondary);
+  --secondary-container: color-mix(in oklab, var(--theme-secondary) 12%, var(--background));
+  --secondary-container-foreground: var(--foreground);
+  --secondary: var(--secondary-container);
+  --secondary-foreground: var(--secondary-container-foreground);
+  --tertiary-solid: var(--theme-tertiary);
+  --tertiary-solid-foreground: var(--theme-on-tertiary);
+  --tertiary-container: color-mix(in oklab, var(--theme-tertiary) 10%, var(--background));
+  --tertiary-container-foreground: var(--foreground);
+  --tertiary: var(--tertiary-container);
+  --tertiary-foreground: var(--tertiary-container-foreground);
+  --neutral-solid: var(--theme-neutral);
+  --neutral-solid-foreground: var(--theme-on-neutral);
+  --neutral-container: color-mix(in oklab, var(--theme-neutral) 18%, var(--background));
+  --neutral-container-foreground: var(--foreground);
+  --neutral: var(--neutral-container);
+  --neutral-foreground: var(--neutral-container-foreground);
+  --muted: oklch(0.965 0.004 286.1);
+  --muted-foreground: oklch(0.553 0.013 286.2);
+  --accent: var(--tertiary-container);
+  --accent-foreground: var(--tertiary-container-foreground);
+  --destructive-solid: oklch(0.637 0.237 25.5);
+  --destructive-solid-foreground: oklch(0.985 0 0);
+  --destructive-container: color-mix(in oklab, var(--destructive-solid) 14%, var(--background));
+  --destructive-container-foreground: var(--foreground);
+  --destructive: var(--destructive-solid);
+  --destructive-foreground: var(--destructive-solid-foreground);
+  --success-solid: oklch(0.673 0.152 151.5);
+  --success-solid-foreground: oklch(0.192 0.015 151.3);
+  --success-container: color-mix(in oklab, var(--success-solid) 14%, var(--background));
+  --success-container-foreground: var(--foreground);
+  --success: var(--success-container);
+  --success-foreground: var(--success-container-foreground);
+  --warning-solid: oklch(0.796 0.136 82.4);
+  --warning-solid-foreground: oklch(0.262 0.028 73.1);
+  --warning-container: color-mix(in oklab, var(--warning-solid) 16%, var(--background));
+  --warning-container-foreground: var(--foreground);
+  --warning: var(--warning-container);
+  --warning-foreground: var(--warning-container-foreground);
+  --info-solid: oklch(0.69 0.116 239.4);
+  --info-solid-foreground: oklch(0.19 0.014 286.1);
+  --info-container: color-mix(in oklab, var(--info-solid) 14%, var(--background));
+  --info-container-foreground: var(--foreground);
+  --info: var(--info-container);
+  --info-foreground: var(--info-container-foreground);
+  --disabled: color-mix(in oklab, var(--neutral-solid) 14%, var(--background));
+  --disabled-foreground: color-mix(in oklab, var(--foreground) 38%, var(--background));
+  --disabled-border: color-mix(in oklab, var(--border) 70%, var(--background));
+  --inverse: var(--foreground);
+  --inverse-foreground: var(--background);
+  --inverse-border: color-mix(in oklab, var(--inverse) 84%, var(--inverse-foreground));
+  --border: color-mix(in oklab, var(--foreground) 12%, white 88%);
+  --input: color-mix(in oklab, var(--foreground) 10%, white 90%);
+  --ring: color-mix(in oklab, var(--primary-solid) 68%, white 32%);
+  --sidebar: color-mix(in oklab, var(--card) 90%, var(--muted) 10%);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: color-mix(in oklab, var(--tertiary-solid) 12%, var(--sidebar));
+  --sidebar-accent-foreground: var(--sidebar-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  --shell-surface: var(--card);
+  --shell-foreground: var(--card-foreground);
+  --shell-border: var(--border);
+  --shell-shadow: var(--shadow-xs);
+  --shell-backdrop: var(--backdrop);
+  --surface-elevated: var(--popover);
+  --surface-elevated-foreground: var(--popover-foreground);
+  --surface-elevated-border: var(--border);
+  --surface-elevated-shadow: var(--shadow-sm);
+}

package/theme/styles/utilities/index.css

@@ -0,0 +1,88 @@
+:root {
+  font-family: var(--typeface-plain);
+}
+
+:where(button, input, textarea, select, optgroup) {
+  font-family: var(--typeface-plain);
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--typeface-brand);
+}
+
+:where(code, kbd, pre, samp) {
+  font-family: var(--typeface-mono);
+}
+
+.style-shell {
+  background: var(--container-surface);
+  color: var(--container-foreground);
+  border: 1px solid var(--container-border);
+  box-shadow: var(--container-shadow);
+  backdrop-filter: var(--container-backdrop);
+  -webkit-backdrop-filter: var(--container-backdrop);
+  transition: var(--ngt-shell-transition);
+}
+
+.focus-ring:focus-visible {
+  outline: 2px solid var(--control-focus-ring);
+  outline-offset: 2px;
+  transition: outline-color var(--ngt-motion-duration-fast) var(--ngt-motion-ease-standard);
+}
+
+.ngt-icon-button {
+  transition: var(--ngt-control-transition);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ngt-motion-duration-fast: 0.01ms;
+    --ngt-motion-duration-medium: 0.01ms;
+  }
+}
+
+.ngt-icon-button.mat-mdc-icon-button .lucide {
+  inline-size: 1.1rem;
+  block-size: 1.1rem;
+}
+
+/* Compatibility aliases for consumers migrating toward direct Tailwind v4 token usage. */
+.bg-background {
+  background-color: var(--background);
+}
+
+.bg-foreground {
+  background-color: var(--foreground);
+}
+
+.text-background {
+  color: var(--background);
+}
+
+.text-foreground {
+  color: var(--foreground);
+}
+
+.text-foreground\/50 {
+  color: color-mix(in oklab, var(--foreground) 50%, transparent);
+}
+
+.text-foreground\/60 {
+  color: color-mix(in oklab, var(--foreground) 60%, transparent);
+}
+
+.text-foreground\/65 {
+  color: color-mix(in oklab, var(--foreground) 65%, transparent);
+}
+
+.text-foreground\/70 {
+  color: color-mix(in oklab, var(--foreground) 70%, transparent);
+}
+
+.text-foreground\/75 {
+  color: color-mix(in oklab, var(--foreground) 75%, transparent);
+}
+
+.border-border {
+  border-color: var(--border);
+}

package/types/ojiepermana-angular-internal.d.ts

@@ -0,0 +1,26 @@
+import * as _angular_core from '@angular/core';
+
+declare const libraryLucideConfigProvider: _angular_core.Provider;
+
+interface StorageLike {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+    removeItem(key: string): void;
+}
+interface LocalStorageStateAdapterConfig<Axis extends string> {
+    readonly isBrowser: boolean;
+    readonly storage: StorageLike | null;
+    readonly keys: Record<Axis, string>;
+    readonly legacyPrefix: string;
+}
+declare class LocalStorageStateAdapter<Axis extends string> {
+    private readonly config;
+    constructor(config: LocalStorageStateAdapterConfig<Axis>);
+    clear(axis: Axis): void;
+    persist(axis: Axis, value: string): void;
+    read<T extends string>(axis: Axis, fallback: T, isValid: (value: string) => value is T): T;
+    private key;
+    private legacyKey;
+}
+
+export { LocalStorageStateAdapter, libraryLucideConfigProvider };

package/types/ojiepermana-angular-layout.d.ts

@@ -0,0 +1,90 @@
+import * as i0 from '@angular/core';
+import { EnvironmentProviders, InjectionToken } from '@angular/core';
+
+declare const LAYOUT_MODES: readonly ["vertical", "horizontal", "empty"];
+type LayoutMode = (typeof LAYOUT_MODES)[number];
+declare const LAYOUT_CONTAINERS: readonly ["full", "boxed"];
+type LayoutContainer = (typeof LAYOUT_CONTAINERS)[number];
+interface NgLayoutConfig {
+    defaultMode: LayoutMode;
+    defaultContainer: LayoutContainer;
+}
+
+declare class LayoutService {
+    private readonly config;
+    private readonly document;
+    private readonly isBrowser;
+    private readonly storage;
+    readonly mode: i0.WritableSignal<"vertical" | "horizontal" | "empty">;
+    readonly container: i0.WritableSignal<"full" | "boxed">;
+    constructor();
+    /**
+     * Updates the active shell mode and persists the value for future sessions.
+     */
+    setMode(value: LayoutMode): void;
+    /**
+     * Updates the active container width mode and persists the value for future sessions.
+     */
+    setContainer(value: LayoutContainer): void;
+    /**
+     * Clears persisted layout state and restores the configured defaults for mode and container.
+     */
+    reset(): void;
+    private applyToDOM;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LayoutService>;
+}
+
+declare class LayoutHostDirective {
+    protected readonly layout: LayoutService;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutHostDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LayoutHostDirective, "[ngtLayoutHost]", never, {}, {}, never, never, true, never>;
+}
+
+declare class LayoutHorizontalComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutHorizontalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutHorizontalComponent, "horizontal", never, {}, {}, never, ["[headerBrand]", "[headerNavigation]", "[headerActions]"], true, never>;
+}
+
+declare class LayoutVerticalComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutVerticalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutVerticalComponent, "vertical", never, {}, {}, never, ["[navigation]"], true, never>;
+}
+
+declare class LayoutContainerSwitcherComponent {
+    protected readonly layout: LayoutService;
+    protected readonly label: i0.Signal<"Boxed layout container enabled" | "Boxed layout container disabled">;
+    protected toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutContainerSwitcherComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutContainerSwitcherComponent, "layout-container-switcher", never, {}, {}, never, never, true, never>;
+}
+
+declare class LayoutModeSwitcherComponent {
+    protected readonly layout: LayoutService;
+    protected readonly options: ({
+        value: "vertical";
+        label: string;
+    } | {
+        value: "horizontal";
+        label: string;
+    })[];
+    protected readonly currentOption: i0.Signal<{
+        value: "vertical";
+        label: string;
+    } | {
+        value: "horizontal";
+        label: string;
+    } | {
+        value: "empty";
+        label: string;
+    }>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutModeSwitcherComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutModeSwitcherComponent, "layout-mode-switcher", never, {}, {}, never, never, true, never>;
+}
+
+declare function provideNgLayout(config?: Partial<NgLayoutConfig>): EnvironmentProviders;
+
+declare const NG_LAYOUT_CONFIG: InjectionToken<NgLayoutConfig>;
+
+export { LayoutContainerSwitcherComponent, LayoutHorizontalComponent, LayoutHostDirective, LayoutModeSwitcherComponent, LayoutService, LayoutVerticalComponent, NG_LAYOUT_CONFIG, provideNgLayout };
+export type { LayoutContainer, LayoutMode, NgLayoutConfig };

package/types/ojiepermana-angular-shell.d.ts

@@ -0,0 +1,12 @@
+import { EnvironmentProviders } from '@angular/core';
+import { NgLayoutConfig } from '@ojiepermana/angular/layout';
+import { NgThemeConfig } from '@ojiepermana/angular/theme/service';
+
+interface NgShellConfig {
+    readonly theme?: Partial<NgThemeConfig>;
+    readonly layout?: Partial<NgLayoutConfig>;
+}
+declare function provideNgShell(config?: NgShellConfig): EnvironmentProviders;
+
+export { provideNgShell };
+export type { NgShellConfig };