@expressivecss/expressive 0.12.0 → 0.13.1

package/src/sass/components/forms/_input-fields.scss

@@ -177,7 +177,7 @@ $_not-label: ".supporting-text, .character-counter, .file-path, .caret, .prefix,
   // .character-counter, .file-path). So the documented markup names the side
   // explicitly with .prefix / .suffix, and those rules key on nothing else.
   > i:is(.prefix, .suffix, :first-of-type, :last-of-type, :last-child),
-  > :is(.prefix, .suffix) {
+  > :is(.prefix, .suffix):not(.icon-button) {
     position: absolute;
     top: 16px;
     display: flex;
@@ -200,7 +200,7 @@ $_not-label: ".supporting-text, .character-counter, .file-path, .caret, .prefix,
   > i.suffix,
   > i:last-of-type:not(:first-of-type),
   > i:last-child:not(:first-child):not(.prefix),
-  > .suffix {
+  > .suffix:not(.icon-button) {
     right: 12px;
     // Both icons inherited this from the floating-label rule until they were
     // excluded from it. .prefix restates it below; .suffix has to as well, or
@@ -208,6 +208,15 @@ $_not-label: ".supporting-text, .character-counter, .file-path, .caret, .prefix,
     pointer-events: none;
   }
 
+  // A trailing icon button is a control, so it keeps its 40dp target and its
+  // clicks. It centres on the same point as a 24dp trailing icon.
+  > .icon-button.suffix {
+    position: absolute;
+    top: 8px;
+    right: 4px;
+    z-index: 1;
+  }
+
   &:has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix, > .prefix) {
     > :is(input, textarea) {
       padding-left: 52px;
@@ -351,3 +360,125 @@ textarea {
     }
   }
 }
+
+// Password visibility toggle. A trailing .icon-button.password-toggle with
+// aria-pressed holds two icons: the first shows while the password is hidden,
+// the second once it is shown. The Forms behavior flips the input's type.
+.password-toggle {
+  > #{$icon}:last-child:not(:first-child) {
+    display: none;
+  }
+
+  &[aria-pressed="true"] {
+    > #{$icon}:first-child:not(:last-child) {
+      display: none;
+    }
+
+    > #{$icon}:last-child:not(:first-child) {
+      display: inline-block;
+    }
+  }
+}
+
+// One-time code. A single native input drawn as a row of cells, so paste,
+// autofill from autocomplete="one-time-code", undo and the caret all stay the
+// browser's. A monospace face makes every digit 1ch wide; letter-spacing
+// moves each one to the next cell, and the input is clipped after the last.
+//
+// Tokens:
+//   --md-comp-otp-length          6
+//   --md-comp-otp-cell-width      48px
+//   --md-comp-otp-cell-height     56px
+//   --md-comp-otp-gap             8px
+//   --md-comp-otp-cell-color      surface-container-highest
+//   --md-comp-otp-indicator-color on-surface-variant / focus: primary
+//
+// :not(.browser-default) matches the weight of the shared text-input rule
+// above, which would otherwise win on width, height and letter-spacing.
+input.otp:not(.browser-default) {
+  --md-comp-otp-length: 6;
+  --md-comp-otp-cell-width: 48px;
+  --md-comp-otp-cell-height: 56px;
+  --md-comp-otp-gap: 8px;
+  --md-comp-otp-cell-color: var(--md-sys-color-surface-container-highest);
+  --md-comp-otp-indicator-color: var(--md-sys-color-on-surface-variant);
+  // Derived, not for overriding: the distance between cell starts, the
+  // inset that centres a digit in its cell, and the box past the last cell
+  // that the caret needs and the clip hides.
+  --md-comp-otp-pitch: calc(var(--md-comp-otp-cell-width) + var(--md-comp-otp-gap));
+  --md-comp-otp-inset: calc((var(--md-comp-otp-cell-width) - 1ch) / 2);
+  --md-comp-otp-overhang: calc(var(--md-comp-otp-gap) + var(--md-comp-otp-inset) + 2px);
+
+  box-sizing: border-box;
+  display: block;
+  // Room for the caret after the last digit, clipped back to the cells; the
+  // negative margin gives the overhang back to the layout.
+  width: calc(var(--md-comp-otp-length) * var(--md-comp-otp-pitch) + var(--md-comp-otp-inset) + 2px);
+  height: var(--md-comp-otp-cell-height);
+  margin: 0 calc(var(--md-comp-otp-overhang) * -1) 0 0;
+  padding: 0 0 0 var(--md-comp-otp-inset);
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  box-shadow: none;
+  clip-path: inset(0 var(--md-comp-otp-overhang) 0 0);
+  // Digits read left to right in every script.
+  direction: ltr;
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 24px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: calc(var(--md-comp-otp-pitch) - 1ch);
+  color: var(--md-sys-color-on-surface);
+  caret-color: var(--md-sys-color-primary);
+  background-color: transparent;
+  background-image:
+    linear-gradient(
+      to right,
+      var(--md-comp-otp-indicator-color) var(--md-comp-otp-cell-width),
+      transparent 0
+    ),
+    linear-gradient(
+      to right,
+      var(--md-comp-otp-cell-color) var(--md-comp-otp-cell-width),
+      transparent 0
+    );
+  background-size:
+    var(--md-comp-otp-pitch) 1px,
+    var(--md-comp-otp-pitch) 100%;
+  background-position: left bottom, left top;
+  background-repeat: repeat-x;
+
+  &::placeholder {
+    color: var(--md-sys-color-on-surface-variant);
+    opacity: 1;
+  }
+
+  // Every cell's indicator turns primary and thickens while the code has
+  // focus; the clip would cut an outline, so this is the focus ring.
+  &:focus,
+  &:focus-visible {
+    --md-comp-otp-indicator-color: var(--md-sys-color-primary);
+
+    outline: 0;
+    background-size:
+      var(--md-comp-otp-pitch) 2px,
+      var(--md-comp-otp-pitch) 100%;
+  }
+
+  &.invalid,
+  &[aria-invalid="true"] {
+    --md-comp-otp-indicator-color: var(--md-sys-color-error);
+  }
+
+  &:disabled {
+    opacity: 0.38;
+  }
+
+  @media (forced-colors: active) {
+    --md-comp-otp-indicator-color: CanvasText;
+
+    &:focus {
+      --md-comp-otp-indicator-color: Highlight;
+    }
+  }
+}

