kmaterialize 2.3.3-1.0.25 → 2.3.3-1.0.27

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

@@ -111,8 +111,8 @@ export class AirDatepickerField extends Component<AirDatepickerFieldOptions> {
 
     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;
+      ? (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',

package/components/appbar/navbar-content.scss

@@ -0,0 +1,317 @@
+/* App-bar content geometry and surface variants. */
+.navbar .nav-icon-img {
+  display: block;
+  height: 24px;
+  width: 24px;
+  object-fit: contain;
+}
+
+.navbar .navbar-search-toolbar {
+  width: auto;
+  margin: 0 0 0 auto;
+  padding: 4px;
+  overflow: visible;
+}
+
+/* Inset surfaces retain their height at desktop and mobile sizes. */
+.navbar.appbar-bordered.navbar-rounded:not(.nav-extended):not(.navbar-wrap) {
+  box-sizing: border-box;
+  height: 64px;
+  margin: 8px 0;
+  padding: 4px;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.navbar.appbar-bordered.navbar-rounded:not(.nav-extended):not(.navbar-wrap) > .nav-wrapper {
+  box-sizing: border-box;
+  flex: 0 0 56px;
+  height: 56px;
+  border-radius: 11px;
+  transform: none;
+}
+
+.navbar.appbar-bordered.navbar-full {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+}
+
+/* Dropdown triggers: keep the label and arrow in one predictable hit
+   target instead of inheriting the legacy floated-icon offsets. */
+.navbar.appbar-bordered .dropdown-trigger {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: max-content !important;
+  max-width: none;
+  height: 40px;
+  min-height: 40px;
+  padding: 0 14px 0 16px;
+  line-height: 1;
+}
+
+.navbar.appbar-bordered .dropdown-trigger > .material-icons {
+  display: inline-block !important;
+  position: static !important;
+  float: none !important;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  line-height: 20px;
+  transition: transform 160ms ease;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li:has(> .dropdown-trigger) {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li:has(> .dropdown-trigger) > .dropdown-trigger {
+  flex: 0 0 auto;
+  align-self: center;
+  margin: 0;
+}
+
+.navbar.appbar-bordered .dropdown-trigger[aria-expanded="true"] > .material-icons.right {
+  transform: rotate(180deg);
+}
+
+/* Icon links: center standalone icons inside their 40px hit targets. */
+.navbar.appbar-bordered .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons:only-child) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 40px;
+  width: 40px;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons:only-child) {
+  display: inline-grid !important;
+  place-items: center;
+  box-sizing: border-box;
+  width: 40px !important;
+  height: 40px;
+  min-height: 40px;
+  padding: 0 !important;
+  line-height: 1;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons:only-child {
+  display: block !important;
+  position: static !important;
+  float: none !important;
+  width: 24px;
+  height: 24px;
+  margin: 0 !important;
+  line-height: 24px;
+  text-align: center;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons.left),
+.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger):has(> .material-icons.right) {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+  width: max-content !important;
+  min-width: 0;
+  height: 40px;
+  min-height: 40px;
+  padding: 0 12px !important;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.left,
+.navbar.appbar-bordered .nav-wrapper > ul > li > a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.right {
+  display: block !important;
+  position: static !important;
+  float: none !important;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  margin: 0 !important;
+  line-height: 24px;
+  text-align: center;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.left),
+.navbar.appbar-bordered .nav-wrapper > ul > li:has(> a:not(.btn):not(.btn-large):not(.btn-floating):not(.dropdown-trigger) > .material-icons.right) {
+  flex: 0 0 auto;
+  width: max-content;
+  height: 40px;
+}
+
+/* Button rows: normalize the item row and prevent text-plus-icon buttons
+   from being mistaken for standalone icon buttons. */
+.navbar.appbar-bordered .nav-wrapper > ul > li:has(> :is(.btn, .btn-large)) {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  height: 48px;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn,
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn-large {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: max-content !important;
+  min-width: 104px;
+  height: 40px;
+  min-height: 40px;
+  margin: 0 !important;
+  padding: 0 20px !important;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn-large {
+  min-width: 144px;
+  height: 48px;
+  min-height: 48px;
+  padding-inline: 24px !important;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn:has(> .material-icons),
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn-large:has(> .material-icons) {
+  gap: 8px;
+}
+
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn > .material-icons,
+.navbar.appbar-bordered .nav-wrapper > ul > li > a.btn-large > .material-icons {
+  display: block !important;
+  position: static !important;
+  float: none !important;
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+  margin: 0 !important;
+  line-height: 20px;
+}
+
+/* Extended navbar tabs: use the navbar's readable foreground instead of the
+   low-contrast primary token inherited by transparent tabs. */
+.navbar.appbar-bordered .nav-content,
+.navbar.appbar-bordered .nav-content .tabs {
+  background: var(--md-sys-color-surface-variant);
+}
+
+.navbar.appbar-bordered .nav-content .tabs > .tab > a {
+  color: var(--md-sys-color-on-surface) !important;
+  opacity: 0.92;
+}
+
+.navbar.appbar-bordered .nav-content .tabs > .tab > a.active {
+  color: var(--md-sys-color-on-surface) !important;
+  opacity: 1;
+  font-weight: 600;
+}
+
+.navbar.appbar-bordered .nav-content .tabs > .tab.disabled > a {
+  color: var(--md-sys-color-on-surface) !important;
+  opacity: 0.5;
+}
+
+.navbar.appbar-bordered .nav-content .tabs > .indicator {
+  background-color: var(--md-sys-color-on-surface) !important;
+}
+
+.navbar.appbar-bordered .sidenav-trigger {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 40px;
+  width: 40px;
+  height: 40px;
+  min-height: 40px;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  color: var(--md-sys-color-on-surface) !important;
+}
+
+.navbar.appbar-bordered .sidenav-trigger > .material-icons {
+  display: block !important;
+  position: static !important;
+  float: none !important;
+  width: 24px;
+  height: 24px;
+  margin: 0 !important;
+  line-height: 24px;
+  text-align: center;
+}
+
+.navbar.appbar-bordered.navbar-wrap > .nav-wrapper {
+  flex-wrap: wrap;
+  height: auto;
+  min-height: 56px;
+  padding-bottom: 8px;
+  overflow: visible;
+  row-gap: 8px;
+}
+
+.navbar.appbar-bordered.navbar-wrap {
+  height: auto;
+  min-height: 56px;
+}
+
+.navbar.appbar-bordered.navbar-wrap > .nav-wrapper > ul:not(.dropdown-content) {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  flex: 1 1 100%;
+  padding-left: 0;
+  height: auto !important;
+  flex-wrap: wrap;
+  white-space: normal;
+}
+
+.navbar.appbar-bordered.navbar-wrap > .nav-wrapper > ul:not(.dropdown-content) > li {
+  height: auto !important;
+}
+
+.navbar.appbar-bordered ul:not(.dropdown-content) > li > a {
+  white-space: nowrap;
+}
+
+.navbar.appbar-bordered:not(.navbar-wrap) .nav-wrapper > ul.ml-auto:not(.nav-actions):not(.dropdown-content) {
+  flex: 0 0 auto;
+  width: max-content;
+  max-width: none;
+}
+
+/* Separators used as list items need an explicit display/height; otherwise
+   navbar item rules can collapse the one-pixel divider. */
+.navbar.appbar-bordered .nav-actions > li.nav-separator {
+  display: block !important;
+  flex: 0 0 1px;
+  width: 1px;
+  height: 24px;
+  margin: 0 4px;
+  padding: 0;
+  background: var(--md-sys-color-on-surface-variant);
+  opacity: 0.7;
+  border: 0;
+  visibility: visible !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .navbar.appbar-bordered .dropdown-trigger > .material-icons { transition: none; }
+}

package/components/appbar/navbar-scroll.scss

@@ -0,0 +1,101 @@
+/* Crowded navigation options. Scroll keeps one compact row; wrap grows the
+   bar vertically and preserves every item without clipping. */
+.navbar.appbar-bordered.navbar-scroll > .nav-wrapper {
+  position: relative;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.navbar.appbar-bordered.navbar-scroll > .nav-wrapper > ul:not(.dropdown-content) {
+  flex: 0 0 auto;
+  width: max-content;
+  min-width: max-content;
+}
+
+.navbar.appbar-bordered.navbar-scroll {
+  position: relative;
+  isolation: isolate;
+}
+
+.navbar.appbar-bordered.navbar-scroll > .nav-wrapper {
+  position: relative;
+  z-index: 0;
+}
+
+.navbar.appbar-bordered.navbar-scroll::after {
+  content: '';
+  position: absolute;
+  z-index: 20;
+  right: 0;
+  top: 0;
+  width: 15px;
+  height: 100%;
+  pointer-events: none;
+  opacity: var(--scroll-right-fade, 1) !important;
+  background: linear-gradient(
+    to right,
+    transparent,
+    var(--md-sys-color-surface-variant)
+  );
+  transition: opacity 160ms ease;
+}
+
+.navbar.appbar-bordered.navbar-scroll::before {
+  content: '';
+  position: absolute;
+  z-index: 20;
+  left: 0;
+  top: 0;
+  width: 15px;
+  height: 100%;
+  pointer-events: none;
+  opacity: var(--scroll-left-fade, 1) !important;
+  background: linear-gradient(
+    to left,
+    transparent,
+    var(--md-sys-color-surface-variant)
+  );
+  transition: opacity 160ms ease;
+}
+
+.navbar.appbar-bordered.navbar-scroll:not(.is-scroll-end)::after {
+  opacity: var(--scroll-right-fade, 0) !important;
+}
+
+.navbar.appbar-bordered.navbar-scroll.is-scroll-start::before {
+  opacity: 0;
+}
+
+.navbar.appbar-bordered.navbar-scroll:not(.is-scroll-start)::before {
+  opacity: var(--scroll-left-fade, 0) !important;
+}
+
+/* Fixed edge masks. These are real children of the navbar (not descendants
+   of the scrolling row), so they cannot move with the links. */
+.navbar.appbar-bordered.navbar-scroll > .navbar-scroll-fade {
+  display: block;
+  position: absolute;
+  z-index: 1000;
+  top: 0;
+  width: 28px;
+  height: 100%;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 160ms ease;
+}
+
+.navbar.appbar-bordered.navbar-scroll > .navbar-scroll-fade-left {
+  left: 0;
+  background: linear-gradient(to left, transparent, var(--md-sys-color-surface-variant));
+}
+
+.navbar.appbar-bordered.navbar-scroll > .navbar-scroll-fade-right {
+  right: 0;
+  background: linear-gradient(to right, transparent, var(--md-sys-color-surface-variant));
+}
+
+.navbar.appbar-bordered.navbar-scroll > .navbar-scroll-fade.is-hidden {
+  opacity: 0;
+}

package/components/appbar/navbar-scroll.ts

@@ -0,0 +1,67 @@
+const instances = new WeakMap<HTMLElement, () => void>();
+
+/** Initialize navbar overflow fades. Returns cleanup; safe to reinitialize. */
+export function initNavbarScroll(navbar: HTMLElement): () => void {
+  instances.get(navbar)?.();
+  const row = navbar.querySelector<HTMLElement>(':scope > .nav-wrapper');
+  if (!row) return () => {};
+  const left = document.createElement('span');
+  const right = document.createElement('span');
+  left.className = 'navbar-scroll-fade navbar-scroll-fade-left';
+  right.className = 'navbar-scroll-fade navbar-scroll-fade-right';
+  left.setAttribute('aria-hidden', 'true');
+  right.setAttribute('aria-hidden', 'true');
+  navbar.append(left, right);
+  const previous = ['--scroll-left-fade', '--scroll-right-fade'].map(name => ({
+    name, value: navbar.style.getPropertyValue(name), priority: navbar.style.getPropertyPriority(name)
+  }));
+  const start = navbar.classList.contains('is-scroll-start');
+  const end = navbar.classList.contains('is-scroll-end');
+  let disposed = false;
+  const update = () => {
+    if (disposed) return;
+    const max = Math.max(0, row.scrollWidth - row.clientWidth);
+    const rtl = getComputedStyle(row).direction === 'rtl';
+    const offset = Math.min(max, Math.max(0, rtl ? -row.scrollLeft : row.scrollLeft));
+    const atLeft = max <= 1 || (rtl ? offset >= max - 1 : offset <= 1);
+    const atRight = max <= 1 || (rtl ? offset <= 1 : offset >= max - 1);
+    navbar.classList.toggle('is-scroll-start', atLeft);
+    navbar.classList.toggle('is-scroll-end', atRight);
+    navbar.style.setProperty('--scroll-left-fade', atLeft ? '0' : '1');
+    navbar.style.setProperty('--scroll-right-fade', atRight ? '0' : '1');
+    left.classList.toggle('is-hidden', atLeft);
+    right.classList.toggle('is-hidden', atRight);
+  };
+  const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(update);
+  const observeSizes = () => {
+    resize?.disconnect();
+    resize?.observe(row);
+    Array.from(row.children).forEach(child => resize?.observe(child));
+    update();
+  };
+  const mutation = new MutationObserver(observeSizes);
+  mutation.observe(row, { childList: true, subtree: true, characterData: true });
+  row.addEventListener('scroll', update, { passive: true });
+  window.addEventListener('resize', update);
+  document.fonts?.ready.then(update);
+  observeSizes();
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    row.removeEventListener('scroll', update);
+    window.removeEventListener('resize', update);
+    resize?.disconnect();
+    mutation.disconnect();
+    left.remove();
+    right.remove();
+    navbar.classList.toggle('is-scroll-start', start);
+    navbar.classList.toggle('is-scroll-end', end);
+    previous.forEach(({ name, value, priority }) => {
+      if (value) navbar.style.setProperty(name, value, priority);
+      else navbar.style.removeProperty(name);
+    });
+    if (instances.get(navbar) === dispose) instances.delete(navbar);
+  };
+  instances.set(navbar, dispose);
+  return dispose;
+}

package/components/dropdown/_dropdown.scss

@@ -16,6 +16,7 @@
   display: none;
   min-width: 100px;
   border-radius: 12px;
+  border: 1px solid var(--md-sys-color-outline-variant);
   overflow-y: auto;
   overflow-x: hidden;
   opacity: 0;
@@ -42,7 +43,7 @@
     }
     & > a, & > span {
       font-size: 16px;
-      color: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-surface);
       display: block;
       line-height: 22px;
       padding: (($dropdown-item-height - 22) * 0.5) 16px;
@@ -61,6 +62,11 @@
       width: 24px;
     }
   }
+  > li.disabled > a,
+  > li.disabled > span {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
   li:not(.disabled):hover, li.active {
     background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-on-surface) 8%);
   }

package/components/extensions/web/crazy-button.scss

@@ -4,6 +4,15 @@
   max-width: 100%;
   > .btn, > .btn-split > .btn { position: relative; }
   .btn > img { width: var(--button-icon); height: var(--button-icon); object-fit: contain; }
+  // Image-only buttons fill the control and follow its round or square shape.
+  .btn.btn-icon[part="button"] > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    flex-shrink: 0;
+    object-fit: cover;
+    border-radius: inherit;
+  }
   .btn > i { color: inherit; flex-shrink: 0; }
   slot { display: contents; }
   &[size="small"] .btn { --button-height: 30px; }

package/components/extensions/web/crazy-button.ts

@@ -9,6 +9,14 @@ const boolean = () => ({ type: 'boolean' as const, default: false, reflect: true
 const escape = (value: unknown) => String(value).replace(/[&<>"']/g, char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char]!);
 const sizes = { small: 'xs', normal: 'sm', large: 'md', 'extra-large': 'lg' };
 
+// Palette names from sass/_colors.scss take precedence over CSS named colors.
+const paletteColors = new Set([
+  'materialize-red', 'red', 'pink', 'purple', 'deep-purple', 'indigo',
+  'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime',
+  'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'blue-grey',
+  'grey', 'gold', 'black', 'white', 'transparent',
+]);
+
 /** RegularBtn's attribute API, backed by the renamed Crazycomponent2 runtime. */
 export default class CrazyButton extends Kmcomponent {
   static properties: KmcomponentProperties = {
@@ -123,7 +131,8 @@ export default class CrazyButton extends Kmcomponent {
       button.removeEventListener('click', click);
     });
     const trigger = this.querySelector<HTMLElement>('.dropdown-trigger');
-    const menu = document.getElementById(String(a['menu-target']));
+    const menuTarget = String(a['menu-target'] ?? '');
+    const menu = trigger && menuTarget ? document.getElementById(menuTarget) : null;
     if (trigger && menu && !a.disabled) {
       const parent = menu.parentNode;
       const next = menu.nextSibling;
@@ -146,8 +155,9 @@ export default class CrazyButton extends Kmcomponent {
   private restoreFocus = false;
 
   private applyColor(element: HTMLElement, color: string, foreground: boolean): void {
-    if (!color.trim() || this.getProperty('disabled')) return;
-    if (CSS.supports('color', color)) {
+    color = color.trim();
+    if (!color || this.getProperty('disabled')) return;
+    if (!paletteColors.has(color) && CSS.supports('color', color)) {
       element.style.setProperty(foreground ? 'color' : 'background-color', color);
       if (foreground) element.style.borderColor = color;
     } else {