@expressivecss/expressive 0.16.0 → 0.17.0

package/src/sass/components/_snackbar.scss

@@ -101,6 +101,13 @@ $_bar: ".snackbar";
   cursor: default;
   @include glass(var(--md-comp-snackbar-container-color));
 
+  // Forced colors paint the fill as Canvas and drop the shadow, so the
+  // surface would blend into the page without an edge.
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+
   @include bp-up("medium") {
     width: max-content;
     min-width: min(344px, 100%);
@@ -124,10 +131,7 @@ $_bar: ".snackbar";
   // Optional leading icon. M3 snackbars have no leading icon.
   > #{$icon}:first-child {
     flex: 0 0 auto;
-    font-size: rem(24px);
-    width: rem(24px);
-    height: rem(24px);
-    line-height: rem(24px);
+    @include icon-size(rem(24px));
     color: var(--md-comp-snackbar-icon-color);
   }
 
@@ -193,10 +197,7 @@ $_bar: ".snackbar";
     box-shadow: none;
 
     > #{$icon} {
-      font-size: rem(24px);
-      width: rem(24px);
-      height: rem(24px);
-      line-height: rem(24px);
+      @include icon-size(rem(24px));
     }
 
     &:hover {
@@ -265,8 +266,5 @@ $_bar: ".snackbar";
   }
 }
 
-// Transient messages are not part of the page. Important so a size or state rule that sets
-// `display` cannot bring it back; see base/_print.scss for the page itself.
-@media print {
-  #snackbar-container { display: none !important; }
-}
+// Transient messages are not part of the page.
+#snackbar-container { @include print-hidden; }

package/src/sass/components/_table_of_contents.scss

@@ -15,9 +15,7 @@
   --md-comp-toc-indicator: 2px;
   --md-comp-toc-item-height: 48px;
 
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  @include list-reset;
 
   &.fixed {
     position: fixed;

package/src/sass/components/_tabs.scss

@@ -41,9 +41,7 @@ $_tab: "> a";
   display: flex;
   position: relative;
   width: 100%;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  @include list-reset;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
@@ -51,10 +49,6 @@ $_tab: "> a";
   border-block-end: 1px solid var(--md-sys-color-outline-variant);
   scrollbar-width: none;
 
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
   #{$_tab} {
     box-sizing: border-box;
     position: relative;
@@ -80,10 +74,7 @@ $_tab: "> a";
 
     > #{$icon} {
       flex: 0 0 auto;
-      font-size: var(--md-comp-primary-tab-icon-size);
-      width: var(--md-comp-primary-tab-icon-size);
-      height: var(--md-comp-primary-tab-icon-size);
-      line-height: var(--md-comp-primary-tab-icon-size);
+      @include icon-size(var(--md-comp-primary-tab-icon-size));
       color: inherit;
     }
 
@@ -102,8 +93,7 @@ $_tab: "> a";
     // The tint alone is faint and vanishes under forced colors. Inset, so the
     // scrolling tab row does not clip it.
     &:focus-visible {
-      @include focus-ring;
-      outline-offset: -3px;
+      @include focus-ring(-3px);
     }
 
     &.active {
@@ -162,9 +152,7 @@ $_tab: "> a";
     background-color: var(--md-comp-primary-tab-active-indicator-color);
     border-radius: var(--md-comp-primary-tab-active-indicator-shape);
     pointer-events: none;
-    list-style: none;
-    padding: 0;
-    margin: 0;
+    @include list-reset;
     @include forced-colors-fill(Highlight);
   }
 }
@@ -229,10 +217,6 @@ $_tab: "> a";
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
 
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
   > * {
     flex: 0 0 100%;
     box-sizing: border-box;

package/src/sass/components/_timepicker.scss

@@ -292,8 +292,9 @@ input[type=text].timepicker-input-seconds {
     border: 1px solid var(--md-sys-color-outline);
   }
 
+  // The buttons share one edge: the start of PM, which is its right in RTL.
   .timepicker-container .pm-btn {
-    border-left: 0;
+    border-inline-start: 0;
   }
 
   .timepicker-plate {

package/src/sass/components/_toolbar.scss

@@ -115,10 +115,7 @@ $_vibrant: "#{$_toolbar}.vibrant";
 
     > #{$icon} {
       flex: 0 0 auto;
-      font-size: var(--md-comp-toolbar-icon-size);
-      width: var(--md-comp-toolbar-icon-size);
-      height: var(--md-comp-toolbar-icon-size);
-      line-height: var(--md-comp-toolbar-icon-size);
+      @include icon-size(var(--md-comp-toolbar-icon-size));
     }
 
     // The state layer is the content color in both color sets, which is

package/src/sass/components/_tooltip.scss

@@ -43,6 +43,13 @@
   pointer-events: auto;
   z-index: var(--expressive-z-tooltip);
   @include glass(var(--md-comp-plain-tooltip-container-color));
+
+  // Forced colors paint the fill as Canvas and drop the shadow, so the
+  // surface would blend into the page without an edge.
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
 }
 
 // CSS-only: a child of the activator. Default sits above (M3 preferred).