package/src/sass/components/forms/_rating.scss

@@ -0,0 +1,165 @@
+@use "../../abstracts" as *;
+
+// Rating. Two forms share the star.
+//
+// Input: a <fieldset class="rating"> with a <legend> and one radio per star,
+// each in a <label> whose visually hidden text ("3 stars") comes before the
+// radio: a span after it is the older input + span radio, which hides the
+// input. The radio itself is drawn as the star, so arrow keys, form
+// submission and the group's name stay native. A star fills when it or a
+// later star is checked; hovering previews.
+//
+// Display: <span class="rating" role="img" aria-label="Rated 4.5 out of 5">
+// with --md-comp-rating-value. The stars fill to that value, halves included.
+//
+// Loaded after radio-buttons: the input rules match the radio rules' weight
+// and win on order.
+//
+// Tokens:
+//   --md-comp-rating-size         24px (display 20px)
+//   --md-comp-rating-color        tertiary
+//   --md-comp-rating-empty-color  outline-variant
+//   --md-comp-rating-value        0 (display)
+//   --md-comp-rating-max          5 (display)
+
+$_rating-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 17.27 6.18 3.73-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
+
+.rating {
+  --md-comp-rating-size: 24px;
+  --md-comp-rating-color: var(--md-sys-color-tertiary);
+  --md-comp-rating-empty-color: var(--md-sys-color-outline-variant);
+}
+
+fieldset.rating {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+
+  > legend {
+    margin-block-end: 4px;
+    padding: 0;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-medium");
+  }
+
+  > label {
+    display: inline-flex;
+    gap: 0;
+    min-height: 0;
+    padding: 4px;
+    border-radius: 50%;
+    cursor: pointer;
+
+    &:has(> input:focus-visible) {
+      @include focus-ring;
+    }
+
+    &:has(> input:disabled) {
+      opacity: 0.38;
+      cursor: default;
+    }
+  }
+
+  > label > [type="radio"] {
+    flex: none;
+    width: var(--md-comp-rating-size);
+    height: var(--md-comp-rating-size);
+    border: 0;
+    border-radius: 0;
+    background-color: var(--md-comp-rating-empty-color);
+    background-image: none;
+    box-shadow: none;
+    mask: $_rating-star center / 100% no-repeat;
+    outline: 0;
+    transition: background-color 0.15s ease-out;
+
+    // The base radio draws its dot in :checked, :hover and the disabled
+    // states, some at a higher weight; the star mask would show it.
+    &:checked,
+    &:hover,
+    &:disabled,
+    &:disabled:checked {
+      border: 0;
+      background-image: none;
+      box-shadow: none;
+    }
+  }
+
+  // Filled: the checked star and every star before it.
+  > label:has(> :checked) > [type="radio"],
+  > label:has(~ label > :checked) > [type="radio"] {
+    background-color: var(--md-comp-rating-color);
+  }
+
+  // Hovering previews the rating under the pointer. Both rules sit under the
+  // same :has() so the preview outranks the reset.
+  &:has(> label:hover) {
+    > label > [type="radio"] {
+      background-color: var(--md-comp-rating-empty-color);
+    }
+
+    > label:hover > [type="radio"],
+    > label:has(~ label:hover) > [type="radio"] {
+      background-color: color-mix(in oklab, var(--md-comp-rating-color) 70%, transparent);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    > label > [type="radio"] {
+      transition: none;
+    }
+  }
+}
+
+.rating:not(fieldset) {
+  --md-comp-rating-size: 20px;
+  --md-comp-rating-value: 0;
+  --md-comp-rating-max: 5;
+
+  display: inline-block;
+  width: calc(var(--md-comp-rating-size) * var(--md-comp-rating-max));
+  height: var(--md-comp-rating-size);
+  vertical-align: middle;
+  background: linear-gradient(
+    to right,
+    var(--md-comp-rating-color) calc(var(--md-comp-rating-value) / var(--md-comp-rating-max) * 100%),
+    var(--md-comp-rating-empty-color) 0
+  );
+  mask: $_rating-star left center / var(--md-comp-rating-size) repeat-x;
+
+  &:dir(rtl) {
+    background: linear-gradient(
+      to left,
+      var(--md-comp-rating-color) calc(var(--md-comp-rating-value) / var(--md-comp-rating-max) * 100%),
+      var(--md-comp-rating-empty-color) 0
+    );
+    mask-position: right center;
+  }
+}
+
+@media (forced-colors: active) {
+  fieldset.rating > label > [type="radio"],
+  .rating:not(fieldset) {
+    forced-color-adjust: none;
+  }
+
+  fieldset.rating > label > [type="radio"] {
+    background-color: GrayText;
+  }
+
+  fieldset.rating > label:has(> :checked) > [type="radio"],
+  fieldset.rating > label:has(~ label > :checked) > [type="radio"] {
+    background-color: Highlight;
+  }
+
+  .rating:not(fieldset) {
+    background: linear-gradient(
+      to right,
+      Highlight calc(var(--md-comp-rating-value) / var(--md-comp-rating-max) * 100%),
+      GrayText 0
+    );
+  }
+}

package/src/sass/tokens/_reference.scss

@@ -24,21 +24,9 @@
 // against #006495, the one source there is ground truth for - $md-source below
 // is a branding choice and is free to change without failing it.
 
-// The seed every generated ramp derives from. Chosen for a restaurant POS: the
-// error ramp is pinned at hue 27.7deg and both primary and tertiary (source
-// +62deg) derive from this, so the seed has to keep both clear of red. Warm
-// "appetising" hues (0-60deg) are disqualified outright - they put primary on
-// top of error, dEok 0.07-0.12 against ~0.28 here.
-//
-// Teal wins on *worst case* across both schemes rather than on either one
-// alone, which is the metric that matters: evening service runs dark mode in a
-// dim room, and that is where a confirm/void mix-up actually happens.
-//   light  primary40 vs error40  dEok 0.278
-//   dark   primary80 vs error80  dEok 0.212   <- best of the candidates
-//   light  tertiary40 vs error40 dEok 0.224
-// It also leaves green free for the "settled/paid" role a POS will want and
-// Material does not supply.
-$md-source: #006A79 !default;
+// Mist Iris is the default seed for the generated ramps. Primary, secondary,
+// tertiary and neutral colors derive from it; the error ramp stays fixed.
+$md-source: #c6a0f6 !default;
 
 // tone -> OKLCH lightness. Fitted against the reference ramps; see the test.
 $tones: (

package/src/sass/utilities/_index.scss

@@ -6,3 +6,5 @@
 @forward "spacing";          // .m-3, .pt-2, .px-4, ...
 @forward "visibility";       // .hide, .hide-on-med-and-down, .show-on-large, ...
 @forward "helpers";          // alignment, floats, truncate, responsive media
+@forward "scroll-area";      // native scrolling with themed scrollbars
+@forward "shapes";           // .shape-pebble, .shape-scallop-6, ... (masks)

package/src/sass/utilities/_scroll-area.scss

@@ -0,0 +1,35 @@
+@use "../abstracts" as *;
+
+// Keep scrolling native; use the current theme for scrollbar colors.
+.scroll-area {
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scroll-area-thumb-color, var(--md-sys-color-on-surface-variant)) var(--scroll-area-track-color, transparent);
+}
+
+// Older WebKit engines do not implement the standard scrollbar properties.
+@supports not (scrollbar-color: red blue) {
+  @media (forced-colors: none) {
+    .scroll-area::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    .scroll-area::-webkit-scrollbar-thumb {
+      background-color: var(--scroll-area-thumb-color, var(--md-sys-color-on-surface-variant));
+      border-radius: 999px;
+    }
+
+    .scroll-area::-webkit-scrollbar-track,
+    .scroll-area::-webkit-scrollbar-corner {
+      background-color: var(--scroll-area-track-color, transparent);
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  .scroll-area {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+}

package/src/sass/utilities/_shapes.scss

@@ -0,0 +1,164 @@
+@use "sass:list";
+@use "sass:math";
+@use "../abstracts" as *;
+
+// Shapes. `.shape-<name>` cuts any element to one of twenty rounded shapes:
+// an <img>, a <video>, a button, a card. The set follows M3 Expressive's
+// shape library; the names are ours.
+//
+//   <img class="shape-scallop-6" src="..." alt="...">
+//   <button class="icon-button filled shape-spark" aria-label="Favorite">
+//
+// Each shape is an SVG path in a 100-unit box, drawn as a mask. A mask scales
+// with the element and keeps the curves smooth at any size, which a
+// `clip-path: polygon()` only does with hundreds of points. The path stretches
+// to the element's box, so the shapes are drawn for a square one; images and
+// videos are made square and cropped with `object-fit: cover`.
+//
+// A mask also clips the element's outline, so a focused shape draws the ring
+// inside its own edge: the mask cuts the 2px gap and `::after` paints the 3px
+// band. `contain: paint` makes the element the band's containing block without
+// touching `position`, which a component (a halfway FAB) may already own. An
+// <img> has no `::after`, so a focusable image shows the gap alone.
+
+// Each shape is a polygon whose corners are cut by quadratic curves. The
+// corner takes `$round` of each edge next to it: 0 keeps the point, 0.5 runs
+// the curve from one edge's midpoint to the next, so a polygon rounded at 0.5
+// throughout is a smooth closed curve. `$round` is a list cycled over the
+// points, so a star can round its tips and valleys differently.
+
+// One decimal of a 100-unit box is a tenth of a percent - under half a pixel
+// on a 400px image.
+@function _n($v) {
+  @return math.div(math.round($v * 10), 10);
+}
+
+@function _xy($p) {
+  @return "#{_n(list.nth($p, 1))} #{_n(list.nth($p, 2))}";
+}
+
+@function _toward($p, $q, $t) {
+  @return (list.nth($p, 1) + (list.nth($q, 1) - list.nth($p, 1)) * $t)
+    (list.nth($p, 2) + (list.nth($q, 2) - list.nth($p, 2)) * $t);
+}
+
+// $count points on a circle round the box centre, clockwise from $start
+// (y points down, so -90deg is the top). $radii is cycled: (40 30) is a star,
+// (40 40 25) puts two points on every lobe of a clover. $sx and $sy stretch
+// the result before $turn rotates it.
+@function _polar($count, $radii, $start: -90deg, $sx: 1, $sy: 1, $turn: 0deg) {
+  $pts: ();
+  @for $i from 0 through $count - 1 {
+    $a: $start + math.div(360deg * $i, $count);
+    $r: list.nth($radii, $i % list.length($radii) + 1);
+    $x: $r * math.cos($a) * $sx;
+    $y: $r * math.sin($a) * $sy;
+    $pts: list.append(
+      $pts,
+      (50 + $x * math.cos($turn) - $y * math.sin($turn))
+        (50 + $x * math.sin($turn) + $y * math.cos($turn)),
+      comma
+    );
+  }
+  @return $pts;
+}
+
+@function _path($pts, $round) {
+  $n: list.length($pts);
+  $d: "";
+  $end: null;
+  @for $i from 1 through $n {
+    $p: list.nth($pts, $i);
+    $r: list.nth($round, ($i - 1) % list.length($round) + 1);
+    $move: "L";
+    @if $i == 1 { $move: "M"; }
+    @if $r == 0 {
+      $d: $d + $move + _xy($p);
+      $end: _xy($p);
+    } @else {
+      $prev: list.nth($pts, $n);
+      @if $i > 1 { $prev: list.nth($pts, $i - 1); }
+      $next: list.nth($pts, 1);
+      @if $i < $n { $next: list.nth($pts, $i + 1); }
+      $a: _xy(_toward($p, $prev, $r));
+      @if $a != $end { $d: $d + $move + $a; }
+      $end: _xy(_toward($p, $next, $r));
+      $d: $d + "Q" + _xy($p) + " " + $end;
+    }
+  }
+  @return $d + "Z";
+}
+
+@function _mask($pts, $round) {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='#{_path($pts, $round)}'/%3E%3C/svg%3E");
+}
+
+// name: (points, rounding). The M3 shape each one follows:
+//   pebble oval, bean pill, peak triangle, dart arrow, slice fan, kite diamond,
+//   cell clamshell, crest pentagon, facet gem, spark very sunny, seal sunny,
+//   scallop-N N-sided cookie, bloom-N N-leaf clover, spike burst, flare soft burst.
+$_shapes: (
+  pebble: (_polar(8, 65.5, -90deg, 1, 0.6, -45deg), 0.5),
+  bean: (_polar(4, 74.5, -45deg, 1, 0.78, -45deg), 0.5),
+  peak: ((50 -6, 108.6 95, -8.6 95), 0.22),
+  dart: ((50 -6, 107 99, 50 80, -7 99), (0.3 0.3 0.5 0.3)),
+  slice: ((0 0, 100 0, 100 100, 0 100), (0.16 0.84 0.16 0.16)),
+  kite: ((50 -6.2, 97.2 50, 50 106.2, 2.8 50), 0.22),
+  cell: ((22 11, 78 11, 104 50, 78 89, 22 89, -4 50), 0.3),
+  crest: (_polar(5, 53, -90deg), 0.22),
+  facet: (_polar(7, 53, -90deg), 0.3),
+  spark: (_polar(16, (52 38)), (0.3 0.5)),
+  seal: (_polar(16, (52 44)), (0.42 0.5)),
+  scallop-4: (_polar(8, (68 32), -45deg), 0.5),
+  scallop-6: (_polar(12, (53.9 44.1)), 0.5),
+  scallop-7: (_polar(14, (54.2 45.4)), 0.5),
+  scallop-9: (_polar(18, (53 46.2)), 0.5),
+  scallop-12: (_polar(24, (52 45.8)), 0.5),
+  bloom-4: (_polar(16, (54 57 54 38), -67.5deg), (0.5 0.5 0.5 0.25)),
+  bloom-8: (_polar(24, (51 51 40), -97.5deg), (0.5 0.5 0.3)),
+  spike: (_polar(24, (50 34)), 0),
+  flare: (_polar(20, (51.5 36.6)), (0.18 0.3)),
+);
+
+%shape {
+  contain: paint;
+  mask: var(--shape-mask) center / 100% 100% no-repeat;
+
+  &:is(img, video, canvas) {
+    aspect-ratio: 1;
+    height: auto;
+    object-fit: cover;
+  }
+
+  // The ring: the outline's 3px band and 2px gap, drawn inside the edge.
+  &:focus-visible {
+    mask:
+      var(--shape-mask) center / calc(100% - 10px) calc(100% - 10px) no-repeat,
+      var(--shape-mask) center / 100% 100% no-repeat,
+      var(--shape-mask) center / calc(100% - 6px) calc(100% - 6px) no-repeat;
+    mask-composite: add, exclude;
+  }
+
+  &:focus-visible::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: var(--md-sys-color-secondary);
+    pointer-events: none;
+    mask:
+      var(--shape-mask) center / 100% 100% no-repeat exclude,
+      var(--shape-mask) center / calc(100% - 6px) calc(100% - 6px) no-repeat;
+
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background-color: Highlight;
+    }
+  }
+}
+
+@each $name, $shape in $_shapes {
+  .shape-#{$name} {
+    @extend %shape;
+    --shape-mask: #{_mask(list.nth($shape, 1), list.nth($shape, 2))};
+  }
+}

package/dist/js/chunks/chunk-G3I5H2U3.mjs

@@ -1,7 +0,0 @@
-// src/ts/modular.ts
-var version = "0.12.0";
-
-export {
-  version
-};
-//# sourceMappingURL=chunk-G3I5H2U3.mjs.map

package/dist/js/chunks/chunk-G3I5H2U3.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/ts/modular.ts"],
-  "sourcesContent": ["export * from './components';\nexport { Dialogs } from './behaviors/dialogs';\nexport { BottomSheets } from './behaviors/bottomSheets';\nexport { SideSheets } from './behaviors/sideSheets';\nexport { Forms } from './behaviors/forms';\nexport { AutoInit } from './components/registry';\nexport type { AutoInitOptions } from './components/registry';\n\nexport const version = '0.12.0';\n\nexport type * from './components/autocomplete';\nexport type * from './components/appBar';\nexport type * from './components/buttons';\nexport type * from './components/buttonGroup';\nexport type * from './components/cards';\nexport type * from './components/expandingCard';\nexport type * from './components/carousel';\nexport type * from './components/characterCounter';\nexport type * from './components/chips';\nexport type * from './components/datepicker';\nexport type * from './components/menu';\nexport type * from './components/lightbox';\nexport type * from './components/slider';\nexport type * from './components/scrollspy';\nexport type * from './components/select';\nexport type * from './components/navigationRail';\nexport type * from './components/tabs';\nexport type * from './components/timepicker';\nexport type * from './components/snackbar';\nexport type * from './components/tooltip';\n"],
-  "mappings": ";AAQO,IAAM,UAAU;",
-  "names": []
-}

