kmaterialize 2.3.3-1.0.3 → 2.3.3-1.0.30

package/README.md

@@ -15,7 +15,7 @@
 ## Getting started
 Read the [getting started guide](https://materialize.kevinzarshenas.com/getting-started.html) for more information on how to use kmaterialize.
 
-- Clone the repo: `git clone https://github.com/materializecss/materialize.git`
+- Clone the repo: `git clone https://github.com/kekefreedog/kmaterialize.git`
 - Install with [npm](https://www.npmjs.com): `npm install kmaterialize`
 
 ## Testing
@@ -28,10 +28,10 @@ The documentation can be found at <https://materialize.kevinzarshenas.com>. To r
 This is the core project with all the components. To see how they are used we recommend using an example project or go to the documentation.
 
 ### Running documentation locally
-See [Materialize Docs Repo](https://github.com/materializecss/materialize-docs) to see Materialize in Action.
+kmaterialize doesn't have its own docs site yet. See the upstream [Materialize Docs Repo](https://github.com/materializecss/materialize-docs) for an example of Materialize's components in action.
 
 ### Releases
-Previous releases are available [here](https://github.com/materializecss/materialize/releases). You can also find the changelog under each release.
+Previous releases are available [here](https://github.com/kekefreedog/kmaterialize/releases). You can also find the changelog under each release.
 
 ## Supported Browsers:
 Materialize is compatible with:
@@ -49,7 +49,7 @@ We use Jasmine as our testing framework and we're trying to write a robust test
 For quick testing install live-server node package globally and run `npm run demo`
 
 ## Contributing
-Check out the [CONTRIBUTING document](docs/CONTRIBUTING.md) in the root of the repository to learn how you can contribute. You can also browse the [help-wanted](https://github.com/materializecss/materialize/labels/help-wanted) tag in our issue tracker to find things to do.
+Check out the [CONTRIBUTING document](docs/CONTRIBUTING.md) in the root of the repository to learn how you can contribute.
 
 ## Copyright and license
 Code Copyright 2026 kmaterialize. Code released under the MIT license.

package/components/air-datepicker/_air-datepicker.scss

@@ -0,0 +1,137 @@
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/enhancement/airdatepicker_materializecss.scss
+// Remaps air-datepicker's own --adp-* custom properties onto MD3 tokens so
+// its calendar popup auto-themes with the rest of kmaterialize, instead of
+// theming the popup's own markup directly. Requires the consumer to
+// separately import air-datepicker's own base CSS (`air-datepicker/air-datepicker.css`) -
+// kmaterialize can't reach into an optional peer's package at build time
+// without turning it into a hard dependency, so this partial only overrides
+// the custom properties that stylesheet defines.
+//
+// This is the richer Rodeo toolkit variant of the port (rounded corners,
+// circular day cells, weekend/other-month readability fixes, a two-line
+// nav title) rather than CrazyPHP's plainer original.
+input[data-date-picker='air-datepicker'][readonly] {
+  caret-color: transparent;
+  cursor: pointer;
+}
+
+.input-field:has(input[data-date-picker='air-datepicker']) {
+  > label,
+  .prefix,
+  .suffix {
+    z-index: 1;
+    cursor: pointer;
+  }
+}
+
+.air-datepicker {
+  --adp-z-index: 100001; // above modals/SweetAlert-style overlays
+  --adp-transition-duration: 0.11s;
+
+  --adp-font-family: 'Roboto', sans-serif;
+  --adp-background-color: var(--md-sys-color-surface);
+  --adp-color: var(--md-sys-color-on-surface);
+  --adp-color-secondary: var(--md-sys-color-on-surface-variant);
+  --adp-border-color: var(--md-sys-color-outline-variant);
+  --adp-border-color-inner: var(--md-sys-color-outline-variant);
+
+  --adp-color-current-date: var(--md-sys-color-primary);
+
+  --adp-background-color-hover: var(--md-sys-color-surface-variant);
+  --adp-background-color-active: var(--md-sys-color-surface-variant);
+
+  --adp-cell-background-color-selected: var(--md-sys-color-primary);
+  --adp-cell-background-color-selected-hover: var(--md-sys-color-primary-container);
+  --adp-cell-border-color-in-range: var(--md-sys-color-primary);
+  --adp-cell-background-color-in-range: var(--md-sys-color-primary-container);
+  --adp-cell-background-color-in-range-hover: var(--md-sys-color-primary-container);
+  --adp-color-other-month: var(--md-sys-color-outline);
+  --adp-color-other-month-hover: var(--md-sys-color-on-surface-variant);
+
+  --adp-btn-color: var(--md-sys-color-primary);
+  --adp-btn-color-hover: var(--md-sys-color-on-primary);
+  --adp-btn-background-color-hover: var(--md-sys-color-primary-container);
+  --adp-btn-background-color-active: var(--md-sys-color-primary-container);
+
+  --adp-time-track-color: var(--md-sys-color-outline-variant);
+  --adp-time-track-color-hover: var(--md-sys-color-primary);
+  --adp-time-day-period-color: var(--md-sys-color-on-surface-variant);
+
+  // Shape - rounded popup, circular day cells, generous padding, matching
+  // the rest of kmaterialize's MD3 shape language (pill toolbars, rounded
+  // cards) rather than air-datepicker's own square default.
+  --adp-border-radius: 24px;
+  --adp-cell-border-radius: 50%;
+  --adp-padding: 16px;
+
+  --adp-color-disabled: var(--md-sys-color-outline);
+  --adp-color-disabled-in-range: var(--md-sys-color-on-surface-variant);
+
+  .air-datepicker-nav {
+    height: auto;
+    min-height: 32px;
+    padding: 0px;
+    box-shadow: initial;
+    background-color: inherit;
+    color: var(--adp-nav-color-secondary) !important;
+
+    .air-datepicker-nav--title {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 14px;
+      line-height: 1.25;
+
+      i {
+        font-size: 14px;
+      }
+
+      // A second line under the month/year, for context (e.g. what range
+      // is about to apply) - opt-in, air-datepicker doesn't emit this
+      // itself, a consumer's own `dateFormatter` can inject it.
+      small {
+        font-size: 10.5px;
+        font-weight: 500;
+        letter-spacing: 0.03em;
+        font-variant-numeric: tabular-nums;
+        color: var(--adp-color-secondary);
+      }
+    }
+
+    // Material icons sit larger than the arrows they replace.
+    .air-datepicker-nav--action i {
+      font-size: 18px;
+    }
+  }
+
+  .air-datepicker-cell {
+    font-variant-numeric: tabular-nums;
+  }
+
+  // air-datepicker tags weekends and ships no style for them.
+  .air-datepicker-cell.-day-.-weekend- {
+    color: var(--md-sys-color-outline);
+  }
+
+  .air-datepicker-body--day-name.-weekend- {
+    opacity: 0.7;
+  }
+
+  // Inside a selected range a weekend has to stay readable.
+  .air-datepicker-cell.-day-.-weekend-.-in-range-,
+  .air-datepicker-cell.-day-.-weekend-.-selected- {
+    color: inherit;
+  }
+
+  // The view holds still when a greyed (other-month) day is picked, so the
+  // selection can land off-month - without this it reads as nothing
+  // selected.
+  .air-datepicker-cell.-day-.-other-month-.-selected- {
+    color: var(--md-sys-color-on-primary);
+    background: var(--md-sys-color-primary);
+  }
+
+  i.air-datepicker--pointer {
+    display: none;
+  }
+}

package/components/air-datepicker/air-datepicker.js

@@ -0,0 +1,152 @@
+import { Component } from '../../src/component';
+import { loadPeer } from '../../src/peer-loader';
+const _defaults = {};
+let activeAirDatepickerField;
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Date.ts
+// Enhances `<input type="text" data-type="date" data-date-picker="air-datepicker">`
+// with the air-datepicker calendar/range picker - deliberately separate from
+// kmaterialize's own native `components/datepicker/` (a different, already
+// existing class-based component); this one is opted into per-input via the
+// `data-date-picker` attribute so it never collides with `.datepicker`
+// elements. The `multiple` attribute switches the picker into range mode,
+// `data-date-format`/`data-date-lang` (only "fr-FR" ported so far) mirror
+// CrazyPHP's own dataset convention.
+//
+// air-datepicker is an optional peerDependency, loaded on demand via
+// peer-loader. Its own base stylesheet (air-datepicker/air-datepicker.css)
+// must be imported separately by the consumer - see the docs page.
+export class AirDatepickerField extends Component {
+    picker;
+    ready;
+    _triggers;
+    _handleOutsideClick = (e) => {
+        const calendarEl = document.querySelector('.air-datepicker');
+        const clickedTrigger = this._triggers.some(trigger => trigger.contains(e.target));
+        if (calendarEl instanceof HTMLElement &&
+            !calendarEl.contains(e.target) &&
+            !this.el.contains(e.target) &&
+            !clickedTrigger) {
+            this.picker?.hide();
+        }
+    };
+    constructor(el, options) {
+        super(el, options, AirDatepickerField);
+        this.el.M_AirDatepickerField = this;
+        this.options = {
+            ...AirDatepickerField.defaults,
+            ...options
+        };
+        const labels = Array.from(document.querySelectorAll('label')).filter(label => label.htmlFor === this.el.id);
+        const icons = Array.from(this.el.parentElement?.querySelectorAll('.prefix, .suffix') ?? []);
+        this._triggers = [...labels, ...icons];
+        this._triggers.forEach(trigger => trigger.addEventListener('click', this._handleTriggerClick));
+        this.ready = this._setup();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    static init(els, options = {}) {
+        return super.init(els, options, AirDatepickerField);
+    }
+    static getInstance(el) {
+        return el.M_AirDatepickerField;
+    }
+    destroy() {
+        document.removeEventListener('click', this._handleOutsideClick);
+        this._triggers.forEach(trigger => trigger.removeEventListener('click', this._handleTriggerClick));
+        this.picker?.destroy();
+        if (activeAirDatepickerField === this)
+            activeAirDatepickerField = undefined;
+        this.el.M_AirDatepickerField = undefined;
+    }
+    _handleTriggerClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        void this.ready.then(() => this.picker?.show());
+    };
+    async _setup() {
+        const AirDatepicker = await loadPeer({
+            specifier: 'air-datepicker',
+            globalName: 'AirDatepicker',
+            feature: 'Date input (air-datepicker) enhancement',
+            cdnHint: '<link rel="stylesheet" href="path/to/air-datepicker.css">\n' +
+                '    <script src="path/to/air-datepicker.js"></script>\n' +
+                '    (self-hosted - copy from node_modules/air-datepicker/, or a CDN of your choice)'
+        }, () => import('air-datepicker'));
+        const dataset = this.el.dataset;
+        const builtInLocale = dataset.dateLang === 'fr-FR'
+            ? (await import('air-datepicker/locale/fr')).default
+            : (await import('air-datepicker/locale/en')).default;
+        const pickerOptions = {
+            dateFormat: dataset.dateFormat || 'yyyy-MM-dd',
+            autoClose: dataset.dateAutoClose !== 'false',
+            locale: (this.options.locale ?? builtInLocale),
+            onShow: isAnimationComplete => {
+                if (isAnimationComplete)
+                    return;
+                if (activeAirDatepickerField && activeAirDatepickerField !== this) {
+                    activeAirDatepickerField.picker?.hide();
+                }
+                activeAirDatepickerField = this;
+            },
+            onHide: isAnimationComplete => {
+                if (isAnimationComplete && activeAirDatepickerField === this) {
+                    activeAirDatepickerField = undefined;
+                }
+            }
+        };
+        let multiple = false;
+        if (this.el.multiple || dataset.dateRange === 'true') {
+            pickerOptions.range = true;
+            pickerOptions.multipleDatesSeparator = ' - ';
+            multiple = true;
+        }
+        const initialValue = this.el.getAttribute('value')?.trim();
+        if (initialValue) {
+            pickerOptions.selectedDates = multiple
+                ? initialValue.split(' - ').map(value => value.trim())
+                : [initialValue];
+        }
+        if (dataset.dateTimepicker === 'true') {
+            pickerOptions.timepicker = true;
+            if (dataset.dateTimeFormat)
+                pickerOptions.timeFormat = dataset.dateTimeFormat;
+        }
+        const supportedViews = ['days', 'months', 'years'];
+        if (supportedViews.includes(dataset.dateView ?? '')) {
+            pickerOptions.view = dataset.dateView;
+        }
+        if (supportedViews.includes(dataset.dateMinView ?? '')) {
+            pickerOptions.minView = dataset.dateMinView;
+        }
+        if (dataset.dateMobile === 'true')
+            pickerOptions.isMobile = true;
+        if (dataset.datePosition) {
+            pickerOptions.position = dataset.datePosition;
+        }
+        if (dataset.dateButtons) {
+            const supportedButtons = ['today', 'clear'];
+            pickerOptions.buttons = dataset.dateButtons
+                .split(',')
+                .map(button => button.trim())
+                .filter(button => supportedButtons.includes(button));
+        }
+        if (this.el.hasAttribute('min') && this.el.getAttribute('min')) {
+            pickerOptions.minDate = new Date(this.el.getAttribute('min'));
+        }
+        if (this.el.hasAttribute('max') && this.el.getAttribute('max')) {
+            pickerOptions.maxDate = new Date(this.el.getAttribute('max'));
+        }
+        if (!this.el.required && !pickerOptions.buttons) {
+            pickerOptions.buttons = ['clear'];
+        }
+        pickerOptions.onSelect = ({ date }) => {
+            if (multiple && Array.isArray(date) && date.length === 1)
+                return;
+            this.el.dispatchEvent(new Event('input', { bubbles: true }));
+            this.el.dispatchEvent(new Event('change', { bubbles: true }));
+        };
+        this.picker = new AirDatepicker(this.el, pickerOptions);
+        document.addEventListener('click', this._handleOutsideClick);
+    }
+}

package/components/air-datepicker/air-datepicker.ts

@@ -0,0 +1,192 @@
+import type AirDatepickerCtor from 'air-datepicker';
+import type { AirDatepickerOptions } from 'air-datepicker';
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+import { loadPeer } from '../../src/peer-loader';
+
+export interface AirDatepickerFieldOptions extends BaseOptions {
+  locale?: unknown;
+}
+
+const _defaults: AirDatepickerFieldOptions = {};
+let activeAirDatepickerField: AirDatepickerField | undefined;
+
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/Date.ts
+// Enhances `<input type="text" data-type="date" data-date-picker="air-datepicker">`
+// with the air-datepicker calendar/range picker - deliberately separate from
+// kmaterialize's own native `components/datepicker/` (a different, already
+// existing class-based component); this one is opted into per-input via the
+// `data-date-picker` attribute so it never collides with `.datepicker`
+// elements. The `multiple` attribute switches the picker into range mode,
+// `data-date-format`/`data-date-lang` (only "fr-FR" ported so far) mirror
+// CrazyPHP's own dataset convention.
+//
+// air-datepicker is an optional peerDependency, loaded on demand via
+// peer-loader. Its own base stylesheet (air-datepicker/air-datepicker.css)
+// must be imported separately by the consumer - see the docs page.
+export class AirDatepickerField extends Component<AirDatepickerFieldOptions> {
+  declare el: HTMLInputElement;
+  picker: AirDatepickerCtor | undefined;
+  ready: Promise<void>;
+  private _triggers: HTMLElement[];
+  private _handleOutsideClick = (e: MouseEvent) => {
+    const calendarEl = document.querySelector('.air-datepicker');
+    const clickedTrigger = this._triggers.some(trigger => trigger.contains(e.target as Node));
+    if (
+      calendarEl instanceof HTMLElement &&
+      !calendarEl.contains(e.target as Node) &&
+      !this.el.contains(e.target as Node) &&
+      !clickedTrigger
+    ) {
+      this.picker?.hide();
+    }
+  };
+
+  constructor(el: HTMLInputElement, options: Partial<AirDatepickerFieldOptions>) {
+    super(el, options, AirDatepickerField);
+    (this.el as any).M_AirDatepickerField = this;
+
+    this.options = {
+      ...AirDatepickerField.defaults,
+      ...options
+    };
+
+    const labels = Array.from(document.querySelectorAll('label')).filter(
+      label => label.htmlFor === this.el.id
+    );
+    const icons = Array.from(
+      this.el.parentElement?.querySelectorAll<HTMLElement>('.prefix, .suffix') ?? []
+    );
+    this._triggers = [...labels, ...icons];
+    this._triggers.forEach(trigger => trigger.addEventListener('click', this._handleTriggerClick));
+    this.ready = this._setup();
+  }
+
+  static get defaults(): AirDatepickerFieldOptions {
+    return _defaults;
+  }
+
+  static init(el: HTMLInputElement, options?: Partial<AirDatepickerFieldOptions>): AirDatepickerField;
+  static init(
+    els: InitElements<HTMLInputElement | MElement>,
+    options?: Partial<AirDatepickerFieldOptions>
+  ): AirDatepickerField[];
+  static init(
+    els: HTMLInputElement | InitElements<HTMLInputElement | MElement>,
+    options: Partial<AirDatepickerFieldOptions> = {}
+  ): AirDatepickerField | AirDatepickerField[] {
+    return super.init(els, options, AirDatepickerField);
+  }
+
+  static getInstance(el: HTMLInputElement): AirDatepickerField {
+    return (el as any).M_AirDatepickerField;
+  }
+
+  destroy() {
+    document.removeEventListener('click', this._handleOutsideClick);
+    this._triggers.forEach(trigger => trigger.removeEventListener('click', this._handleTriggerClick));
+    this.picker?.destroy();
+    if (activeAirDatepickerField === this) activeAirDatepickerField = undefined;
+    (this.el as any).M_AirDatepickerField = undefined;
+  }
+
+  private _handleTriggerClick = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    void this.ready.then(() => this.picker?.show());
+  };
+
+  async _setup(): Promise<void> {
+    const AirDatepicker = await loadPeer<typeof AirDatepickerCtor>(
+      {
+        specifier: 'air-datepicker',
+        globalName: 'AirDatepicker',
+        feature: 'Date input (air-datepicker) enhancement',
+        cdnHint:
+          '<link rel="stylesheet" href="path/to/air-datepicker.css">\n' +
+          '    <script src="path/to/air-datepicker.js"></script>\n' +
+          '    (self-hosted - copy from node_modules/air-datepicker/, or a CDN of your choice)'
+      },
+      () => import('air-datepicker')
+    );
+
+    const dataset = this.el.dataset;
+    const builtInLocale = dataset.dateLang === 'fr-FR'
+      ? (await import('air-datepicker/locale/fr.js')).default
+      : (await import('air-datepicker/locale/en.js')).default;
+    const pickerOptions: AirDatepickerOptions = {
+      dateFormat: dataset.dateFormat || 'yyyy-MM-dd',
+      autoClose: dataset.dateAutoClose !== 'false',
+      locale: (this.options.locale ?? builtInLocale) as AirDatepickerOptions['locale'],
+      onShow: isAnimationComplete => {
+        if (isAnimationComplete) return;
+        if (activeAirDatepickerField && activeAirDatepickerField !== this) {
+          activeAirDatepickerField.picker?.hide();
+        }
+        activeAirDatepickerField = this;
+      },
+      onHide: isAnimationComplete => {
+        if (isAnimationComplete && activeAirDatepickerField === this) {
+          activeAirDatepickerField = undefined;
+        }
+      }
+    };
+
+    let multiple = false;
+    if (this.el.multiple || dataset.dateRange === 'true') {
+      pickerOptions.range = true;
+      pickerOptions.multipleDatesSeparator = ' - ';
+      multiple = true;
+    }
+
+    const initialValue = this.el.getAttribute('value')?.trim();
+    if (initialValue) {
+      pickerOptions.selectedDates = multiple
+        ? initialValue.split(' - ').map(value => value.trim())
+        : [initialValue];
+    }
+
+    if (dataset.dateTimepicker === 'true') {
+      pickerOptions.timepicker = true;
+      if (dataset.dateTimeFormat) pickerOptions.timeFormat = dataset.dateTimeFormat;
+    }
+
+    const supportedViews = ['days', 'months', 'years'];
+    if (supportedViews.includes(dataset.dateView ?? '')) {
+      pickerOptions.view = dataset.dateView as AirDatepickerOptions['view'];
+    }
+    if (supportedViews.includes(dataset.dateMinView ?? '')) {
+      pickerOptions.minView = dataset.dateMinView as AirDatepickerOptions['minView'];
+    }
+
+    if (dataset.dateMobile === 'true') pickerOptions.isMobile = true;
+    if (dataset.datePosition) {
+      pickerOptions.position = dataset.datePosition as AirDatepickerOptions['position'];
+    }
+    if (dataset.dateButtons) {
+      const supportedButtons = ['today', 'clear'];
+      pickerOptions.buttons = dataset.dateButtons
+        .split(',')
+        .map(button => button.trim())
+        .filter(button => supportedButtons.includes(button)) as AirDatepickerOptions['buttons'];
+    }
+
+    if (this.el.hasAttribute('min') && this.el.getAttribute('min')) {
+      pickerOptions.minDate = new Date(this.el.getAttribute('min') as string);
+    }
+    if (this.el.hasAttribute('max') && this.el.getAttribute('max')) {
+      pickerOptions.maxDate = new Date(this.el.getAttribute('max') as string);
+    }
+    if (!this.el.required && !pickerOptions.buttons) {
+      pickerOptions.buttons = ['clear'];
+    }
+
+    pickerOptions.onSelect = ({ date }: any) => {
+      if (multiple && Array.isArray(date) && date.length === 1) return;
+      this.el.dispatchEvent(new Event('input', { bubbles: true }));
+      this.el.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+
+    this.picker = new AirDatepicker(this.el, pickerOptions);
+    document.addEventListener('click', this._handleOutsideClick);
+  }
+}

package/components/alert/_alerts.scss

@@ -0,0 +1,130 @@
+// Alert banners provide persistent, contextual feedback in a page.
+.alert {
+  --alert-container: var(--md-sys-color-surface-variant);
+  --alert-on-container: var(--md-sys-color-on-surface-variant);
+  --alert-border: var(--md-sys-color-outline-variant);
+
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.875rem;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 1rem 1.125rem;
+  margin: 0 0 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.75rem;
+  background: var(--alert-container);
+  color: var(--alert-on-container);
+  line-height: 1.5;
+
+  .alert-icon {
+    flex: 0 0 auto;
+    align-self: center;
+    margin-top: 0;
+    font-size: 1.375rem;
+    line-height: 1;
+  }
+
+  .alert-image {
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  .alert-content {
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  .alert-title {
+    display: block;
+    margin: 0 0 0.25rem;
+    font-weight: 600;
+  }
+
+  .alert-message {
+    margin: 0;
+  }
+
+  .alert-close {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin: -0.25rem -0.375rem -0.25rem 0;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+      background: color-mix(in srgb, currentColor 12%, transparent);
+    }
+
+    .material-icons {
+      font-size: 1.25rem;
+    }
+  }
+
+  &.alert-info {
+    --alert-container: var(--md-sys-color-secondary-container);
+    --alert-on-container: var(--md-sys-color-on-secondary-container);
+    --alert-border: var(--md-sys-color-secondary);
+  }
+
+  &.alert-success {
+    --alert-container: var(--md-sys-color-tertiary-container);
+    --alert-on-container: var(--md-sys-color-on-tertiary-container);
+    --alert-border: var(--md-sys-color-tertiary);
+  }
+
+  &.alert-warning {
+    --alert-container: var(--md-sys-color-primary-container);
+    --alert-on-container: var(--md-sys-color-on-primary-container);
+    --alert-border: var(--md-sys-color-primary);
+  }
+
+  &.alert-error {
+    --alert-container: var(--md-sys-color-error-container);
+    --alert-on-container: var(--md-sys-color-on-error-container);
+    --alert-border: var(--md-sys-color-error);
+  }
+
+  &.alert-outlined {
+    border-color: var(--alert-border);
+    background: transparent;
+  }
+
+  &.alert-filled {
+    border-color: var(--alert-border);
+    background: var(--alert-border);
+    color: var(--md-sys-color-on-primary);
+  }
+
+  &.alert-compact {
+    align-items: center;
+    padding-block: 0.625rem;
+  }
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .alert {
+    transition: opacity 180ms ease, transform 180ms ease;
+
+    &.alert-dismissing {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+  }
+}