@@ -183,8 +190,5 @@ body > .tooltip,
   min-width: 0;
 }
 
-// Transient messages are not part of the page. Important so a size or state rule that sets
-// `display` cannot bring it back; see base/_print.scss for the page itself.
-@media print {
-  .tooltip { display: none !important; }
-}
+// Transient messages are not part of the page.
+.tooltip { @include print-hidden; }

package/src/sass/components/_tree.scss

@@ -29,12 +29,10 @@
   // Each level hangs a guide line from the centre of its parent's chevron
   // (12px inset + half the 20px chevron) and indents past it.
   ul {
-    margin: 0;
+    @include list-reset;
     margin-inline-start: 22px;
-    padding: 0;
     padding-inline-start: 6px;
     border-inline-start: 1px solid var(--md-comp-tree-guide-color);
-    list-style: none;
   }
 
   li {
@@ -69,10 +67,7 @@
   li > details > summary {
     cursor: pointer;
     @include focus-visible;
-
-    &:hover {
-      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
-    }
+    @include text-action;
   }
 
   li > details > summary {
@@ -86,6 +81,7 @@
     // Points to the end edge while closed and down once open.
     &::before {
       @include tree-chevron;
+      @include forced-colors-fill;
     }
 
     &:dir(rtl)::before {
@@ -112,15 +108,7 @@
     }
   }
 
-  @media (forced-colors: active) {
-    li > details > summary::before {
-      forced-color-adjust: none;
-      background-color: CanvasText;
-    }
-
-    [aria-current]:not([aria-current="false"]) {
-      outline: 2px solid Highlight;
-      outline-offset: -2px;
-    }
+  [aria-current]:not([aria-current="false"]) {
+    @include forced-colors-selected;
   }
 }

package/src/sass/components/_treemap-chart.scss

@@ -23,32 +23,10 @@
 //                                          on-secondary, surface, surface,
 //                                          surface; the text in each
 
-@include chart("treemap-chart");
+@include chart("treemap-chart", $colors: 6, $on-colors: true, $grid: false);
 
 .treemap-chart {
   --md-comp-treemap-chart-gap: 4px;
-  // As in the pie chart: the container roles mixed 45% with on-surface pass
-  // 3:1 on the surface (WCAG 1.4.11), and surface text on them passes too.
-  --md-comp-treemap-chart-color-5: color-mix(in oklab, var(--md-sys-color-primary-container) 45%, var(--md-sys-color-on-surface));
-  --md-comp-treemap-chart-color-6: color-mix(in oklab, var(--md-sys-color-tertiary-container) 45%, var(--md-sys-color-on-surface));
-  --md-comp-treemap-chart-on-color-1: var(--md-sys-color-on-primary);
-  --md-comp-treemap-chart-on-color-2: var(--md-sys-color-on-tertiary);
-  --md-comp-treemap-chart-on-color-3: var(--md-sys-color-on-secondary);
-  --md-comp-treemap-chart-on-color-4: var(--md-sys-color-surface);
-  --md-comp-treemap-chart-on-color-5: var(--md-sys-color-surface);
-  --md-comp-treemap-chart-on-color-6: var(--md-sys-color-surface);
-}
-
-@for $i from 1 through 6 {
-  .treemap-chart [data-series="#{$i}"] {
-    --treemap-chart-color: var(--md-comp-treemap-chart-color-#{$i});
-    --treemap-chart-on-color: var(--md-comp-treemap-chart-on-color-#{$i});
-  }
-}
-
-.treemap-chart-plot {
-  border: 0;
-  background: none;
 }
 
 .treemap-chart-boxes {
@@ -84,10 +62,8 @@
 
   > span {
     position: relative;
-    overflow: hidden;
+    @include ellipsis;
     margin-inline: calc(var(--treemap-chart-inset) + 8px);
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   > span:first-child {

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

@@ -58,14 +58,7 @@ label:has(> [type="checkbox"]):not(.switch),
 // do not write :has(:not(:has(+ span))).
 label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
 .checkbox > [type="checkbox"] {
-  appearance: none;
-  flex: 0 0 var(--md-comp-checkbox-container-size);
-  box-sizing: border-box;
-  width: var(--md-comp-checkbox-container-size);
-  height: var(--md-comp-checkbox-container-size);
-  margin: 0;
-  padding: 0;
-  border: 2px solid var(--md-sys-color-on-surface-variant);
+  @include selection-control(var(--md-comp-checkbox-container-size), var(--md-comp-checkbox-container-size), var(--md-sys-color-on-surface-variant));
   border-radius: var(--md-comp-checkbox-container-shape);
   background-color: transparent;
   cursor: pointer;
@@ -77,19 +70,7 @@ label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
     background-color: var(--md-sys-color-primary);
   }
 
-  &:hover {
-    @include _ring(var(--md-sys-color-on-surface), "hover");
-  }
-
-  &:checked:hover,
-  &:indeterminate:hover {
-    @include _ring(var(--md-sys-color-primary), "hover");
-  }
-
-  &:focus-visible {
-    @include _ring(var(--md-sys-color-primary), "focus");
-    outline: none;
-  }
+  @include selection-control-states(var(--md-comp-checkbox-state-layer-size), var(--md-comp-checkbox-container-size), (":checked", ":indeterminate"));
 
   &.invalid,
   &[aria-invalid="true"] {

package/src/sass/components/forms/_drop-zone.scss

@@ -50,10 +50,7 @@
     }
 
     > input[type="file"] {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
+      @include fill-parent;
       margin: 0;
       padding: 0;
       opacity: 0;

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

@@ -51,10 +51,7 @@ fieldset {
     @include typescale("title-small");
 
     > #{$icon} {
-      font-size: rem(18px);
-      width: rem(18px);
-      height: rem(18px);
-      line-height: rem(18px);
+      @include icon-size(rem(18px));
       margin-inline-end: 8px;
       vertical-align: -3px;
       color: var(--md-sys-color-on-surface-variant);

package/src/sass/components/forms/_file-input.scss

@@ -27,6 +27,12 @@
     align-self: start;
     min-height: 3rem;
     min-width: 0;
+
+    // The focused control is the invisible file input inside, so the
+    // trigger shows its ring.
+    &:has(> input[type="file"]:focus-visible) {
+      @include focus-ring;
+    }
   }
 
   span {

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

@@ -213,10 +213,7 @@ $_floated: '&:focus + label, &:not([placeholder=" "]) + label, &:not(:placeholde
     top: rem(16px);
     display: flex;
     align-items: center;
-    font-size: rem(24px);
-    width: rem(24px);
-    height: rem(24px);
-    line-height: rem(24px);
+    @include icon-size(rem(24px));
     color: var(--md-sys-color-on-surface-variant);
     user-select: none;
   }
@@ -587,12 +584,32 @@ input.otp:not(.browser-default) {
     opacity: 0.38;
   }
 
+  // Forced colors drop gradients, which are the cells and the focus ring, so
+  // the code keeps them in system colors: a CanvasText line under each cell,
+  // Highlight while focused and GrayText when disabled.
   @media (forced-colors: active) {
+    --md-comp-otp-cell-color: Canvas;
     --md-comp-otp-indicator-color: CanvasText;
 
+    forced-color-adjust: none;
+    color: CanvasText;
+    caret-color: CanvasText;
+    background-color: Canvas;
+
+    &::placeholder {
+      color: GrayText;
+    }
+
     &:focus {
       --md-comp-otp-indicator-color: Highlight;
     }
+
+    &:disabled {
+      --md-comp-otp-indicator-color: GrayText;
+
+      color: GrayText;
+      opacity: 1;
+    }
   }
 }
 

package/src/sass/components/forms/_radio-buttons.scss

@@ -16,10 +16,6 @@
 //
 // .with-gap is a no-op: the selected state is always the ring + inner.
 
-@mixin _ring($color, $state) {
-  @include state-layer-ring(var(--md-comp-radio-button-state-layer-size), var(--md-comp-radio-button-icon-size), $color, $state);
-}
-
 label:has(> [type="radio"]),
 .radio {
   --md-comp-radio-button-icon-size: 20px;
@@ -46,14 +42,7 @@ label:has(> [type="radio"]),
 // Paint the radio on the input.
 label:has(> [type="radio"]) > [type="radio"],
 .radio > [type="radio"] {
-  appearance: none;
-  flex: 0 0 var(--md-comp-radio-button-icon-size);
-  box-sizing: border-box;
-  width: var(--md-comp-radio-button-icon-size);
-  height: var(--md-comp-radio-button-icon-size);
-  margin: 0;
-  padding: 0;
-  border: 2px solid var(--md-sys-color-on-surface-variant);
+  @include selection-control(var(--md-comp-radio-button-icon-size), var(--md-comp-radio-button-icon-size), var(--md-sys-color-on-surface-variant));
   border-radius: 50%;
   background-color: transparent;
   cursor: pointer;
@@ -68,18 +57,7 @@ label:has(> [type="radio"]) > [type="radio"],
     );
   }
 
-  &:hover {
-    @include _ring(var(--md-sys-color-on-surface), "hover");
-  }
-
-  &:checked:hover {
-    @include _ring(var(--md-sys-color-primary), "hover");
-  }
-
-  &:focus-visible {
-    @include _ring(var(--md-sys-color-primary), "focus");
-    outline: none;
-  }
+  @include selection-control-states(var(--md-comp-radio-button-state-layer-size), var(--md-comp-radio-button-icon-size));
 
   &:disabled {
     border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);

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

@@ -319,17 +319,13 @@ menu[role="listbox"] li.optgroup-option {
 // with the chevron .tree uses, a leaf lines its text up after it, and each
 // level hangs a guide line from its parent's chevron, as in .tree.
 ul[role="tree"] {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  @include list-reset;
 
   ul[role="group"] {
-    margin: 0;
+    @include list-reset;
     margin-inline-start: calc(var(--md-comp-menu-item-leading-space) + 10px);
-    padding: 0;
     padding-inline-start: 4px;
     border-inline-start: 1px solid var(--md-sys-color-outline-variant);
-    list-style: none;
   }
 
   li[role="treeitem"] {
@@ -358,10 +354,13 @@ ul[role="tree"] {
       background-color: state-layer(var(--md-comp-menu-item-label-text-color), "hover");
     }
 
+    // The focus layer alone is too faint to find, so the row takes the
+    // shared ring too, inset because the tree scrolls and would clip it.
     &:focus-visible > span {
       background-color: state-layer(var(--md-comp-menu-item-label-text-color), "focus");
+      @include focus-ring(-3px);
 
-      // Forced colors drop the focus fill, and the row has no outline of its own.
+      // Forced colors drop the focus fill and the ring's color.
       @media (forced-colors: active) {
         outline: 2px solid CanvasText;
         outline-offset: -2px;

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

@@ -130,10 +130,7 @@ input[type="range"]:dir(rtl) {
   left: var(--md-comp-slider-stop-inset);
   top: 50%;
   translate: 0 -50%;
-  font-size: var(--md-comp-slider-icon-size);
-  width: var(--md-comp-slider-icon-size);
-  height: var(--md-comp-slider-icon-size);
-  line-height: 1;
+  @include icon-size(var(--md-comp-slider-icon-size), 1);
   color: var(--md-sys-color-on-primary);
   pointer-events: none;
 }

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

@@ -31,15 +31,11 @@
 
 // Paint the switch on the checkbox. The class goes on the <label> that wraps
 // it; a checkbox nested deeper is an ordinary checkbox.
+// The selected handle's distance from the start edge of the padding box.
+$_on: calc(var(--md-comp-switch-track-width) - 4px - 2px - var(--md-comp-switch-handle-selected));
+
 .switch > [type="checkbox"] {
-  appearance: none;
-  flex: 0 0 var(--md-comp-switch-track-width);
-  box-sizing: border-box;
-  width: var(--md-comp-switch-track-width);
-  height: var(--md-comp-switch-track-height);
-  margin: 0;
-  padding: 0;
-  border: 2px solid var(--md-sys-color-outline);
+  @include selection-control(var(--md-comp-switch-track-width), var(--md-comp-switch-track-height), var(--md-sys-color-outline));
   border-radius: var(--md-sys-shape-corner-large);
   background-color: var(--md-sys-color-surface-container-highest);
   // Size the image to the handle. A 100% gradient keeps the circle in
@@ -76,24 +72,21 @@
     );
     background-size: var(--md-comp-switch-handle-selected) var(--md-comp-switch-handle-selected);
     // padding-box is track minus the 2px border on each side; 2px inset.
-    background-position: calc(
-        var(--md-comp-switch-track-width) - 4px - 2px - var(--md-comp-switch-handle-selected)
-      )
-      50%;
+    background-position: $_on 50%;
   }
 
-  &:hover {
-    box-shadow: 0 0 0 8px state-layer(var(--md-sys-color-on-surface), "hover");
-  }
+  // Off is at the start edge and on at the end, so RTL measures from the
+  // right. The same edge in both states keeps the slide animating.
+  &:dir(rtl) {
+    background-position: right 6px center;
 
-  &:checked:hover {
-    box-shadow: 0 0 0 8px state-layer(var(--md-sys-color-primary), "hover");
+    &:checked {
+      background-position: right $_on center;
+    }
   }
 
-  &:focus-visible {
-    box-shadow: 0 0 0 8px state-layer(var(--md-sys-color-primary), "focus");
-    outline: none;
-  }
+  // A fixed 8px ring around the default 32px track, for a 48dp target.
+  @include selection-control-states(48px, 32px);
 
   &:disabled {
     opacity: 0.38;

package/src/sass/utilities/_helpers.scss

@@ -190,7 +190,7 @@ $_layout: (
 .text-wrap { white-space: normal; }
 .text-balance { text-wrap-style: balance; }
 .text-pretty { text-wrap-style: pretty; }
-.truncate { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.truncate { display: block; @include ellipsis; }
 
 // Pointer input. Clicks pass through a .pointer-events-none overlay to what
 // lies beneath, and a .pointer-events-auto child takes them back. Neither

package/src/sass/utilities/_visibility.scss

@@ -15,9 +15,7 @@
 
 // Print. .hide-on-print drops a screen-only control from paper; .print-only
 // is the reverse, for a printed footer or a QR code beside a link.
-.hide-on-print {
-  @media print { display: none !important; }
-}
+.hide-on-print { @include print-hidden; }
 
 .print-only {
   @media screen { display: none !important; }

package/dist/js/chunks/chunk-2CS6TITK.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/ts/components/colorPicker.ts"],
-  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\nimport { Utils, controllerFor } from '../core/utils';\n\nexport interface ColorPickerOptions extends BaseOptions {\n  /**\n   * Called with the new `#rrggbb` value when a change is committed: the end\n   * of a drag, a key press, a hue release or a typed hex value.\n   * @default null\n   */\n  onChange: ((value: string) => void) | null;\n}\n\nconst _defaults: ColorPickerOptions = {\n  onChange: null\n};\n\n/** Hue in degrees, saturation and value from 0 to 1. */\ninterface Hsv { h: number; s: number; v: number }\n\nconst clamp = (n: number) => Math.min(1, Math.max(0, n));\n\n// Hue in degrees of an RGB color with channels from 0 to 1.\nfunction hueOf(r: number, g: number, b: number): number {\n  const max = Math.max(r, g, b);\n  const range = max - Math.min(r, g, b);\n  if (!range) return 0;\n  const sector = max === r ? (g - b) / range : max === g ? (b - r) / range + 2 : (r - g) / range + 4;\n  return (sector * 60 + 360) % 360;\n}\n\nfunction toHsv(hex: string): Hsv | null {\n  const match = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());\n  if (!match) return null;\n  const digits = match[1].length === 3 ? [...match[1]].map((c) => c + c).join('') : match[1];\n  const [r, g, b] = [0, 2, 4].map((i) => parseInt(digits.slice(i, i + 2), 16) / 255);\n  const max = Math.max(r, g, b);\n  return { h: hueOf(r, g, b), s: max ? (max - Math.min(r, g, b)) / max : 0, v: max };\n}\n\nfunction toHex({ h, s, v }: Hsv): string {\n  const channel = (n: number) => {\n    const k = (n + h / 60) % 6;\n    return v - v * s * Math.max(0, Math.min(k, 4 - k, 1));\n  };\n  return '#' + [5, 3, 1].map((n) => Math.round(channel(n) * 255).toString(16).padStart(2, '0')).join('');\n}\n\n// Area keys as [saturation, brightness] steps of 1%; Shift takes ten of them.\n// Home and End overshoot so the clamp lands on the ends of saturation.\nconst KEY_STEPS: Record<string, [number, number]> = {\n  ArrowRight: [1, 0],\n  ArrowLeft: [-1, 0],\n  ArrowUp: [0, 1],\n  ArrowDown: [0, -1],\n  PageUp: [0, 10],\n  PageDown: [0, -10],\n  Home: [-100, 0],\n  End: [100, 0]\n};\n\n/**\n * Color picker. Enhances a `.color-picker` holding an `<input type=\"color\">`\n * with a saturation and brightness area, a hue slider and a hex field. The\n * native input stays the form value and the preview, so the browser's own\n * picker still opens from it, and it fires `input` and `change` as it would\n * if the person had used that picker.\n */\nexport class ColorPicker extends Component<ColorPickerOptions> {\n  /** The native color input that holds the value. */\n  input: HTMLInputElement | null;\n  private _hsv: Hsv = { h: 0, s: 0, v: 0 };\n  private _area: HTMLDivElement | null = null;\n  private _thumb: HTMLDivElement | null = null;\n  private _hue: HTMLInputElement | null = null;\n  private _hex: HTMLInputElement | null = null;\n  // Set while the picker writes the native input, so its own events are not\n  // read back as an outside change.\n  private _writing = false;\n\n  constructor(el: HTMLElement, options: Partial<ColorPickerOptions>) {\n    super(el, options);\n    this.input = el.querySelector<HTMLInputElement>(':scope > input[type=\"color\"]');\n    if (!this.input) return;\n    this._hsv = toHsv(this.input.value) ?? this._hsv;\n    this._build();\n    this.input.addEventListener('input', this._onNativeInput, { signal: this._events.signal });\n    this._render();\n  }\n\n  static get defaults(): ColorPickerOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_ColorPicker';\n\n  destroy() {\n    for (const part of [this._area, this._hue, this._hex]) part?.remove();\n    this._area = this._thumb = this._hue = this._hex = null;\n    this.el.style.removeProperty('--_color-picker-hue');\n    super.destroy();\n  }\n\n  /** The current color as `#rrggbb`. Setting it fires no events, as with a native input. */\n  get value(): string {\n    return this.input?.value ?? '';\n  }\n\n  set value(hex: string) {\n    const hsv = toHsv(hex);\n    if (!hsv || !this.input) return;\n    this._hsv = hsv;\n    this._writing = true;\n    this.input.value = toHex(hsv);\n    this._writing = false;\n    this._render();\n  }\n\n  private _build() {\n    const disabled = this.input!.disabled;\n\n    const area = document.createElement('div');\n    area.className = 'color-picker-area';\n    const thumb = document.createElement('div');\n    thumb.className = 'color-picker-thumb';\n    thumb.setAttribute('role', 'slider');\n    thumb.setAttribute('aria-label', 'Saturation and brightness');\n    thumb.setAttribute('aria-valuemin', '0');\n    thumb.setAttribute('aria-valuemax', '100');\n    thumb.tabIndex = disabled ? -1 : 0;\n    if (disabled) thumb.setAttribute('aria-disabled', 'true');\n    area.append(thumb);\n\n    const hue = document.createElement('input');\n    hue.type = 'range';\n    hue.className = 'color-picker-hue';\n    hue.min = '0';\n    hue.max = '359';\n    hue.setAttribute('aria-label', 'Hue');\n    hue.disabled = disabled;\n\n    const hex = document.createElement('input');\n    hex.type = 'text';\n    hex.className = 'color-picker-hex';\n    hex.setAttribute('aria-label', 'Hex color');\n    hex.autocomplete = 'off';\n    hex.spellcheck = false;\n    hex.maxLength = 7;\n    hex.disabled = disabled;\n\n    // Area and hue before the native input, the hex field after it.\n    this.input!.before(area, hue);\n    this.input!.after(hex);\n    this._area = area;\n    this._thumb = thumb;\n    this._hue = hue;\n    this._hex = hex;\n\n    area.addEventListener('pointerdown', this._onPointerDown);\n    thumb.addEventListener('keydown', this._onKeyDown);\n    hue.addEventListener('input', () => this._set({ ...this._hsv, h: Number(hue.value) }, false));\n    hue.addEventListener('change', () => this._commit());\n    hex.addEventListener('change', this._onHex);\n    hex.addEventListener('keydown', (e) => {\n      // Enter in a text field would submit the form; take it as \"apply\".\n      if (e.key === 'Enter' && !Utils.isComposing(e)) {\n        e.preventDefault();\n        this._onHex();\n      }\n    });\n  }\n\n  private _render() {\n    const { h, s, v } = this._hsv;\n    const hex = toHex(this._hsv);\n    const thumb = this._thumb!;\n    this.el.style.setProperty('--_color-picker-hue', String(Math.round(h)));\n    thumb.style.setProperty('--_color-picker-x', String(s));\n    thumb.style.setProperty('--_color-picker-y', String(1 - v));\n    thumb.style.setProperty('--_color-picker-color', hex);\n    thumb.setAttribute('aria-valuenow', String(Math.round(s * 100)));\n    thumb.setAttribute('aria-valuetext', `Saturation ${Math.round(s * 100)}%, brightness ${Math.round(v * 100)}%`);\n    this._hue!.value = String(Math.round(h));\n    // The hex field only commits on change, so rewriting it never fights typing.\n    this._hex!.value = hex;\n  }\n\n  // Store the color, write it to the native input and fire `input`; with\n  // `commit`, also fire `change` and onChange.\n  // Only reached from the built controls, which a disabled input disables.\n  private _set(hsv: Hsv, commit = true) {\n    const input = this.input!;\n    this._hsv = hsv;\n    const hex = toHex(hsv);\n    const changed = input.value !== hex;\n    this._writing = true;\n    input.value = hex;\n    if (changed) input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n    this._writing = false;\n    this._render();\n    if (commit) this._commit();\n  }\n\n  private _commit() {\n    if (!this.input) return;\n    this._writing = true;\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n    this._writing = false;\n    this.options.onChange?.(this.input.value);\n  }\n\n  // The person used the browser's own picker on the native input.\n  private _onNativeInput = () => {\n    if (this._writing || !this.input) return;\n    const hsv = toHsv(this.input.value);\n    if (!hsv) return;\n    this._hsv = hsv;\n    this._render();\n  };\n\n  private _onHex = () => {\n    const hsv = toHsv(this._hex!.value);\n    if (hsv && toHex(hsv) !== this.input!.value) this._set(hsv);\n    // An invalid entry goes back to the current color.\n    this._hex!.value = toHex(this._hsv);\n  };\n\n  private _fromPoint(e: PointerEvent, commit: boolean) {\n    const box = this._area!.getBoundingClientRect();\n    const s = clamp((e.clientX - box.left) / box.width);\n    const v = 1 - clamp((e.clientY - box.top) / box.height);\n    this._set({ ...this._hsv, s, v }, commit);\n  }\n\n  private _onPointerDown = (e: PointerEvent) => {\n    if (e.button || this.input!.disabled) return;\n    const area = this._area!;\n    e.preventDefault();\n    this._thumb!.focus();\n    area.setPointerCapture(e.pointerId);\n    this._fromPoint(e, false);\n    const move = (ev: PointerEvent) => this._fromPoint(ev, false);\n    const drag = controllerFor(area);\n    const up = (ev: PointerEvent) => {\n      drag.abort();\n      this._fromPoint(ev, true);\n    };\n    const { signal } = drag;\n    area.addEventListener('pointermove', move, { signal });\n    area.addEventListener('pointerup', up, { signal });\n    area.addEventListener('pointercancel', up, { signal });\n  };\n\n  // Left and right change saturation, up and down brightness; see KEY_STEPS.\n  private _onKeyDown = (e: KeyboardEvent) => {\n    const steps = KEY_STEPS[e.key];\n    if (!steps || this.input!.disabled) return;\n    e.preventDefault();\n    const unit = e.shiftKey ? 0.1 : 0.01;\n    const { s, v } = this._hsv;\n    this._set({ ...this._hsv, s: clamp(s + steps[0] * unit), v: clamp(v + steps[1] * unit) });\n  };\n}\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/js/chunks/chunk-3L3QIYLC.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/ts/behaviors/bottomSheets.ts"],
-  "sourcesContent": ["import { DISMISS_DISTANCE, DISMISS_VELOCITY, installSheetDrag } from './sheetDrag';\nimport { Utils } from '../core/utils';\n\nconst SHEET_SELECTOR = 'dialog.bottom-sheet';\n/** Past this a drag up expands an .expandable sheet, in pixels; a drag down uses the dismissal distance. */\nconst RESIZE_DISTANCE = 48;\n\n/** Whether a drag went past `distance`, or flicked, down (1) or up (-1). */\nconst toward = (sign: 1 | -1, distance: number, delta: number, velocity: number) =>\n  delta * sign > distance || velocity * sign > DISMISS_VELOCITY;\n\n/**\n * Drag-to-dismiss for `dialog.bottom-sheet`, and two heights for\n * `.expandable` sheets.\n *\n * The handle is the top 48dp of the sheet, or an explicit `.drag-handle`. A downward drag past 96dp, or a\n * flick, closes. Anything else snaps back. Content below the handle scrolls\n * normally. Light-dismiss on the scrim stays with {@link Dialogs}.\n *\n * The drag itself is {@link installSheetDrag}, shared with the side sheet. What\n * is here is what is not shared: a handle written as a `<button>` also closes\n * the sheet when it is *activated*, which is what makes it reachable without a\n * pointer - dragging is a pointer gesture, so a control labelled \"Dismiss\" that\n * only answers a drag promises an action a keyboard user cannot perform. A\n * handle written as any other element is decoration and does nothing here -\n * Escape still closes the sheet either way, natively.\n *\n * An `.expandable` sheet opens partly expanded. A drag up, or a flick up,\n * expands it to its full height with `.expanded`; from there a drag down\n * collapses it, and a drag down from the partial height dismisses as usual.\n * Its handle button switches between the two heights instead of closing,\n * and carries `aria-expanded`. Closing the sheet puts it back to partial.\n */\nexport class BottomSheets {\n  /**\n   * Whether the last pointer sequence moved. A drag ends with a `click` on the\n   * element it started on, so without this the tail of a drag that snapped back\n   * would dismiss the sheet the drag had just declined to dismiss.\n   */\n  private static _dragged = false;\n\n  static Init() {\n    installSheetDrag({\n      selector: SHEET_SELECTOR,\n      axis: 'y',\n      property: '--md-comp-bottom-sheet-shift',\n      motion: '--md-comp-bottom-sheet-motion',\n      direction: () => 1,\n      inHandle: (event, dialog) => {\n        if (Utils.closestInPath(event, '.drag-handle')) return true;\n        const rect = dialog.getBoundingClientRect();\n        return event.clientY >= rect.top && event.clientY <= rect.top + 48;\n      },\n      onPress: () => {\n        BottomSheets._dragged = false;\n      },\n      onRelease: (dragged) => {\n        BottomSheets._dragged = dragged;\n      },\n      release: (dialog, delta, velocity) => BottomSheets._resize(dialog, delta, velocity)\n    });\n    Utils.onDocumentReady(() => {\n      document.addEventListener('click', BottomSheets._onClick);\n      // close does not bubble, so it is caught on its way down.\n      document.addEventListener('close', BottomSheets._onClose, true);\n    });\n  }\n\n  /**\n   * For an .expandable sheet, a drag up expands it and a drag down from\n   * expanded collapses it. Returns whether the drag resized the sheet.\n   */\n  static _resize(dialog: HTMLDialogElement, delta: number, velocity: number): boolean {\n    if (!dialog.classList.contains('expandable')) return false;\n    const expanded = dialog.classList.contains('expanded');\n    const next = expanded ? !toward(1, DISMISS_DISTANCE, delta, velocity) : toward(-1, RESIZE_DISTANCE, delta, velocity);\n    if (next === expanded) return false;\n    BottomSheets.setExpanded(dialog, next);\n    return true;\n  }\n\n  /** Sets an .expandable sheet to its full height or back to partial, and tells its handle. */\n  static setExpanded(dialog: HTMLDialogElement, expanded: boolean) {\n    dialog.classList.toggle('expanded', expanded);\n    dialog.querySelector(':scope > button.drag-handle')?.setAttribute('aria-expanded', String(expanded));\n  }\n\n  private static _onClose(event: Event) {\n    const dialog = event.target as Element;\n    if (dialog.matches?.(`${SHEET_SELECTOR}.expandable`)) BottomSheets.setExpanded(dialog as HTMLDialogElement, false);\n  }\n\n  static _onClick(event: MouseEvent) {\n    const handle = Utils.closestInPath(event, '.drag-handle');\n    // Only a <button> is a control. A decorative <span> in the same slot is\n    // exactly what it looks like, and clicking it does nothing.\n    if (!(handle instanceof HTMLButtonElement)) return;\n    // `detail` is 0 when the click came from Enter or Space and >= 1 when a\n    // pointer produced it, so the keyboard path is decided without consulting\n    // pointer state at all - a stale drag can never swallow a key press.\n    if (event.detail !== 0 && BottomSheets._dragged) return;\n    const dialog = handle.closest(SHEET_SELECTOR);\n    if (dialog instanceof HTMLDialogElement && dialog.open) BottomSheets._activate(dialog);\n  }\n\n  /** The handle button switches an .expandable sheet's height, and closes any other. */\n  private static _activate(dialog: HTMLDialogElement) {\n    if (dialog.classList.contains('expandable')) BottomSheets.setExpanded(dialog, !dialog.classList.contains('expanded'));\n    else dialog.close();\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;AAGA,IAAM,iBAAiB;AAEvB,IAAM,kBAAkB;AAGxB,IAAM,SAAS,CAAC,MAAc,UAAkB,OAAe,aAC7D,QAAQ,OAAO,YAAY,WAAW,OAAO;AAwBxC,IAAM,gBAAN,MAAM,cAAa;AAAA,EAQxB,OAAO,OAAO;AACZ,qBAAiB;AAAA,MACf,UAAU;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,WAAW,MAAM;AAAA,MACjB,UAAU,CAAC,OAAO,WAAW;AAC3B,YAAI,MAAM,cAAc,OAAO,cAAc,EAAG,QAAO;AACvD,cAAM,OAAO,OAAO,sBAAsB;AAC1C,eAAO,MAAM,WAAW,KAAK,OAAO,MAAM,WAAW,KAAK,MAAM;AAAA,MAClE;AAAA,MACA,SAAS,MAAM;AACb,sBAAa,WAAW;AAAA,MAC1B;AAAA,MACA,WAAW,CAAC,YAAY;AACtB,sBAAa,WAAW;AAAA,MAC1B;AAAA,MACA,SAAS,CAAC,QAAQ,OAAO,aAAa,cAAa,QAAQ,QAAQ,OAAO,QAAQ;AAAA,IACpF,CAAC;AACD,UAAM,gBAAgB,MAAM;AAC1B,eAAS,iBAAiB,SAAS,cAAa,QAAQ;AAExD,eAAS,iBAAiB,SAAS,cAAa,UAAU,IAAI;AAAA,IAChE,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,QAAQ,QAA2B,OAAe,UAA2B;AAClF,QAAI,CAAC,OAAO,UAAU,SAAS,YAAY,EAAG,QAAO;AACrD,UAAM,WAAW,OAAO,UAAU,SAAS,UAAU;AACrD,UAAM,OAAO,WAAW,CAAC,OAAO,GAAG,kBAAkB,OAAO,QAAQ,IAAI,OAAO,IAAI,iBAAiB,OAAO,QAAQ;AACnH,QAAI,SAAS,SAAU,QAAO;AAC9B,kBAAa,YAAY,QAAQ,IAAI;AACrC,WAAO;AAAA,EACT;AAAA;AAAA,EAGA,OAAO,YAAY,QAA2B,UAAmB;AAC/D,WAAO,UAAU,OAAO,YAAY,QAAQ;AAC5C,WAAO,cAAc,6BAA6B,GAAG,aAAa,iBAAiB,OAAO,QAAQ,CAAC;AAAA,EACrG;AAAA,EAEA,OAAe,SAAS,OAAc;AACpC,UAAM,SAAS,MAAM;AACrB,QAAI,OAAO,UAAU,GAAG,cAAc,aAAa,EAAG,eAAa,YAAY,QAA6B,KAAK;AAAA,EACnH;AAAA,EAEA,OAAO,SAAS,OAAmB;AACjC,UAAM,SAAS,MAAM,cAAc,OAAO,cAAc;AAGxD,QAAI,EAAE,kBAAkB,mBAAoB;AAI5C,QAAI,MAAM,WAAW,KAAK,cAAa,SAAU;AACjD,UAAM,SAAS,OAAO,QAAQ,cAAc;AAC5C,QAAI,kBAAkB,qBAAqB,OAAO,KAAM,eAAa,UAAU,MAAM;AAAA,EACvF;AAAA;AAAA,EAGA,OAAe,UAAU,QAA2B;AAClD,QAAI,OAAO,UAAU,SAAS,YAAY,EAAG,eAAa,YAAY,QAAQ,CAAC,OAAO,UAAU,SAAS,UAAU,CAAC;AAAA,QAC/G,QAAO,MAAM;AAAA,EACpB;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AA7Ea,cAMI,WAAW;AANrB,IAAM,eAAN;",
-  "names": []
-}

package/dist/js/chunks/chunk-4IKVPCSU.mjs

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