@ojiepermana/angular 21.3.4 → 22.0.1

package/theme/styles/integrations/material/slider.css

@@ -0,0 +1,194 @@
+/**
+ * Angular Material slider overrides.
+ *
+ * MatSlider keeps Material's range math, keyboard handling, thumb labels, and
+ * hidden native inputs while the visible track and thumbs follow local tokens.
+ */
+@layer tokens {
+  :root,
+  [data-style='default'] {
+    --ui-mat-slider-track-radius: 9999px;
+    --ui-mat-slider-track-border-color: transparent;
+    --ui-mat-slider-inactive-track-opacity: 1;
+    --ui-mat-slider-handle-state-scale: 1.08;
+    --ui-mat-slider-disabled-opacity: 0.55;
+    --ui-mat-slider-value-indicator-shadow: var(--shadow-md);
+    --ui-mat-slider-value-indicator-border-color: hsl(var(--border));
+
+    --mat-slider-active-track-height: 0.5rem;
+    --mat-slider-active-track-shape: var(--ui-mat-slider-track-radius);
+    --mat-slider-active-track-color: hsl(var(--primary));
+    --mat-slider-inactive-track-height: 0.5rem;
+    --mat-slider-inactive-track-shape: var(--ui-mat-slider-track-radius);
+    --mat-slider-inactive-track-color: hsl(var(--muted));
+    --mat-slider-handle-width: 1rem;
+    --mat-slider-handle-height: 1rem;
+    --mat-slider-handle-shape: 9999px;
+    --mat-slider-handle-color: hsl(var(--primary));
+    --mat-slider-hover-handle-color: hsl(var(--primary));
+    --mat-slider-focus-handle-color: hsl(var(--primary));
+    --mat-slider-handle-elevation: 0 0 0 2px hsl(var(--background)), var(--shadow-sm);
+    --mat-slider-ripple-color: hsl(var(--primary));
+    --mat-slider-hover-state-layer-color: hsl(var(--primary) / 0.12);
+    --mat-slider-focus-state-layer-color: hsl(var(--ring) / 0.2);
+    --mat-slider-disabled-active-track-color: hsl(var(--muted-foreground));
+    --mat-slider-disabled-inactive-track-color: hsl(var(--muted));
+    --mat-slider-disabled-handle-color: hsl(var(--muted-foreground));
+    --mat-slider-with-overlap-handle-outline-color: hsl(var(--background));
+    --mat-slider-with-overlap-handle-outline-width: 2px;
+    --mat-slider-with-tick-marks-container-size: 2px;
+    --mat-slider-with-tick-marks-container-shape: 9999px;
+    --mat-slider-with-tick-marks-active-container-color: hsl(var(--primary-foreground));
+    --mat-slider-with-tick-marks-inactive-container-color: hsl(var(--muted-foreground));
+    --mat-slider-with-tick-marks-disabled-container-color: hsl(var(--muted-foreground));
+    --mat-slider-with-tick-marks-active-container-opacity: 0.75;
+    --mat-slider-with-tick-marks-inactive-container-opacity: 0.7;
+    --mat-slider-label-container-color: hsl(var(--popover));
+    --mat-slider-label-label-text-color: hsl(var(--popover-foreground));
+    --mat-slider-label-label-text-font: var(--font-sans);
+    --mat-slider-label-label-text-line-height: 1.25rem;
+    --mat-slider-label-label-text-size: 0.75rem;
+    --mat-slider-label-label-text-tracking: 0;
+    --mat-slider-label-label-text-weight: 600;
+    --mat-slider-value-indicator-border-radius: var(--radius-sm);
+    --mat-slider-value-indicator-caret-display: block;
+    --mat-slider-value-indicator-container-transform: translateX(-50%);
+    --mat-slider-value-indicator-height: 1.75rem;
+    --mat-slider-value-indicator-padding: 0 0.625rem;
+    --mat-slider-value-indicator-text-transform: none;
+    --mat-slider-value-indicator-transform-origin: bottom;
+    --mat-slider-value-indicator-width: auto;
+    --mat-slider-value-indicator-opacity: 1;
+  }
+
+  [data-style='sharp'] {
+    --ui-mat-slider-track-radius: 0;
+    --ui-mat-slider-handle-state-scale: 1;
+    --ui-mat-slider-value-indicator-shadow: none;
+
+    --mat-slider-active-track-shape: 0;
+    --mat-slider-inactive-track-shape: 0;
+    --mat-slider-handle-shape: 0;
+    --mat-slider-handle-elevation: none;
+    --mat-slider-with-tick-marks-container-shape: 0;
+    --mat-slider-value-indicator-border-radius: 0;
+  }
+
+  [data-style='brutal'] {
+    --ui-mat-slider-track-radius: 0;
+    --ui-mat-slider-track-border-color: hsl(var(--foreground));
+    --ui-mat-slider-handle-state-scale: 1.04;
+    --ui-mat-slider-value-indicator-shadow: var(--shadow-lg);
+    --ui-mat-slider-value-indicator-border-color: hsl(var(--foreground));
+
+    --mat-slider-active-track-color: hsl(var(--foreground));
+    --mat-slider-active-track-shape: 0;
+    --mat-slider-inactive-track-color: hsl(var(--background));
+    --mat-slider-inactive-track-shape: 0;
+    --mat-slider-handle-shape: 0;
+    --mat-slider-handle-color: hsl(var(--background));
+    --mat-slider-hover-handle-color: hsl(var(--primary));
+    --mat-slider-focus-handle-color: hsl(var(--primary));
+    --mat-slider-handle-elevation: 0 0 0 var(--border-width) hsl(var(--foreground)), var(--shadow-lg);
+    --mat-slider-ripple-color: hsl(var(--foreground));
+    --mat-slider-hover-state-layer-color: hsl(var(--primary) / 0.2);
+    --mat-slider-focus-state-layer-color: hsl(var(--foreground) / 0.18);
+    --mat-slider-with-overlap-handle-outline-color: hsl(var(--foreground));
+    --mat-slider-with-tick-marks-container-shape: 0;
+    --mat-slider-with-tick-marks-active-container-color: hsl(var(--primary-foreground));
+    --mat-slider-with-tick-marks-inactive-container-color: hsl(var(--foreground));
+    --mat-slider-label-container-color: hsl(var(--foreground));
+    --mat-slider-label-label-text-color: hsl(var(--background));
+    --mat-slider-value-indicator-border-radius: 0;
+  }
+
+  [data-style='soft'] {
+    --ui-mat-slider-inactive-track-opacity: 1;
+    --ui-mat-slider-handle-state-scale: 1.1;
+    --ui-mat-slider-value-indicator-border-color: hsl(var(--border) / 0.7);
+
+    --mat-slider-active-track-height: 0.625rem;
+    --mat-slider-inactive-track-height: 0.625rem;
+    --mat-slider-inactive-track-color: hsl(var(--accent) / 0.68);
+    --mat-slider-handle-width: 1.125rem;
+    --mat-slider-handle-height: 1.125rem;
+    --mat-slider-handle-elevation: 0 0 0 3px hsl(var(--background)), var(--shadow-md);
+    --mat-slider-hover-state-layer-color: hsl(var(--primary) / 0.16);
+    --mat-slider-focus-state-layer-color: hsl(var(--ring) / 0.24);
+    --mat-slider-label-container-color: hsl(var(--popover));
+    --mat-slider-value-indicator-border-radius: var(--radius-md);
+  }
+}
+
+@layer components {
+  .mat-mdc-slider {
+    @apply block w-full min-w-32 text-foreground;
+
+    display: block !important;
+    width: 100% !important;
+    min-width: 8rem !important;
+    min-height: 3rem;
+    margin-inline: 0;
+  }
+
+  .mat-mdc-slider .mdc-slider__track--active,
+  .mat-mdc-slider .mdc-slider__track--inactive {
+    @apply transition-colors;
+
+    border-radius: var(--ui-mat-slider-track-radius);
+  }
+
+  .mat-mdc-slider .mdc-slider__track--inactive {
+    opacity: var(--ui-mat-slider-inactive-track-opacity);
+  }
+
+  .mat-mdc-slider .mdc-slider__track--inactive::before {
+    border-color: var(--ui-mat-slider-track-border-color);
+  }
+
+  .mat-mdc-slider .mdc-slider__thumb-knob {
+    transition:
+      transform 160ms ease,
+      background-color 160ms ease,
+      border-color 160ms ease,
+      box-shadow 160ms ease;
+  }
+
+  .mat-mdc-slider .mdc-slider__thumb:hover .mdc-slider__thumb-knob,
+  .mat-mdc-slider .mdc-slider__thumb--focused .mdc-slider__thumb-knob {
+    transform: translate(-50%, -50%) scale(var(--ui-mat-slider-handle-state-scale));
+  }
+
+  .mat-mdc-slider .mat-focus-indicator::before {
+    border-radius: var(--mat-slider-handle-shape);
+  }
+
+  .mat-mdc-slider .mdc-slider__value-indicator {
+    @apply border shadow-md;
+
+    border-color: var(--ui-mat-slider-value-indicator-border-color);
+    box-shadow: var(--ui-mat-slider-value-indicator-shadow);
+  }
+
+  .mat-mdc-slider .mdc-slider__value-indicator-text {
+    @apply font-semibold;
+  }
+
+  .mat-mdc-slider .mdc-slider__value-indicator::after {
+    border-color: var(--ui-mat-slider-value-indicator-border-color);
+  }
+
+  .mat-mdc-slider.mdc-slider--disabled {
+    @apply pointer-events-none;
+
+    opacity: var(--ui-mat-slider-disabled-opacity);
+  }
+
+  .mat-mdc-slider.mdc-slider--disabled input.mdc-slider__input {
+    @apply cursor-not-allowed;
+  }
+
+  [data-style='brutal'] .mat-mdc-slider .mdc-slider__value-indicator {
+    @apply border-2;
+  }
+}