package/dist/js/chunks/chunk-HNFSMIBY.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/ts/components/registry.ts"],
-  "sourcesContent": ["import { InitElements, InitElement } from \"../core/component\";\nimport * as Components from \"./index\";\nimport { CARDS_SELECTOR, isCardReveal } from \"./cards\";\nimport { EXPANDING_CARD_SELECTOR } from \"./expandingCard\";\n\n/**\n * The components `AutoInit()` starts, in initialization order, with the\n * selector each one claims.\n *\n * This table is the single source of truth: the options type below and the\n * init calls in `AutoInit()` are both derived from it, so wiring up a new\n * auto-initialized component means adding one line here (plus its export in\n * ./index.ts) - not four hand-synchronized edits that fail silently when one\n * is forgotten.\n *\n * A component that should only ever be constructed explicitly (Snackbar,\n * CharacterCounter, Range, ...) simply stays out of this table.\n */\nexport const AUTO_INIT_COMPONENTS = {\n  AppBar: {\n    component: Components.AppBar,\n    selector:\n      \"header.medium, header.large, header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(.search-bar, .searchbar))\",\n  },\n  Autocomplete: {\n    component: Components.Autocomplete,\n    selector: \".autocomplete\",\n  },\n  ButtonGroup: {\n    component: Components.ButtonGroup,\n    selector: \".button-group\",\n  },\n  // Shared with Cards.Init() - see CARDS_SELECTOR. This entry used to read\n  // '.cards', which no card markup uses.\n  Cards: { component: Components.Cards, selector: CARDS_SELECTOR, filter: isCardReveal },\n  ExpandingCard: {\n    component: Components.ExpandingCard,\n    selector: EXPANDING_CARD_SELECTOR,\n  },\n  Carousel: { component: Components.Carousel, selector: \".carousel\" },\n  Chips: { component: Components.Chips, selector: \".chips\" },\n  Datepicker: {\n    component: Components.Datepicker,\n    selector: \".datepicker, .date-picker\",\n  },\n  Menu: { component: Components.Menu, selector: \".menu-trigger\" },\n  Lightbox: { component: Components.Lightbox, selector: \".lightboxed\" },\n  ScrollSpy: { component: Components.ScrollSpy, selector: \".scrollspy\" },\n  FormSelect: { component: Components.FormSelect, selector: \"select\" },\n  NavigationRail: {\n    component: Components.NavigationRail,\n    selector: \".navigation-rail\",\n  },\n  Tabs: { component: Components.Tabs, selector: \".tabs\" },\n  Timepicker: {\n    component: Components.Timepicker,\n    selector: \".timepicker, .time-picker\",\n  },\n  Tooltip: { component: Components.Tooltip, selector: \".tooltipped\" },\n  FloatingActionButton: {\n    component: Components.FloatingActionButton,\n    selector: \".fab-menu\",\n  },\n};\n\ntype Registry = typeof AUTO_INIT_COMPONENTS;\n\n/**\n * Per-component options accepted by {@link AutoInit}, derived from the table\n * above - each key takes that component's own options type.\n */\nexport type AutoInitOptions = {\n  [K in keyof Registry]?: Partial<\n    InstanceType<Registry[K][\"component\"]>[\"options\"]\n  >;\n};\n\n/** The shape every entry in the table satisfies; see the cast in AutoInit. */\ntype AutoInitable = {\n  init(els: InitElement | InitElements<InitElement>, options: Partial<object>): unknown;\n};\n\ntype AutoInitEntry = {\n  component: AutoInitable;\n  selector: string;\n  filter?: (el: Element) => boolean;\n};\n\n/**\n * Automatically initialize components.\n * @param context Root element to initialize. Defaults to `document.body`.\n * @param options Options for each component.\n */\nexport function AutoInit(\n  context: HTMLElement = document.body,\n  options?: Partial<AutoInitOptions>,\n) {\n  for (const name of Object.keys(AUTO_INIT_COMPONENTS) as (keyof Registry)[]) {\n    const { component, selector, filter } = AUTO_INIT_COMPONENTS[\n      name\n    ] as unknown as AutoInitEntry;\n    // `:is()` so that `:not(.no-autoinit)` applies to the whole selector. A\n    // bare `${selector}:not(...)` binds the negation to the last alternative\n    // only, which would silently break the opt-out for any comma-separated\n    // entry (Cards is the first).\n    const els = context.querySelectorAll(`:is(${selector}):not(.no-autoinit)`);\n    // Each component's static `init` is overloaded; indexing the table widens\n    // it to a union TypeScript cannot call, so narrow it once, here.\n    if (filter) {\n      els.forEach((el) => {\n        if (filter(el)) component.init(el, options?.[name] ?? {});\n      });\n    } else {\n      component.init(els, options?.[name] ?? {});\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBO,IAAM,uBAAuB;AAAA,EAClC,QAAQ;AAAA,IACN,WAAsB;AAAA,IACtB,UACE;AAAA,EACJ;AAAA,EACA,cAAc;AAAA,IACZ,WAAsB;AAAA,IACtB,UAAU;AAAA,EACZ;AAAA,EACA,aAAa;AAAA,IACX,WAAsB;AAAA,IACtB,UAAU;AAAA,EACZ;AAAA;AAAA;AAAA,EAGA,OAAO,EAAE,WAAsB,OAAO,UAAU,gBAAgB,QAAQ,aAAa;AAAA,EACrF,eAAe;AAAA,IACb,WAAsB;AAAA,IACtB,UAAU;AAAA,EACZ;AAAA,EACA,UAAU,EAAE,WAAsB,UAAU,UAAU,YAAY;AAAA,EAClE,OAAO,EAAE,WAAsB,OAAO,UAAU,SAAS;AAAA,EACzD,YAAY;AAAA,IACV,WAAsB;AAAA,IACtB,UAAU;AAAA,EACZ;AAAA,EACA,MAAM,EAAE,WAAsB,MAAM,UAAU,gBAAgB;AAAA,EAC9D,UAAU,EAAE,WAAsB,UAAU,UAAU,cAAc;AAAA,EACpE,WAAW,EAAE,WAAsB,WAAW,UAAU,aAAa;AAAA,EACrE,YAAY,EAAE,WAAsB,YAAY,UAAU,SAAS;AAAA,EACnE,gBAAgB;AAAA,IACd,WAAsB;AAAA,IACtB,UAAU;AAAA,EACZ;AAAA,EACA,MAAM,EAAE,WAAsB,MAAM,UAAU,QAAQ;AAAA,EACtD,YAAY;AAAA,IACV,WAAsB;AAAA,IACtB,UAAU;AAAA,EACZ;AAAA,EACA,SAAS,EAAE,WAAsB,SAAS,UAAU,cAAc;AAAA,EAClE,sBAAsB;AAAA,IACpB,WAAsB;AAAA,IACtB,UAAU;AAAA,EACZ;AACF;AA8BO,SAAS,SACd,UAAuB,SAAS,MAChC,SACA;AACA,aAAW,QAAQ,OAAO,KAAK,oBAAoB,GAAyB;AAC1E,UAAM,EAAE,WAAW,UAAU,OAAO,IAAI,qBACtC,IACF;AAKA,UAAM,MAAM,QAAQ,iBAAiB,OAAO,QAAQ,qBAAqB;AAGzE,QAAI,QAAQ;AACV,UAAI,QAAQ,CAAC,OAAO;AAClB,YAAI,OAAO,EAAE,EAAG,WAAU,KAAK,IAAI,UAAU,IAAI,KAAK,CAAC,CAAC;AAAA,MAC1D,CAAC;AAAA,IACH,OAAO;AACL,gBAAU,KAAK,KAAK,UAAU,IAAI,KAAK,CAAC,CAAC;AAAA,IAC3C;AAAA,EACF;AACF;",
-  "names": []
-}