package/theme/styles/integrations/material/tabs.css

@@ -0,0 +1,229 @@
+/**
+ * Angular Material tabs overrides.
+ *
+ * MatTabGroup and MatTabNav keep their ARIA tabs behavior, keyboard handling,
+ * pagination, and ink bar logic while the header adopts local theme tokens.
+ */
+@layer tokens {
+  :root,
+  [data-style='default'] {
+    --mat-tab-container-height: 2.25rem;
+    --mat-tab-divider-color: transparent;
+    --mat-tab-divider-height: 0;
+    --mat-tab-active-indicator-color: hsl(var(--primary));
+    --mat-tab-active-indicator-height: 0;
+    --mat-tab-active-indicator-shape: var(--radius-sm);
+    --mat-tab-active-label-text-color: hsl(var(--foreground));
+    --mat-tab-active-hover-label-text-color: hsl(var(--foreground));
+    --mat-tab-active-focus-label-text-color: hsl(var(--foreground));
+    --mat-tab-active-hover-indicator-color: hsl(var(--primary));
+    --mat-tab-active-focus-indicator-color: hsl(var(--primary));
+    --mat-tab-inactive-label-text-color: hsl(var(--muted-foreground));
+    --mat-tab-inactive-hover-label-text-color: hsl(var(--foreground));
+    --mat-tab-inactive-focus-label-text-color: hsl(var(--foreground));
+    --mat-tab-active-ripple-color: hsl(var(--foreground));
+    --mat-tab-inactive-ripple-color: hsl(var(--foreground));
+    --mat-tab-disabled-ripple-color: hsl(var(--muted-foreground));
+    --mat-tab-pagination-icon-color: hsl(var(--muted-foreground));
+    --mat-tab-label-text-font: var(--font-sans);
+    --mat-tab-label-text-line-height: 1.25rem;
+    --mat-tab-label-text-size: 0.875rem;
+    --mat-tab-label-text-tracking: 0;
+    --mat-tab-label-text-weight: 500;
+
+    --ui-mat-tabs-list-background: hsl(var(--muted));
+    --ui-mat-tabs-list-border-color: transparent;
+    --ui-mat-tabs-list-border-width: 0;
+    --ui-mat-tabs-list-padding: 0.25rem;
+    --ui-mat-tabs-list-radius: var(--radius-md);
+    --ui-mat-tabs-trigger-radius: var(--radius-sm);
+    --ui-mat-tabs-trigger-active-background: hsl(var(--background));
+    --ui-mat-tabs-trigger-active-shadow: var(--shadow-sm);
+    --ui-mat-tabs-trigger-hover-background: hsl(var(--accent) / 0.62);
+    --ui-mat-tabs-trigger-focus-ring-color: hsl(var(--ring));
+    --ui-mat-tabs-content-gap: 1rem;
+    --ui-mat-tabs-line-divider-color: hsl(var(--border));
+  }
+
+  [data-style='sharp'] {
+    --ui-mat-tabs-list-radius: 0;
+    --ui-mat-tabs-trigger-radius: 0;
+    --ui-mat-tabs-trigger-active-shadow: none;
+    --ui-mat-tabs-trigger-hover-background: hsl(var(--muted));
+  }
+
+  [data-style='brutal'] {
+    --mat-tab-active-indicator-height: 0;
+    --ui-mat-tabs-list-background: hsl(var(--background));
+    --ui-mat-tabs-list-border-color: hsl(var(--foreground));
+    --ui-mat-tabs-list-border-width: var(--border-width);
+    --ui-mat-tabs-list-radius: 0;
+    --ui-mat-tabs-trigger-radius: 0;
+    --ui-mat-tabs-trigger-active-background: hsl(var(--primary));
+    --ui-mat-tabs-trigger-active-shadow: var(--shadow-lg);
+    --ui-mat-tabs-trigger-hover-background: hsl(var(--primary) / 0.14);
+    --ui-mat-tabs-line-divider-color: hsl(var(--foreground));
+  }
+
+  [data-style='soft'] {
+    --ui-mat-tabs-list-background: hsl(var(--accent) / 0.48);
+    --ui-mat-tabs-list-radius: var(--radius-lg);
+    --ui-mat-tabs-trigger-radius: var(--radius-md);
+    --ui-mat-tabs-trigger-active-background: hsl(var(--popover));
+    --ui-mat-tabs-trigger-hover-background: hsl(var(--accent) / 0.72);
+  }
+}
+
+@layer components {
+  .mat-mdc-tab-group,
+  .mat-mdc-tab-nav-bar {
+    @apply text-foreground;
+  }
+
+  .mat-mdc-tab-header,
+  .mat-mdc-tab-nav-bar {
+    @apply border bg-muted p-1;
+
+    border-color: var(--ui-mat-tabs-list-border-color);
+    border-width: var(--ui-mat-tabs-list-border-width);
+    border-radius: var(--ui-mat-tabs-list-radius);
+    background-color: var(--ui-mat-tabs-list-background);
+    padding: var(--ui-mat-tabs-list-padding);
+  }
+
+  .mat-mdc-tab-header {
+    border-bottom-width: var(--ui-mat-tabs-list-border-width);
+  }
+
+  .mat-mdc-tab-label-container {
+    @apply border-0;
+  }
+
+  .mat-mdc-tab-labels {
+    @apply gap-1;
+  }
+
+  .mat-mdc-tab,
+  .mat-mdc-tab-link {
+    @apply min-w-0 px-3 text-sm font-medium transition-colors;
+
+    min-width: 0 !important;
+    height: var(--mat-tab-container-height);
+    --mat-focus-indicator-border-radius: var(--ui-mat-tabs-trigger-radius);
+    border-radius: var(--ui-mat-tabs-trigger-radius);
+    opacity: 1 !important;
+  }
+
+  .mat-mdc-tab .mdc-tab__ripple,
+  .mat-mdc-tab-link .mdc-tab__ripple,
+  .mat-mdc-tab .mat-mdc-tab-ripple,
+  .mat-mdc-tab-link .mat-mdc-tab-ripple {
+    @apply overflow-hidden;
+
+    border-radius: inherit;
+  }
+
+  .mat-mdc-tab .mdc-tab__ripple::before,
+  .mat-mdc-tab-link .mdc-tab__ripple::before {
+    border-radius: inherit;
+  }
+
+  .mat-mdc-tab .mdc-tab__content,
+  .mat-mdc-tab-link .mdc-tab__content {
+    @apply min-w-0 gap-2;
+  }
+
+  .mat-mdc-tab .mdc-tab__text-label,
+  .mat-mdc-tab-link .mdc-tab__text-label {
+    @apply min-w-0 truncate;
+  }
+
+  .mat-mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled):hover,
+  .mat-mdc-tab-link:not(.mdc-tab--active):not(.mat-mdc-tab-disabled):hover {
+    background-color: var(--ui-mat-tabs-trigger-hover-background) !important;
+  }
+
+  .mat-mdc-tab.mdc-tab--active,
+  .mat-mdc-tab-link.mdc-tab--active {
+    background-color: var(--ui-mat-tabs-trigger-active-background) !important;
+    box-shadow: var(--ui-mat-tabs-trigger-active-shadow);
+  }
+
+  [data-style='brutal'] .mat-mdc-tab.mdc-tab--active,
+  [data-style='brutal'] .mat-mdc-tab-link.mdc-tab--active {
+    --mat-tab-active-label-text-color: hsl(var(--primary-foreground));
+    --mat-tab-active-hover-label-text-color: hsl(var(--primary-foreground));
+    --mat-tab-active-focus-label-text-color: hsl(var(--primary-foreground));
+  }
+
+  .mat-mdc-tab:focus-visible,
+  .mat-mdc-tab-link:focus-visible {
+    outline: 2px solid var(--ui-mat-tabs-trigger-focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  .mat-mdc-tab.mat-mdc-tab-disabled,
+  .mat-mdc-tab-link.mat-mdc-tab-disabled {
+    @apply pointer-events-none opacity-50;
+  }
+
+  .mat-mdc-tab-group:not(.ui-mat-tabs-line) .mdc-tab-indicator,
+  .mat-mdc-tab-nav-bar:not(.ui-mat-tabs-line) .mdc-tab-indicator {
+    display: none;
+  }
+
+  .ui-mat-tabs-line.mat-mdc-tab-group,
+  .ui-mat-tabs-line.mat-mdc-tab-nav-bar {
+    --mat-tab-container-height: 2.75rem;
+    --mat-tab-active-indicator-height: 2px;
+    --mat-tab-divider-color: var(--ui-mat-tabs-line-divider-color);
+    --mat-tab-divider-height: var(--border-width);
+    --ui-mat-tabs-list-background: transparent;
+    --ui-mat-tabs-list-border-color: var(--ui-mat-tabs-line-divider-color);
+    --ui-mat-tabs-list-border-width: 0 0 var(--border-width);
+    --ui-mat-tabs-list-padding: 0;
+    --ui-mat-tabs-list-radius: 0;
+    --ui-mat-tabs-trigger-active-background: transparent;
+    --ui-mat-tabs-trigger-active-shadow: none;
+  }
+
+  .ui-mat-tabs-line .mat-mdc-tab-header,
+  .mat-mdc-tab-nav-bar.ui-mat-tabs-line {
+    @apply rounded-none border-x-0 border-t-0 bg-transparent p-0;
+  }
+
+  .ui-mat-tabs-line .mat-mdc-tab,
+  .mat-mdc-tab-nav-bar.ui-mat-tabs-line .mat-mdc-tab-link {
+    @apply rounded-none px-4;
+  }
+
+  .mat-mdc-tab-body-wrapper {
+    margin-top: var(--ui-mat-tabs-content-gap);
+  }
+
+  .mat-mdc-tab-body-content {
+    @apply text-sm text-muted-foreground;
+
+    line-height: 1.5rem;
+    outline: none;
+  }
+
+  .mat-mdc-tab-body-content:focus-visible {
+    outline: 2px solid var(--ui-mat-tabs-trigger-focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  .mat-mdc-tab-header-pagination {
+    @apply rounded-sm text-muted-foreground transition-colors;
+
+    min-width: 2rem;
+  }
+
+  .mat-mdc-tab-header-pagination:hover {
+    @apply bg-accent text-accent-foreground;
+  }
+
+  .mat-mdc-tab-header-pagination-disabled {
+    @apply opacity-40;
+  }
+}

package/theme/styles/integrations/material.css

@@ -1,8 +1,21 @@
+@import './material/autocomplete.css';
+@import './material/button.css';
+@import './material/dialog.css';
+@import './material/select.css';
+@import './material/slide-toggle.css';
+@import './material/slider.css';
+@import './material/tabs.css';
+
 /**
- * Maps the 3-layer theme tokens into Angular Material system and MDC tokens.
+ * Angular Material bridge for the 3-layer theme tokens.
+ *
+ * Keep this file as the public Material index. Component-specific overrides
+ * live in ./material/*.css so each Material component can be maintained in a
+ * small file while consumers keep importing one stylesheet.
  */
 @layer tokens {
   :root {
+    /* Material system colors. */
     --mat-sys-primary: hsl(var(--primary));
     --mat-sys-on-primary: hsl(var(--primary-foreground));
     --mat-sys-primary-container: hsl(var(--accent));
@@ -44,6 +57,12 @@
     --mat-sys-shadow: hsl(var(--foreground) / 0.14);
     --mat-sys-scrim: hsl(var(--foreground) / 0.5);
 
+    --mat-sys-hover-state-layer-opacity: 0.08;
+    --mat-sys-focus-state-layer-opacity: 0.12;
+    --mat-sys-pressed-state-layer-opacity: 0.12;
+    --mat-sys-dragged-state-layer-opacity: 0.16;
+
+    /* Shape and elevation inherit from the active style axis. */
     --mat-sys-corner-none: 0;
     --mat-sys-corner-extra-small: var(--radius-sm);
     --mat-sys-corner-extra-small-top: var(--radius-sm) var(--radius-sm) 0 0;
@@ -62,23 +81,7 @@
     --mat-sys-level4: var(--shadow-lg);
     --mat-sys-level5: var(--shadow-lg);
 
-    --mdc-filled-button-container-color: hsl(var(--primary));
-    --mdc-filled-button-label-text-color: hsl(var(--primary-foreground));
-    --mdc-filled-button-container-shape: var(--radius-sm);
-
-    --mdc-outlined-button-outline-color: hsl(var(--border));
-    --mdc-outlined-button-label-text-color: hsl(var(--foreground));
-    --mdc-outlined-button-container-shape: var(--radius-sm);
-
-    --mdc-text-button-label-text-color: hsl(var(--foreground));
-
-    --mat-text-button-hover-state-layer-opacity: 0.08;
-    --mat-filled-button-hover-state-layer-opacity: 0.08;
-
-    --mdc-fab-container-color: hsl(var(--primary));
-    --mdc-fab-container-shape: var(--radius-md);
-    --mat-fab-foreground-color: hsl(var(--primary-foreground));
-
+    /* Cards and dialogs. */
     --mdc-elevated-card-container-color: hsl(var(--card));
     --mdc-elevated-card-container-shape: var(--radius-md);
     --mdc-elevated-card-container-elevation: var(--shadow);
@@ -87,6 +90,12 @@
     --mdc-outlined-card-outline-color: hsl(var(--border));
     --mdc-outlined-card-container-shape: var(--radius-md);
 
+    --mdc-dialog-container-color: hsl(var(--popover));
+    --mdc-dialog-container-shape: var(--radius-lg);
+    --mdc-dialog-subhead-color: hsl(var(--popover-foreground));
+    --mdc-dialog-supporting-text-color: hsl(var(--muted-foreground));
+
+    /* Text fields and select surfaces. */
     --mdc-outlined-text-field-outline-color: hsl(var(--border));
     --mdc-outlined-text-field-focus-outline-color: hsl(var(--ring));
     --mdc-outlined-text-field-hover-outline-color: hsl(var(--foreground) / 0.3);
@@ -104,10 +113,19 @@
     --mat-select-placeholder-text-color: hsl(var(--muted-foreground));
     --mat-select-enabled-arrow-color: hsl(var(--muted-foreground));
 
+    /* Option rows shared by select and autocomplete. Component files may scope these further. */
     --mat-option-label-text-color: hsl(var(--foreground));
+    --mat-option-label-text-font: var(--font-sans);
+    --mat-option-label-text-line-height: 1.25rem;
+    --mat-option-label-text-size: 0.875rem;
+    --mat-option-label-text-tracking: 0;
+    --mat-option-label-text-weight: 400;
     --mat-option-selected-state-label-text-color: hsl(var(--primary));
     --mat-option-hover-state-layer-color: hsl(var(--accent));
+    --mat-option-focus-state-layer-color: hsl(var(--accent));
+    --mat-option-selected-state-layer-color: hsl(var(--accent));
 
+    /* Selection controls. */
     --mdc-checkbox-selected-icon-color: hsl(var(--primary));
     --mdc-checkbox-selected-hover-icon-color: hsl(var(--primary));
     --mdc-checkbox-selected-focus-icon-color: hsl(var(--primary));
@@ -118,29 +136,11 @@
     --mdc-radio-selected-hover-icon-color: hsl(var(--primary));
     --mdc-radio-unselected-icon-color: hsl(var(--muted-foreground));
 
-    --mdc-switch-selected-track-color: hsl(var(--primary));
-    --mdc-switch-selected-handle-color: hsl(var(--primary-foreground));
-    --mdc-switch-unselected-track-color: hsl(var(--muted));
-    --mdc-switch-unselected-handle-color: hsl(var(--background));
-
-    --mdc-slider-active-track-color: hsl(var(--primary));
-    --mdc-slider-inactive-track-color: hsl(var(--muted));
-    --mdc-slider-handle-color: hsl(var(--primary));
-
     --mdc-chip-elevated-container-color: hsl(var(--secondary));
     --mdc-chip-label-text-color: hsl(var(--secondary-foreground));
     --mdc-chip-container-shape-radius: var(--radius-sm);
 
-    --mdc-dialog-container-color: hsl(var(--popover));
-    --mdc-dialog-container-shape: var(--radius-lg);
-    --mdc-dialog-subhead-color: hsl(var(--popover-foreground));
-    --mdc-dialog-supporting-text-color: hsl(var(--muted-foreground));
-
-    --mdc-tab-indicator-active-indicator-color: hsl(var(--primary));
-    --mat-tab-header-active-label-text-color: hsl(var(--foreground));
-    --mat-tab-header-inactive-label-text-color: hsl(var(--muted-foreground));
-    --mat-tab-header-active-ripple-color: hsl(var(--primary) / 0.1);
-
+    /* Navigation and overlays. */
     --mdc-snackbar-container-color: hsl(var(--foreground));
     --mdc-snackbar-supporting-text-color: hsl(var(--background));
     --mdc-snackbar-container-shape: var(--radius-md);
@@ -164,6 +164,7 @@
     --mdc-plain-tooltip-container-color: hsl(var(--foreground));
     --mdc-plain-tooltip-supporting-text-color: hsl(var(--background));
 
+    /* Data display and progress. */
     --mdc-linear-progress-active-indicator-color: hsl(var(--primary));
     --mdc-linear-progress-track-color: hsl(var(--muted));
     --mdc-circular-progress-active-indicator-color: hsl(var(--primary));
@@ -203,47 +204,56 @@
 }
 
 @layer components {
-  [data-style='brutal'] .mat-mdc-raised-button,
-  [data-style='brutal'] .mat-mdc-unelevated-button,
-  [data-style='brutal'] .mat-mdc-outlined-button,
-  [data-style='brutal'] .mat-mdc-fab,
-  [data-style='brutal'] .mat-mdc-mini-fab {
-    box-shadow: var(--shadow) !important;
-    border: var(--border-width) solid hsl(var(--foreground));
+  .mat-mdc-snack-bar-container.ui-toast-panel {
+    --mdc-snackbar-container-color: hsl(var(--background));
+    --mdc-snackbar-supporting-text-color: hsl(var(--foreground));
+    --mat-snack-bar-button-color: hsl(var(--foreground));
   }
 
-  [data-style='brutal'] .mat-mdc-raised-button:hover,
-  [data-style='brutal'] .mat-mdc-unelevated-button:hover,
-  [data-style='brutal'] .mat-mdc-outlined-button:hover,
-  [data-style='brutal'] .mat-mdc-fab:hover,
-  [data-style='brutal'] .mat-mdc-mini-fab:hover {
-    box-shadow: var(--shadow-md) !important;
+  .mat-mdc-snack-bar-container.ui-toast-panel .mdc-snackbar__surface {
+    @apply border border-border;
   }
 
-  [data-style='brutal'] .mat-mdc-raised-button:active,
-  [data-style='brutal'] .mat-mdc-unelevated-button:active,
-  [data-style='brutal'] .mat-mdc-outlined-button:active,
-  [data-style='brutal'] .mat-mdc-fab:active,
-  [data-style='brutal'] .mat-mdc-mini-fab:active {
-    transform: translate(2px, 2px);
-    box-shadow: none !important;
+  .mat-mdc-snack-bar-container.ui-toast-panel .mdc-snackbar__label {
+    white-space: pre-line;
+  }
+
+  .mat-mdc-snack-bar-container.ui-toast-success {
+    --mdc-snackbar-container-color: hsl(var(--primary));
+    --mdc-snackbar-supporting-text-color: hsl(var(--primary-foreground));
+    --mat-snack-bar-button-color: hsl(var(--primary-foreground));
+  }
+
+  .mat-mdc-snack-bar-container.ui-toast-destructive {
+    --mdc-snackbar-container-color: hsl(var(--destructive));
+    --mdc-snackbar-supporting-text-color: hsl(var(--destructive-foreground));
+    --mat-snack-bar-button-color: hsl(var(--destructive-foreground));
+  }
+
+  .mat-mdc-snack-bar-container.ui-toast-info {
+    --mdc-snackbar-container-color: hsl(var(--info));
+    --mdc-snackbar-supporting-text-color: hsl(var(--info-foreground));
+    --mat-snack-bar-button-color: hsl(var(--info-foreground));
+  }
+
+  .mat-mdc-snack-bar-container.ui-toast-warning {
+    --mdc-snackbar-container-color: hsl(var(--warning));
+    --mdc-snackbar-supporting-text-color: hsl(var(--warning-foreground));
+    --mat-snack-bar-button-color: hsl(var(--warning-foreground));
   }
 
   [data-style='brutal'] .mat-mdc-card,
-  [data-style='brutal'] .mat-mdc-dialog-container .mdc-dialog__surface,
   [data-style='brutal'] .mat-mdc-snack-bar-container .mdc-snackbar__surface {
     box-shadow: var(--shadow-lg) !important;
     border: var(--border-width) solid hsl(var(--foreground));
   }
 
   [data-style='soft'] .mat-mdc-card,
-  [data-style='soft'] .mat-mdc-dialog-container .mdc-dialog__surface,
   [data-style='soft'] .mat-mdc-snack-bar-container .mdc-snackbar__surface {
     box-shadow: var(--shadow-lg) !important;
   }
 
   [data-style='sharp'] .mat-mdc-card,
-  [data-style='sharp'] .mat-mdc-dialog-container .mdc-dialog__surface,
   [data-style='sharp'] .mat-mdc-raised-button,
   [data-style='sharp'] .mat-mdc-unelevated-button,
   [data-style='sharp'] .mat-mdc-fab,

package/types/ojiepermana-angular-component-combobox.d.ts

@@ -22,7 +22,6 @@ declare class ComboboxComponent<T = unknown> implements ControlValueAccessor {
     readonly emptyText: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.ModelSignal<boolean>;
     readonly class: _angular_core.InputSignal<string>;
-    readonly valueChange: _angular_core.OutputEmitterRef<T | null>;
     private readonly trigger;
     private readonly panel;
     private overlayRef;
@@ -44,7 +43,7 @@ declare class ComboboxComponent<T = unknown> implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(state: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent<any>, "ui-combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent<any>, "ui-combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
 export { ComboboxComponent };