@m3e/web 2.5.4 → 2.5.6

package/dist/switch.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.min.js","sources":["../../src/switch/styles/SwitchToken.ts","../../src/switch/styles/SwitchHandleStyle.ts","../../src/switch/styles/SwitchIconStyle.ts","../../src/switch/styles/SwitchStateLayerStyle.ts","../../src/switch/styles/SwitchStyle.ts","../../src/switch/styles/SwitchTrackStyle.ts","../../src/switch/SwitchElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens that control `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchToken = {\r\n  selectedIconColor: unsafeCSS(`var(--m3e-switch-selected-icon-color, ${DesignToken.color.onPrimaryContainer})`),\r\n  selectedIconSize: unsafeCSS(\"var(--m3e-switch-selected-icon-size, 1rem)\"),\r\n  unselectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedIconSize: unsafeCSS(\"var(--m3e-switch-unselected-icon-size, 1rem)\"),\r\n  trackHeight: unsafeCSS(\"var(--m3e-switch-track-height, 2rem)\"),\r\n  trackWidth: unsafeCSS(\"var(--m3e-switch-track-width, 3.25rem)\"),\r\n  trackOutlineColor: unsafeCSS(`var(--m3e-switch-track-outline-color, ${DesignToken.color.outline})`),\r\n  trackOutlineWidth: unsafeCSS(\"var(--m3e-switch-track-outline-width, 2px)\"),\r\n  trackShape: unsafeCSS(`var(--m3e-switch-track-shape, ${DesignToken.shape.corner.full})`),\r\n  selectedTrackColor: unsafeCSS(`var(--m3e-switch-selected-track-color, ${DesignToken.color.primary})`),\r\n  unselectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHandleHeight: unsafeCSS(\"var(--m3e-switch-unselected-handle-height, 1rem)\"),\r\n  unselectedHandleWidth: unsafeCSS(\"var(--m3e-switch-unselected-handle-width, 1rem)\"),\r\n  withIconHandleHeight: unsafeCSS(\"var(--m3e-switch-with-icon-handle-height, 1.5rem)\"),\r\n  withIconHandleWidth: unsafeCSS(\"var(--m3e-switch-with-icon-handle-width, 1.5rem)\"),\r\n  selectedHandleHeight: unsafeCSS(\"var(--m3e-switch-selected-handle-height, 1.5rem)\"),\r\n  selectedHandleWidth: unsafeCSS(\"var(--m3e-switch-selected-handle-width, 1.5rem)\"),\r\n  pressedHandleHeight: unsafeCSS(\"var(--m3e-switch-pressed-handle-height, 1.75rem)\"),\r\n  pressedHandleWidth: unsafeCSS(\"var(--m3e-switch-pressed-handle-width, 1.75rem)\"),\r\n  handleShape: unsafeCSS(`var(--m3e-switch-handle-shape, ${DesignToken.shape.corner.full})`),\r\n  selectedHandleColor: unsafeCSS(`var(--m3e-switch-selected-handle-color, ${DesignToken.color.onPrimary})`),\r\n  unselectedHandleColor: unsafeCSS(`var(--m3e-switch-unselected-handle-color, ${DesignToken.color.outline})`),\r\n  stateLayerSize: unsafeCSS(\"var(--m3e-switch-state-layer-size, 2.5rem)\"),\r\n  stateLayerShape: unsafeCSS(`var(--m3e-switch-state-layer-shape, ${DesignToken.shape.corner.full})`),\r\n  disabledSelectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-icon-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledSelectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-icon-opacity, 38%)\"),\r\n  disabledUnselectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  disabledUnselectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-icon-opacity, 38%)\"),\r\n  disabledTrackOpacity: unsafeCSS(\"var(--m3e-switch-disabled-track-opacity, 12%)\"),\r\n  disabledSelectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-track-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledUnselectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  disabledUnselectedTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-track-outline-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledUnselectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-handle-opacity, 38%)\"),\r\n  disabledSelectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-handle-opacity, 100%)\"),\r\n  disabledSelectedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-handle-color, ${DesignToken.color.surface})`,\r\n  ),\r\n  disabledUnselectedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-handle-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  selectedHoverIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedHoverIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedHoverTrackColor: unsafeCSS(`var(--m3e-switch-selected-hover-track-color, ${DesignToken.color.primary})`),\r\n  selectedHoverStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-hover-state-layer-opacity, 8%)\"),\r\n  unselectedHoverTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHoverTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedHoverStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-hover-state-layer-opacity, 8%)\"),\r\n  selectedHoverHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-handle-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHoverHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n  selectedFocusIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedFocusIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedFocusTrackColor: unsafeCSS(`var(--m3e-switch-selected-focus-track-color, ${DesignToken.color.primary})`),\r\n  selectedFocusStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-focus-state-layer-opacity, 10%)\"),\r\n  unselectedFocusTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedFocusTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedFocusStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-focus-state-layer-opacity, 10%)\"),\r\n  selectedFocusHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-handle-color, ${DesignToken.color.primaryContainer})`,\r\n  ),\r\n  unselectedFocusHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n  selectedPressedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedPressedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedPressedTrackColor: unsafeCSS(`var(--m3e-switch-selected-pressed-track-color, ${DesignToken.color.primary})`),\r\n  selectedPressedStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-pressed-state-layer-opacity, 10%)\"),\r\n  unselectedPressedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedPressedTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedPressedStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-pressed-state-layer-opacity, 10%)\"),\r\n  selectedPressedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-handle-color, ${DesignToken.color.primaryContainer})`,\r\n  ),\r\n  unselectedPressedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Handle styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchHandleStyle = css`\r\n  .handle {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    pointer-events: none;\r\n    transform-origin: center center;\r\n    border-radius: ${SwitchToken.handleShape};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n      transform var(--_switch-handle-effect),\r\n      width ${DesignToken.motion.spring.fastEffects},\r\n      height ${DesignToken.motion.spring.fastEffects}`,\r\n    )};\r\n  }\r\n  .track:not(.pressed) .handle {\r\n    --_switch-handle-effect: ${DesignToken.motion.spring.fastSpatial};\r\n  }\r\n  .track.pressed .handle {\r\n    --_switch-handle-effect: ${DesignToken.motion.spring.fastEffects};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    width: ${SwitchToken.withIconHandleWidth};\r\n    height: ${SwitchToken.withIconHandleHeight};\r\n  }\r\n  :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n    width: ${SwitchToken.unselectedHandleWidth};\r\n    height: ${SwitchToken.unselectedHandleHeight};\r\n  }\r\n  :host([checked]) .track:not(.pressed) .handle {\r\n    width: ${SwitchToken.selectedHandleWidth};\r\n    height: ${SwitchToken.selectedHandleHeight};\r\n  }\r\n  .track.pressed .handle {\r\n    width: ${SwitchToken.pressedHandleWidth};\r\n    height: ${SwitchToken.pressedHandleHeight};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedHoverHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedFocusHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n    background-color: ${SwitchToken.unselectedPressedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedHoverHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedFocusHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n    background-color: ${SwitchToken.selectedPressedHandleColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedHandleColor} ${SwitchToken.disabledUnselectedHandleOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .handle {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedHandleColor} ${SwitchToken.disabledSelectedHandleOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl))[checked]) .track:not(.pressed) .handle {\r\n    transform: translateX(\r\n      calc(${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2))\r\n    );\r\n  }\r\n  :host(:dir(rtl)[checked]) .track:not(.pressed) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        0px - calc(\r\n            ${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2)\r\n          )\r\n      )\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl))[checked]) .track.pressed .handle {\r\n    transform: translateX(\r\n      calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth})\r\n    );\r\n  }\r\n  :host(:dir(rtl)[checked]) .track.pressed .handle {\r\n    transform: translateX(\r\n      calc(0px - calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth}))\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl)):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host(:not(:dir(rtl))[aria-disabled=\"true\"]:not([checked])) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        ${SwitchToken.trackOutlineWidth} + calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n      )\r\n    );\r\n  }\r\n  :host(:dir(rtl):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host(:dir(rtl)[aria-disabled=\"true\"]:not([checked])) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        0px - calc(\r\n            ${SwitchToken.trackOutlineWidth} +\r\n              calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n          )\r\n      )\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl)):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    transform: translateX(${SwitchToken.trackOutlineWidth});\r\n  }\r\n  :host(:dir(rtl):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    transform: translateX(calc(0px - ${SwitchToken.trackOutlineWidth}));\r\n  }\r\n  @media (forced-colors: active) {\r\n    .handle {\r\n      transition: ${unsafeCSS(\r\n        `transform var(--_switch-handle-effect),\r\n      width ${DesignToken.motion.spring.fastEffects},\r\n      height ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n      background-color: ButtonText;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n      background-color: GrayText;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n      background-color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .handle {\r\n      background-color: Canvas;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .handle {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Icon styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchIconStyle = css`\r\n  :host([icons=\"none\"]) .icon,\r\n  :host([icons=\"selected\"]:not([checked])) .icon,\r\n  :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n    display: none;\r\n  }\r\n  .icon {\r\n    width: 1em;\r\n    transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:not([checked])) .icon {\r\n    font-size: ${SwitchToken.unselectedIconSize};\r\n  }\r\n  :host([checked]) .icon {\r\n    font-size: ${SwitchToken.selectedIconSize};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedHoverIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedFocusIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n    color: ${SwitchToken.unselectedPressedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedHoverIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedFocusIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n    color: ${SwitchToken.selectedPressedIconColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedIconColor} ${SwitchToken.disabledUnselectedIconOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .icon {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedIconColor} ${SwitchToken.disabledSelectedIconOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  @media (forced-colors: active) {\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n      color: Canvas;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n      color: CanvasText;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n      color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .icon {\r\n      color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .icon {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * State layer styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStateLayerStyle = css`\r\n  .state-layer {\r\n    width: ${SwitchToken.stateLayerSize};\r\n    height: ${SwitchToken.stateLayerSize};\r\n    border-radius: ${SwitchToken.stateLayerShape};\r\n    transition: ${unsafeCSS(\r\n      `top ${DesignToken.motion.spring.fastEffects},\r\n          left ${DesignToken.motion.spring.fastEffects},\r\n          right ${DesignToken.motion.spring.fastEffects}`,\r\n    )};\r\n  }\r\n  :host(:not([checked])[icons=\"both\"]) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleHeight}) / 2));\r\n  }\r\n  :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(\r\n      0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleWidth}) / 2)\r\n    );\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleHeight}) / 2));\r\n  }\r\n  :host([checked]) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleHeight}) / 2));\r\n  }\r\n  .track.pressed .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n  }\r\n  :host(:not([checked])) .state-layer {\r\n    --m3e-state-layer-hover-color: ${SwitchToken.unselectedHoverStateLayerColor};\r\n    --m3e-state-layer-hover-opacity: ${SwitchToken.unselectedHoverStateLayerOpacity};\r\n    --m3e-state-layer-focus-color: ${SwitchToken.unselectedFocusStateLayerColor};\r\n    --m3e-state-layer-focus-opacity: ${SwitchToken.unselectedFocusStateLayerOpacity};\r\n  }\r\n  :host([checked]) .state-layer {\r\n    --m3e-state-layer-hover-color: ${SwitchToken.selectedHoverStateLayerColor};\r\n    --m3e-state-layer-hover-opacity: ${SwitchToken.selectedHoverStateLayerOpacity};\r\n    --m3e-state-layer-focus-color: ${SwitchToken.selectedFocusStateLayerColor};\r\n    --m3e-state-layer-focus-opacity: ${SwitchToken.selectedFocusStateLayerOpacity};\r\n  }\r\n`;\r\n","import { css } from \"lit\";\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Baseline styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStyle = css`\r\n  :host {\r\n    display: inline-block;\r\n    position: relative;\r\n    outline: none;\r\n    height: fit-content;\r\n    width: fit-content;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])) {\r\n    cursor: pointer;\r\n  }\r\n  .focus-ring {\r\n    border-radius: ${SwitchToken.trackShape};\r\n  }\r\n  .touch {\r\n    position: absolute;\r\n    height: 3rem;\r\n    left: 0;\r\n    right: 0;\r\n  }\r\n  .base {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Track styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchTrackStyle = css`\r\n  .track {\r\n    display: flex;\r\n    align-items: center;\r\n    position: relative;\r\n    box-sizing: border-box;\r\n    border-radius: ${SwitchToken.trackShape};\r\n    width: ${SwitchToken.trackWidth};\r\n    height: ${SwitchToken.trackHeight};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  :host(:not([checked])) .track {\r\n    border-width: ${SwitchToken.trackOutlineWidth};\r\n    border-style: solid;\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.trackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.unselectedHoverTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedHoverTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.unselectedFocusTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedFocusTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n    border-color: ${SwitchToken.unselectedPressedTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedPressedTrackColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n    border-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedTrackOutlineColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedHoverTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedFocusTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n    background-color: ${SwitchToken.selectedPressedTrackColor};\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .track {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  @media (forced-colors: active) {\r\n    .track {\r\n      transition: none;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n      border-color: ButtonText;\r\n      background-color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n      border-color: GrayText;\r\n      background-color: Canvas;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n      background-color: ButtonText;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .track {\r\n      background-color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .track {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  Labelled,\r\n  Checked,\r\n  ConstraintValidation,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Touched,\r\n  AttachInternals,\r\n  Role,\r\n  M3eFocusRingElement,\r\n  M3eStateLayerElement,\r\n  Focusable,\r\n  KeyboardClick,\r\n  PressedController,\r\n  HoverController,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SwitchHandleStyle, SwitchIconStyle, SwitchStateLayerStyle, SwitchStyle, SwitchTrackStyle } from \"./styles\";\r\n\r\nimport { SwitchIcons } from \"./SwitchIcons\";\r\n\r\n/**\r\n * An on/off control that can be toggled by clicking.\r\n *\r\n * @description\r\n * The `m3e-switch` component is a semantic, accessible toggle control that reflects a binary state.\r\n * Designed according to Material Design 3 guidelines, it supports shape transitions, and adaptive color\r\n * theming across selected, unselected, and disabled states. The component responds to user interaction\r\n * with smooth motion and expressive feedback. It supports optional icons (`none`, `selected`, or `both`)\r\n * and integrates with form-associated behavior, emitting `input` and `change` events when toggled.\r\n *\r\n * @example\r\n * The following example illustrates a switch wrapped by a `label`.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch></m3e-switch></label>\r\n * ```\r\n *\r\n * @example\r\n * By default, icons are not presented. Use the `icons` attribute to control which icons to show. The next\r\n * example illustrates showing both the unselected and selected icons.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch icons=\"both\"></m3e-switch></label>\r\n * ```\r\n *\r\n * @tag m3e-switch\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr icons - The icons to present.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr value - A string representing the value of the switch.\r\n *\r\n * @fires input - Emitted when the checked state changes.\r\n * @fires change - Emitted when the checked state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-switch-selected-icon-color - Color of the icon when the switch is selected.\r\n * @cssprop --m3e-switch-selected-icon-size - Size of the icon in the selected state.\r\n * @cssprop --m3e-switch-unselected-icon-color - Color of the icon when the switch is unselected.\r\n * @cssprop --m3e-switch-unselected-icon-size - Size of the icon in the unselected state.\r\n * @cssprop --m3e-switch-track-height - Height of the switch track.\r\n * @cssprop --m3e-switch-track-width - Width of the switch track.\r\n * @cssprop --m3e-switch-track-outline-color - Color of the track's outline.\r\n * @cssprop --m3e-switch-track-outline-width - Thickness of the track's outline.\r\n * @cssprop --m3e-switch-track-shape - Corner shape of the track.\r\n * @cssprop --m3e-switch-selected-track-color - Track color when selected.\r\n * @cssprop --m3e-switch-unselected-track-color - Track color when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-height - Height of the handle when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-width - Width of the handle when unselected.\r\n * @cssprop --m3e-switch-with-icon-handle-height - Height of the handle when icons are present.\r\n * @cssprop --m3e-switch-with-icon-handle-width - Width of the handle when icons are present.\r\n * @cssprop --m3e-switch-selected-handle-height - Height of the handle when selected.\r\n * @cssprop --m3e-switch-selected-handle-width - Width of the handle when selected.\r\n * @cssprop --m3e-switch-pressed-handle-height - Height of the handle during press.\r\n * @cssprop --m3e-switch-pressed-handle-width - Width of the handle during press.\r\n * @cssprop --m3e-switch-handle-shape - Corner shape of the handle.\r\n * @cssprop --m3e-switch-selected-handle-color - Handle color when selected.\r\n * @cssprop --m3e-switch-unselected-handle-color - Handle color when unselected.\r\n * @cssprop --m3e-switch-state-layer-size - Diameter of the state layer overlay.\r\n * @cssprop --m3e-switch-state-layer-shape - Corner shape of the state layer.\r\n * @cssprop --m3e-switch-disabled-selected-icon-color - Icon color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-icon-opacity - Icon opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-color - Icon color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-opacity - Icon opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-track-opacity - Track opacity when disabled.\r\n * @cssprop --m3e-switch-disabled-selected-track-color - Track color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-color - Track color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-outline-color - Outline color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-opacity - Handle opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-opacity - Handle opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-color - Handle color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-color - Handle color when unselected and disabled.\r\n * @cssprop --m3e-switch-selected-hover-icon-color - Icon color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-icon-color - Icon color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-track-color - Track color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-color - State layer color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-opacity - State layer opacity when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-color - Track color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-outline-color - Outline color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-color - State layer color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-opacity - State layer opacity when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-handle-color - Handle color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-handle-color - Handle color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-focus-icon-color - Icon color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-icon-color - Icon color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-track-color - Track color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-color - State layer color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-opacity - State layer opacity when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-color - Track color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-outline-color - Outline color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-color - State layer color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-opacity - State layer opacity when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-handle-color - Handle color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-handle-color - Handle color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-pressed-icon-color - Icon color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-icon-color - Icon color when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-track-color - Track color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-color - State layer color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-opacity - State layer opacity when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-color - Track color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-outline-color - Outline color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-color - State layer color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-opacity - State layer opacity when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-handle-color - Handle color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-handle-color - Handle color when unselected and pressed.\r\n */\r\n@customElement(\"m3e-switch\")\r\nexport class M3eSwitchElement extends Labelled(\r\n  Dirty(\r\n    Touched(\r\n      ConstraintValidation(\r\n        Checked(FormAssociated(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"switch\"))))))),\r\n      ),\r\n    ),\r\n  ),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    SwitchStyle,\r\n    SwitchStateLayerStyle,\r\n    SwitchTrackStyle,\r\n    SwitchHandleStyle,\r\n    SwitchIconStyle,\r\n  ];\r\n\r\n  /** @private */ @query(\".track\") private readonly _track?: HTMLElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @private */ readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    callback: (hovering) => {\r\n      if (this.disabled) return;\r\n      if (hovering) {\r\n        this._stateLayer?.show(\"hover\");\r\n      } else {\r\n        this._stateLayer?.hide(\"hover\");\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n  });\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new PressedController(this, {\r\n      isPressedKey: (key) => key === \" \",\r\n      callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * The icons to present.\r\n   * @default \"none\"\r\n   */\r\n  @property({ reflect: true }) icons: SwitchIcons = \"none\";\r\n\r\n  /**\r\n   * A string representing the value of the switch.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @private */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled ? this.value : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    for (const label of this.labels) {\r\n      this.#hoverController.observe(label);\r\n      this.#pressedController.observe(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    for (const label of this.labels) {\r\n      this.#hoverController.unobserve(label);\r\n      this.#pressedController.unobserve(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>\r\n      <div class=\"track\" aria-hidden=\"true\">\r\n        <div class=\"touch\" aria-hidden=\"true\"></div>\r\n        <div class=\"handle\">\r\n          <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n          <div class=\"base\">${this.#renderIcon()}</div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    return this.checked\r\n      ? html`<svg class=\"icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <path fill=\"currentColor\" d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"></path>\r\n        </svg>`\r\n      : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          <path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n        </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n    this.checked = !this.checked;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.checked = !this.checked;\r\n    }\r\n\r\n    // Prevent default avoids double-click in FireFox.\r\n    if (this.closest(\"label\")) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-switch\": M3eSwitchElement;\r\n  }\r\n}\r\n"],"names":["SwitchToken","unsafeCSS","DesignToken","color","onPrimaryContainer","surfaceContainerHighest","outline","shape","corner","full","primary","onPrimary","onSurface","surface","onSurfaceVariant","primaryContainer","SwitchHandleStyle","css","motion","duration","short4","easing","standard","spring","fastEffects","fastSpatial","SwitchIconStyle","SwitchStateLayerStyle","SwitchStyle","SwitchTrackStyle","M3eSwitchElement","Labelled","Dirty","Touched","ConstraintValidation","Checked","FormAssociated","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","super","_M3eSwitchElement_clickHandler","set","this","e","__classPrivateFieldGet","call","_M3eSwitchElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eSwitchElement_pressedController","PressedController","pressed","_track","classList","toggle","icons","value","isPressedKey","key","WeakMap","_M3eSwitchElement_instances","WeakSet","formValue","checked","connectedCallback","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eSwitchElement_renderIcon","defaultPrevented","dispatchEvent","Event","bubbles","composed","cancelable","closest","preventDefault","styles","__decorate","query","prototype","property","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"switch.min.js","sources":["../../src/switch/styles/SwitchToken.ts","../../src/switch/styles/SwitchHandleStyle.ts","../../src/switch/styles/SwitchIconStyle.ts","../../src/switch/styles/SwitchStateLayerStyle.ts","../../src/switch/styles/SwitchStyle.ts","../../src/switch/styles/SwitchTrackStyle.ts","../../src/switch/SwitchElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * Component design tokens that control `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchToken = {\r\n  selectedIconColor: unsafeCSS(`var(--m3e-switch-selected-icon-color, ${DesignToken.color.onPrimaryContainer})`),\r\n  selectedIconSize: unsafeCSS(\"var(--m3e-switch-selected-icon-size, 1rem)\"),\r\n  unselectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedIconSize: unsafeCSS(\"var(--m3e-switch-unselected-icon-size, 1rem)\"),\r\n  trackHeight: unsafeCSS(\"var(--m3e-switch-track-height, 2rem)\"),\r\n  trackWidth: unsafeCSS(\"var(--m3e-switch-track-width, 3.25rem)\"),\r\n  trackOutlineColor: unsafeCSS(`var(--m3e-switch-track-outline-color, ${DesignToken.color.outline})`),\r\n  trackOutlineWidth: unsafeCSS(\"var(--m3e-switch-track-outline-width, 2px)\"),\r\n  trackShape: unsafeCSS(`var(--m3e-switch-track-shape, ${DesignToken.shape.corner.full})`),\r\n  selectedTrackColor: unsafeCSS(`var(--m3e-switch-selected-track-color, ${DesignToken.color.primary})`),\r\n  unselectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHandleHeight: unsafeCSS(\"var(--m3e-switch-unselected-handle-height, 1rem)\"),\r\n  unselectedHandleWidth: unsafeCSS(\"var(--m3e-switch-unselected-handle-width, 1rem)\"),\r\n  withIconHandleHeight: unsafeCSS(\"var(--m3e-switch-with-icon-handle-height, 1.5rem)\"),\r\n  withIconHandleWidth: unsafeCSS(\"var(--m3e-switch-with-icon-handle-width, 1.5rem)\"),\r\n  selectedHandleHeight: unsafeCSS(\"var(--m3e-switch-selected-handle-height, 1.5rem)\"),\r\n  selectedHandleWidth: unsafeCSS(\"var(--m3e-switch-selected-handle-width, 1.5rem)\"),\r\n  pressedHandleHeight: unsafeCSS(\"var(--m3e-switch-pressed-handle-height, 1.75rem)\"),\r\n  pressedHandleWidth: unsafeCSS(\"var(--m3e-switch-pressed-handle-width, 1.75rem)\"),\r\n  handleShape: unsafeCSS(`var(--m3e-switch-handle-shape, ${DesignToken.shape.corner.full})`),\r\n  selectedHandleColor: unsafeCSS(`var(--m3e-switch-selected-handle-color, ${DesignToken.color.onPrimary})`),\r\n  unselectedHandleColor: unsafeCSS(`var(--m3e-switch-unselected-handle-color, ${DesignToken.color.outline})`),\r\n  stateLayerSize: unsafeCSS(\"var(--m3e-switch-state-layer-size, 2.5rem)\"),\r\n  stateLayerShape: unsafeCSS(`var(--m3e-switch-state-layer-shape, ${DesignToken.shape.corner.full})`),\r\n  disabledSelectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-icon-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledSelectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-icon-opacity, 38%)\"),\r\n  disabledUnselectedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  disabledUnselectedIconOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-icon-opacity, 38%)\"),\r\n  disabledTrackOpacity: unsafeCSS(\"var(--m3e-switch-disabled-track-opacity, 12%)\"),\r\n  disabledSelectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-track-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledUnselectedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  disabledUnselectedTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-track-outline-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  disabledUnselectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-unselected-handle-opacity, 38%)\"),\r\n  disabledSelectedHandleOpacity: unsafeCSS(\"var(--m3e-switch-disabled-selected-handle-opacity, 100%)\"),\r\n  disabledSelectedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-selected-handle-color, ${DesignToken.color.surface})`,\r\n  ),\r\n  disabledUnselectedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-disabled-unselected-handle-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  selectedHoverIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedHoverIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedHoverTrackColor: unsafeCSS(`var(--m3e-switch-selected-hover-track-color, ${DesignToken.color.primary})`),\r\n  selectedHoverStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-hover-state-layer-opacity, 8%)\"),\r\n  unselectedHoverTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHoverTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedHoverStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedHoverStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-hover-state-layer-opacity, 8%)\"),\r\n  selectedHoverHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-hover-handle-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedHoverHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-hover-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n  selectedFocusIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedFocusIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedFocusTrackColor: unsafeCSS(`var(--m3e-switch-selected-focus-track-color, ${DesignToken.color.primary})`),\r\n  selectedFocusStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-focus-state-layer-opacity, 10%)\"),\r\n  unselectedFocusTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedFocusTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedFocusStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedFocusStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-focus-state-layer-opacity, 10%)\"),\r\n  selectedFocusHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-focus-handle-color, ${DesignToken.color.primaryContainer})`,\r\n  ),\r\n  unselectedFocusHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-focus-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n  selectedPressedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-icon-color, ${DesignToken.color.onPrimaryContainer})`,\r\n  ),\r\n  unselectedPressedIconColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-icon-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  selectedPressedTrackColor: unsafeCSS(`var(--m3e-switch-selected-pressed-track-color, ${DesignToken.color.primary})`),\r\n  selectedPressedStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-state-layer-color, ${DesignToken.color.primary})`,\r\n  ),\r\n  selectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-selected-pressed-state-layer-opacity, 10%)\"),\r\n  unselectedPressedTrackColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-track-color, ${DesignToken.color.surfaceContainerHighest})`,\r\n  ),\r\n  unselectedPressedTrackOutlineColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-track-outline-color, ${DesignToken.color.outline})`,\r\n  ),\r\n  unselectedPressedStateLayerColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-state-layer-color, ${DesignToken.color.onSurface})`,\r\n  ),\r\n  unselectedPressedStateLayerOpacity: unsafeCSS(\"var(--m3e-switch-unselected-pressed-state-layer-opacity, 10%)\"),\r\n  selectedPressedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-selected-pressed-handle-color, ${DesignToken.color.primaryContainer})`,\r\n  ),\r\n  unselectedPressedHandleColor: unsafeCSS(\r\n    `var(--m3e-switch-unselected-pressed-handle-color, ${DesignToken.color.onSurfaceVariant})`,\r\n  ),\r\n} as const;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Handle styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchHandleStyle = css`\r\n  .handle {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    pointer-events: none;\r\n    transform-origin: center center;\r\n    border-radius: ${SwitchToken.handleShape};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n      transform var(--_switch-handle-effect),\r\n      width ${DesignToken.motion.spring.fastEffects},\r\n      height ${DesignToken.motion.spring.fastEffects}`,\r\n    )};\r\n  }\r\n  .track:not(.pressed) .handle {\r\n    --_switch-handle-effect: ${DesignToken.motion.spring.fastSpatial};\r\n  }\r\n  .track.pressed .handle {\r\n    --_switch-handle-effect: ${DesignToken.motion.spring.fastEffects};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    width: ${SwitchToken.withIconHandleWidth};\r\n    height: ${SwitchToken.withIconHandleHeight};\r\n  }\r\n  :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n    width: ${SwitchToken.unselectedHandleWidth};\r\n    height: ${SwitchToken.unselectedHandleHeight};\r\n  }\r\n  :host([checked]) .track:not(.pressed) .handle {\r\n    width: ${SwitchToken.selectedHandleWidth};\r\n    height: ${SwitchToken.selectedHandleHeight};\r\n  }\r\n  .track.pressed .handle {\r\n    width: ${SwitchToken.pressedHandleWidth};\r\n    height: ${SwitchToken.pressedHandleHeight};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedHoverHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.unselectedFocusHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n    background-color: ${SwitchToken.unselectedPressedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedHoverHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle {\r\n    background-color: ${SwitchToken.selectedFocusHandleColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n    background-color: ${SwitchToken.selectedPressedHandleColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedHandleColor} ${SwitchToken.disabledUnselectedHandleOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .handle {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedHandleColor} ${SwitchToken.disabledSelectedHandleOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl))[checked]) .track:not(.pressed) .handle {\r\n    transform: translateX(\r\n      calc(${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2))\r\n    );\r\n  }\r\n  :host(:dir(rtl)[checked]) .track:not(.pressed) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        0px - calc(\r\n            ${SwitchToken.trackWidth} - ${SwitchToken.selectedHandleWidth} - calc(${SwitchToken.trackOutlineWidth} * 2)\r\n          )\r\n      )\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl))[checked]) .track.pressed .handle {\r\n    transform: translateX(\r\n      calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth})\r\n    );\r\n  }\r\n  :host(:dir(rtl)[checked]) .track.pressed .handle {\r\n    transform: translateX(\r\n      calc(0px - calc(${SwitchToken.trackWidth} - ${SwitchToken.pressedHandleWidth} - ${SwitchToken.trackOutlineWidth}))\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl)):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host(:not(:dir(rtl))[aria-disabled=\"true\"]:not([checked])) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        ${SwitchToken.trackOutlineWidth} + calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n      )\r\n    );\r\n  }\r\n  :host(:dir(rtl):not([checked]):not([icons=\"both\"])) .track:not(.pressed) .handle,\r\n  :host(:dir(rtl)[aria-disabled=\"true\"]:not([checked])) .handle {\r\n    transform: translateX(\r\n      calc(\r\n        0px - calc(\r\n            ${SwitchToken.trackOutlineWidth} +\r\n              calc(${SwitchToken.pressedHandleWidth} - ${SwitchToken.withIconHandleWidth})\r\n          )\r\n      )\r\n    );\r\n  }\r\n  :host(:not(:dir(rtl)):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    transform: translateX(${SwitchToken.trackOutlineWidth});\r\n  }\r\n  :host(:dir(rtl):not([aria-disabled=\"true\"]):not([checked])[icons=\"both\"]) .track:not(.pressed) .handle {\r\n    transform: translateX(calc(0px - ${SwitchToken.trackOutlineWidth}));\r\n  }\r\n  @media (forced-colors: active) {\r\n    .handle {\r\n      transition: ${unsafeCSS(\r\n        `transform var(--_switch-handle-effect),\r\n      width ${DesignToken.motion.spring.fastEffects},\r\n      height ${DesignToken.motion.spring.fastEffects}`,\r\n      )};\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .handle {\r\n      background-color: ButtonText;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .handle {\r\n      background-color: GrayText;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .handle,\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .handle {\r\n      background-color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .handle {\r\n      background-color: Canvas;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .handle {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Icon styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchIconStyle = css`\r\n  :host([icons=\"none\"]) .icon,\r\n  :host([icons=\"selected\"]:not([checked])) .icon,\r\n  :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n    display: none;\r\n  }\r\n  .icon {\r\n    width: 1em;\r\n    transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n  }\r\n  :host(:not([checked])) .icon {\r\n    font-size: ${SwitchToken.unselectedIconSize};\r\n  }\r\n  :host([checked]) .icon {\r\n    font-size: ${SwitchToken.selectedIconSize};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedHoverIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.unselectedFocusIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n    color: ${SwitchToken.unselectedPressedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedHoverIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon {\r\n    color: ${SwitchToken.selectedFocusIconColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n    color: ${SwitchToken.selectedPressedIconColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedIconColor} ${SwitchToken.disabledUnselectedIconOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .icon {\r\n    color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedIconColor} ${SwitchToken.disabledSelectedIconOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  @media (forced-colors: active) {\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed .icon {\r\n      color: Canvas;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) .icon,\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed .icon {\r\n      color: CanvasText;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .icon {\r\n      color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .icon {\r\n      color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .icon {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * State layer styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStateLayerStyle = css`\r\n  .state-layer {\r\n    width: ${SwitchToken.stateLayerSize};\r\n    height: ${SwitchToken.stateLayerSize};\r\n    border-radius: ${SwitchToken.stateLayerShape};\r\n    transition: ${unsafeCSS(\r\n      `top ${DesignToken.motion.spring.fastEffects},\r\n          left ${DesignToken.motion.spring.fastEffects},\r\n          right ${DesignToken.motion.spring.fastEffects}`,\r\n    )};\r\n  }\r\n  :host(:not([checked])[icons=\"both\"]) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.withIconHandleHeight}) / 2));\r\n  }\r\n  :host(:not([checked]):not([icons=\"both\"])) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(\r\n      0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleWidth}) / 2)\r\n    );\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.unselectedHandleHeight}) / 2));\r\n  }\r\n  :host([checked]) .track:not(.pressed) .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.selectedHandleHeight}) / 2));\r\n  }\r\n  .track.pressed .state-layer {\r\n    inset-inline-start: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n    top: calc(0px - calc(calc(${SwitchToken.stateLayerSize} - ${SwitchToken.pressedHandleWidth}) / 2));\r\n  }\r\n  :host(:not([checked])) .state-layer {\r\n    --m3e-state-layer-hover-color: ${SwitchToken.unselectedHoverStateLayerColor};\r\n    --m3e-state-layer-hover-opacity: ${SwitchToken.unselectedHoverStateLayerOpacity};\r\n    --m3e-state-layer-focus-color: ${SwitchToken.unselectedFocusStateLayerColor};\r\n    --m3e-state-layer-focus-opacity: ${SwitchToken.unselectedFocusStateLayerOpacity};\r\n  }\r\n  :host([checked]) .state-layer {\r\n    --m3e-state-layer-hover-color: ${SwitchToken.selectedHoverStateLayerColor};\r\n    --m3e-state-layer-hover-opacity: ${SwitchToken.selectedHoverStateLayerOpacity};\r\n    --m3e-state-layer-focus-color: ${SwitchToken.selectedFocusStateLayerColor};\r\n    --m3e-state-layer-focus-opacity: ${SwitchToken.selectedFocusStateLayerOpacity};\r\n  }\r\n`;\r\n","import { css } from \"lit\";\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Baseline styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchStyle = css`\r\n  :host {\r\n    display: inline-block;\r\n    position: relative;\r\n    outline: none;\r\n    height: fit-content;\r\n    width: fit-content;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])) {\r\n    cursor: pointer;\r\n  }\r\n  .focus-ring {\r\n    border-radius: ${SwitchToken.trackShape};\r\n  }\r\n  .touch {\r\n    position: absolute;\r\n    height: 3rem;\r\n    left: 0;\r\n    right: 0;\r\n  }\r\n  .base {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n`;\r\n","import { css, unsafeCSS } from \"lit\";\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SwitchToken } from \"./SwitchToken\";\r\n\r\n/**\r\n * Track styles for `M3eSwitchElement`.\r\n * @internal\r\n */\r\nexport const SwitchTrackStyle = css`\r\n  .track {\r\n    display: flex;\r\n    align-items: center;\r\n    position: relative;\r\n    box-sizing: border-box;\r\n    border-radius: ${SwitchToken.trackShape};\r\n    width: ${SwitchToken.trackWidth};\r\n    height: ${SwitchToken.trackHeight};\r\n    transition: ${unsafeCSS(\r\n      `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n    )};\r\n  }\r\n  :host(:not([checked])) .track {\r\n    border-width: ${SwitchToken.trackOutlineWidth};\r\n    border-style: solid;\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.trackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.unselectedHoverTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedHoverTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed) {\r\n    border-color: ${SwitchToken.unselectedFocusTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedFocusTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n    border-color: ${SwitchToken.unselectedPressedTrackOutlineColor};\r\n    background-color: ${SwitchToken.unselectedPressedTrackColor};\r\n  }\r\n  :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n    border-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedTrackOutlineColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledUnselectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedHoverTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed) {\r\n    background-color: ${SwitchToken.selectedFocusTrackColor};\r\n  }\r\n  :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n    background-color: ${SwitchToken.selectedPressedTrackColor};\r\n  }\r\n  :host([aria-disabled=\"true\"][checked]) .track {\r\n    background-color: color-mix(\r\n      in srgb,\r\n      ${SwitchToken.disabledSelectedTrackColor} ${SwitchToken.disabledTrackOpacity},\r\n      transparent\r\n    );\r\n  }\r\n  @media (forced-colors: active) {\r\n    .track {\r\n      transition: none;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):not(:focus):hover) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked]):focus) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"]):not([checked])) .track.pressed {\r\n      border-color: ButtonText;\r\n      background-color: Canvas;\r\n    }\r\n    :host([aria-disabled=\"true\"]:not([checked])) .track {\r\n      border-color: GrayText;\r\n      background-color: Canvas;\r\n    }\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):not(:hover)) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]:not(:focus):hover) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]:focus) .track:not(.pressed),\r\n    :host(:not([aria-disabled=\"true\"])[checked]) .track.pressed {\r\n      background-color: ButtonText;\r\n    }\r\n    :host([aria-disabled=\"true\"][checked]) .track {\r\n      background-color: GrayText;\r\n    }\r\n  }\r\n  @media (prefers-reduced-motion) {\r\n    .track {\r\n      transition: none;\r\n    }\r\n  }\r\n`;\r\n","import { CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  Labelled,\r\n  Checked,\r\n  ConstraintValidation,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Touched,\r\n  AttachInternals,\r\n  Role,\r\n  M3eFocusRingElement,\r\n  M3eStateLayerElement,\r\n  Focusable,\r\n  KeyboardClick,\r\n  PressedController,\r\n  HoverController,\r\n  customElement,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SwitchHandleStyle, SwitchIconStyle, SwitchStateLayerStyle, SwitchStyle, SwitchTrackStyle } from \"./styles\";\r\n\r\nimport { SwitchIcons } from \"./SwitchIcons\";\r\n\r\n/**\r\n * An on/off control that can be toggled by clicking.\r\n *\r\n * @description\r\n * The `m3e-switch` component is a semantic, accessible toggle control that reflects a binary state.\r\n * Designed according to Material Design 3 guidelines, it supports shape transitions, and adaptive color\r\n * theming across selected, unselected, and disabled states. The component responds to user interaction\r\n * with smooth motion and expressive feedback. It supports optional icons (`none`, `selected`, or `both`)\r\n * and integrates with form-associated behavior, emitting `input` and `change` events when toggled.\r\n *\r\n * @example\r\n * The following example illustrates a switch wrapped by a `label`.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch></m3e-switch></label>\r\n * ```\r\n *\r\n * @example\r\n * By default, icons are not presented. Use the `icons` attribute to control which icons to show. The next\r\n * example illustrates showing both the unselected and selected icons.\r\n *\r\n * ```html\r\n * <label>Switch label&nbsp;<m3e-switch icons=\"both\"></m3e-switch></label>\r\n * ```\r\n *\r\n * @tag m3e-switch\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr icons - The icons to present.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n * @attr value - A string representing the value of the switch.\r\n *\r\n * @fires beforeinput - Dispatched before the checked state changes.\r\n * @fires input - Dispatched when the checked state changes.\r\n * @fires change - Dispatched when the checked state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-switch-selected-icon-color - Color of the icon when the switch is selected.\r\n * @cssprop --m3e-switch-selected-icon-size - Size of the icon in the selected state.\r\n * @cssprop --m3e-switch-unselected-icon-color - Color of the icon when the switch is unselected.\r\n * @cssprop --m3e-switch-unselected-icon-size - Size of the icon in the unselected state.\r\n * @cssprop --m3e-switch-track-height - Height of the switch track.\r\n * @cssprop --m3e-switch-track-width - Width of the switch track.\r\n * @cssprop --m3e-switch-track-outline-color - Color of the track's outline.\r\n * @cssprop --m3e-switch-track-outline-width - Thickness of the track's outline.\r\n * @cssprop --m3e-switch-track-shape - Corner shape of the track.\r\n * @cssprop --m3e-switch-selected-track-color - Track color when selected.\r\n * @cssprop --m3e-switch-unselected-track-color - Track color when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-height - Height of the handle when unselected.\r\n * @cssprop --m3e-switch-unselected-handle-width - Width of the handle when unselected.\r\n * @cssprop --m3e-switch-with-icon-handle-height - Height of the handle when icons are present.\r\n * @cssprop --m3e-switch-with-icon-handle-width - Width of the handle when icons are present.\r\n * @cssprop --m3e-switch-selected-handle-height - Height of the handle when selected.\r\n * @cssprop --m3e-switch-selected-handle-width - Width of the handle when selected.\r\n * @cssprop --m3e-switch-pressed-handle-height - Height of the handle during press.\r\n * @cssprop --m3e-switch-pressed-handle-width - Width of the handle during press.\r\n * @cssprop --m3e-switch-handle-shape - Corner shape of the handle.\r\n * @cssprop --m3e-switch-selected-handle-color - Handle color when selected.\r\n * @cssprop --m3e-switch-unselected-handle-color - Handle color when unselected.\r\n * @cssprop --m3e-switch-state-layer-size - Diameter of the state layer overlay.\r\n * @cssprop --m3e-switch-state-layer-shape - Corner shape of the state layer.\r\n * @cssprop --m3e-switch-disabled-selected-icon-color - Icon color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-icon-opacity - Icon opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-color - Icon color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-icon-opacity - Icon opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-track-opacity - Track opacity when disabled.\r\n * @cssprop --m3e-switch-disabled-selected-track-color - Track color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-color - Track color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-track-outline-color - Outline color when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-opacity - Handle opacity when unselected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-opacity - Handle opacity when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-selected-handle-color - Handle color when selected and disabled.\r\n * @cssprop --m3e-switch-disabled-unselected-handle-color - Handle color when unselected and disabled.\r\n * @cssprop --m3e-switch-selected-hover-icon-color - Icon color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-icon-color - Icon color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-track-color - Track color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-color - State layer color when selected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-state-layer-opacity - State layer opacity when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-color - Track color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-track-outline-color - Outline color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-color - State layer color when unselected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-state-layer-opacity - State layer opacity when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-hover-handle-color - Handle color when selected and hovered.\r\n * @cssprop --m3e-switch-unselected-hover-handle-color - Handle color when unselected and hovered.\r\n * @cssprop --m3e-switch-selected-focus-icon-color - Icon color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-icon-color - Icon color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-track-color - Track color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-color - State layer color when selected and focused.\r\n * @cssprop --m3e-switch-selected-focus-state-layer-opacity - State layer opacity when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-color - Track color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-track-outline-color - Outline color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-color - State layer color when unselected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-state-layer-opacity - State layer opacity when unselected and focused.\r\n * @cssprop --m3e-switch-selected-focus-handle-color - Handle color when selected and focused.\r\n * @cssprop --m3e-switch-unselected-focus-handle-color - Handle color when unselected and focused.\r\n * @cssprop --m3e-switch-selected-pressed-icon-color - Icon color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-icon-color - Icon color when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-track-color - Track color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-color - State layer color when selected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-state-layer-opacity - State layer opacity when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-color - Track color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-track-outline-color - Outline color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-color - State layer color when unselected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-state-layer-opacity - State layer opacity when unselected and pressed.\r\n * @cssprop --m3e-switch-selected-pressed-handle-color - Handle color when selected and pressed.\r\n * @cssprop --m3e-switch-unselected-pressed-handle-color - Handle color when unselected and pressed.\r\n */\r\n@customElement(\"m3e-switch\")\r\nexport class M3eSwitchElement extends Labelled(\r\n  Dirty(\r\n    Touched(\r\n      ConstraintValidation(\r\n        Checked(FormAssociated(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"switch\"))))))),\r\n      ),\r\n    ),\r\n  ),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = [\r\n    SwitchStyle,\r\n    SwitchStateLayerStyle,\r\n    SwitchTrackStyle,\r\n    SwitchHandleStyle,\r\n    SwitchIconStyle,\r\n  ];\r\n\r\n  /** @private */ @query(\".track\") private readonly _track?: HTMLElement;\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @private */ readonly #hoverController = new HoverController(this, {\r\n    target: null,\r\n    callback: (hovering) => {\r\n      if (this.disabled) return;\r\n      if (hovering) {\r\n        this._stateLayer?.show(\"hover\");\r\n      } else {\r\n        this._stateLayer?.hide(\"hover\");\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n  });\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new PressedController(this, {\r\n      isPressedKey: (key) => key === \" \",\r\n      callback: (pressed) => this._track?.classList.toggle(\"pressed\", pressed && !this.disabled),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * The icons to present.\r\n   * @default \"none\"\r\n   */\r\n  @property({ reflect: true }) icons: SwitchIcons = \"none\";\r\n\r\n  /**\r\n   * A string representing the value of the switch.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc @private */\r\n  override get [formValue](): string | File | FormData | null {\r\n    return this.checked && !this.disabled ? this.value : null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n    for (const label of this.labels) {\r\n      this.#hoverController.observe(label);\r\n      this.#pressedController.observe(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n    for (const label of this.labels) {\r\n      this.#hoverController.unobserve(label);\r\n      this.#pressedController.unobserve(label);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>\r\n      <div class=\"track\" aria-hidden=\"true\">\r\n        <div class=\"touch\" aria-hidden=\"true\"></div>\r\n        <div class=\"handle\">\r\n          <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n          <div class=\"base\">${this.#renderIcon()}</div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderIcon(): unknown {\r\n    return this.checked\r\n      ? html`<svg class=\"icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n          <path fill=\"currentColor\" d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\"></path>\r\n        </svg>`\r\n      : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n          <path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n        </svg>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.checked = !this.checked;\r\n\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n\r\n    // Prevent default avoids double-click in FireFox.\r\n    if (this.closest(\"label\")) {\r\n      e.preventDefault();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-switch\": M3eSwitchElement;\r\n  }\r\n}\r\n"],"names":["SwitchToken","unsafeCSS","DesignToken","color","onPrimaryContainer","surfaceContainerHighest","outline","shape","corner","full","primary","onPrimary","onSurface","surface","onSurfaceVariant","primaryContainer","SwitchHandleStyle","css","motion","duration","short4","easing","standard","spring","fastEffects","fastSpatial","SwitchIconStyle","SwitchStateLayerStyle","SwitchStyle","SwitchTrackStyle","M3eSwitchElement","Labelled","Dirty","Touched","ConstraintValidation","Checked","FormAssociated","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","super","_M3eSwitchElement_clickHandler","set","this","e","__classPrivateFieldGet","call","_M3eSwitchElement_hoverController","HoverController","target","callback","hovering","disabled","_stateLayer","show","hide","_M3eSwitchElement_pressedController","PressedController","pressed","_track","classList","toggle","icons","value","isPressedKey","key","WeakMap","_M3eSwitchElement_instances","WeakSet","formValue","checked","connectedCallback","addEventListener","label","labels","observe","disconnectedCallback","removeEventListener","unobserve","firstUpdated","_changedProperties","_focusRing","forEach","x","attach","render","html","_M3eSwitchElement_renderIcon","defaultPrevented","dispatchEvent","Event","bubbles","cancelable","closest","preventDefault","styles","__decorate","query","prototype","property","reflect","customElement"],"mappings":";;;;;oeAQO,MAAMA,EACQC,EAAU,yCAAyCC,EAAYC,MAAMC,uBAD7EJ,EAEOC,EAAU,8CAFjBD,EAGUC,EACnB,2CAA2CC,EAAYC,MAAME,4BAJpDL,EAMSC,EAAU,gDANnBD,EAOEC,EAAU,wCAPZD,EAQCC,EAAU,0CARXD,EASQC,EAAU,yCAAyCC,EAAYC,MAAMG,YAT7EN,EAUQC,EAAU,8CAVlBD,EAWCC,EAAU,iCAAiCC,EAAYK,MAAMC,OAAOC,SAXrET,EAYSC,EAAU,0CAA0CC,EAAYC,MAAMO,YAZ/EV,EAaWC,EACpB,4CAA4CC,EAAYC,MAAME,4BAdrDL,EAgBaC,EAAU,oDAhBvBD,EAiBYC,EAAU,mDAjBtBD,EAkBWC,EAAU,qDAlBrBD,EAmBUC,EAAU,oDAnBpBD,EAoBWC,EAAU,oDApBrBD,EAqBUC,EAAU,mDArBpBD,EAsBUC,EAAU,oDAtBpBD,EAuBSC,EAAU,mDAvBnBD,EAwBEC,EAAU,kCAAkCC,EAAYK,MAAMC,OAAOC,SAxBvET,EAyBUC,EAAU,2CAA2CC,EAAYC,MAAMQ,cAzBjFX,EA0BYC,EAAU,6CAA6CC,EAAYC,MAAMG,YA1BrFN,EA2BKC,EAAU,8CA3BfD,EA4BMC,EAAU,uCAAuCC,EAAYK,MAAMC,OAAOC,SA5BhFT,EA6BgBC,EACzB,kDAAkDC,EAAYC,MAAMS,cA9B3DZ,EAgCkBC,EAAU,yDAhC5BD,EAiCkBC,EAC3B,oDAAoDC,EAAYC,MAAME,4BAlC7DL,EAoCoBC,EAAU,2DApC9BD,EAqCWC,EAAU,iDArCrBD,EAsCiBC,EAC1B,mDAAmDC,EAAYC,MAAMS,cAvC5DZ,GAyCmBC,EAC5B,qDAAqDC,EAAYC,MAAME,4BA1C9DL,GA4C0BC,EACnC,6DAA6DC,EAAYC,MAAMS,cA7CtEZ,GA+CsBC,EAAU,6DA/ChCD,GAgDoBC,EAAU,4DAhD9BD,GAiDkBC,EAC3B,oDAAoDC,EAAYC,MAAMU,YAlD7Db,GAoDoBC,EAC7B,sDAAsDC,EAAYC,MAAMS,cArD/DZ,GAuDaC,EACtB,+CAA+CC,EAAYC,MAAMC,uBAxDxDJ,GA0DeC,EACxB,iDAAiDC,EAAYC,MAAME,4BA3D1DL,GA6DcC,EAAU,gDAAgDC,EAAYC,MAAMO,YA7D1FV,GA8DmBC,EAC5B,sDAAsDC,EAAYC,MAAMO,YA/D/DV,GAiEqBC,EAAU,4DAjE/BD,GAkEgBC,EACzB,kDAAkDC,EAAYC,MAAME,4BAnE3DL,GAqEuBC,EAChC,0DAA0DC,EAAYC,MAAMG,YAtEnEN,GAwEqBC,EAC9B,wDAAwDC,EAAYC,MAAMS,cAzEjEZ,GA2EuBC,EAAU,8DA3EjCD,GA4EeC,EACxB,iDAAiDC,EAAYC,MAAME,4BA7E1DL,GA+EiBC,EAC1B,mDAAmDC,EAAYC,MAAMW,qBAhF5Dd,GAkFaC,EACtB,+CAA+CC,EAAYC,MAAMC,uBAnFxDJ,GAqFeC,EACxB,iDAAiDC,EAAYC,MAAME,4BAtF1DL,GAwFcC,EAAU,gDAAgDC,EAAYC,MAAMO,YAxF1FV,GAyFmBC,EAC5B,sDAAsDC,EAAYC,MAAMO,YA1F/DV,GA4FqBC,EAAU,6DA5F/BD,GA6FgBC,EACzB,kDAAkDC,EAAYC,MAAME,4BA9F3DL,GAgGuBC,EAChC,0DAA0DC,EAAYC,MAAMG,YAjGnEN,GAmGqBC,EAC9B,wDAAwDC,EAAYC,MAAMS,cApGjEZ,GAsGuBC,EAAU,+DAtGjCD,GAuGeC,EACxB,iDAAiDC,EAAYC,MAAMY,qBAxG1Df,GA0GiBC,EAC1B,mDAAmDC,EAAYC,MAAMW,qBA3G5Dd,GA6GeC,EACxB,iDAAiDC,EAAYC,MAAMC,uBA9G1DJ,GAgHiBC,EAC1B,mDAAmDC,EAAYC,MAAME,4BAjH5DL,GAmHgBC,EAAU,kDAAkDC,EAAYC,MAAMO,YAnH9FV,IAoHqBC,EAC9B,wDAAwDC,EAAYC,MAAMO,YAE1CT,EAAU,+DACfA,EAC3B,oDAAoDC,EAAYC,MAAME,6BAzH7DL,GA2HyBC,EAClC,4DAA4DC,EAAYC,MAAMG,YA5HrEN,IA8HuBC,EAChC,0DAA0DC,EAAYC,MAAMS,cAE1CX,EAAU,iEAClBA,EAC1B,mDAAmDC,EAAYC,MAAMY,sBAnI5Df,GAqImBC,EAC5B,qDAAqDC,EAAYC,MAAMW,qBCrI9DE,GAAoBC,CAAG,oKAQfjB,kBACHC,EACZ,oBAAoBC,EAAYgB,OAAOC,SAASC,UAAUlB,EAAYgB,OAAOG,OAAOC,yEAE5EpB,EAAYgB,OAAOK,OAAOC,8BACzBtB,EAAYgB,OAAOK,OAAOC,6EAIVtB,EAAYgB,OAAOK,OAAOE,oEAG1BvB,EAAYgB,OAAOK,OAAOC,yHAG5CxB,cACCA,+IAIDA,cACCA,+DAGDA,cACCA,wCAGDA,cACCA,oIAGUA,8HAGAA,mHAGAA,uGAGAA,+HAGAA,wHAGAA,6GAGAA,iGAGAA,sGAKhBA,MAA6CA,+GAO7CA,MAA2CA,mHAMtCA,OAA4BA,YAA0CA,kHAOrEA,OAA4BA,YAA0CA,wGAOvEA,OAA4BA,OAAoCA,qGAKrDA,OAA4BA,OAAoCA,uMAO9EA,YAAwCA,OAAoCA,wMASxEA,YACOA,OAAoCA,oJAM7BA,mJAGWA,iEAInBC,EACZ,wDACMC,EAAYgB,OAAOK,OAAOC,8BACzBtB,EAAYgB,OAAOK,OAAOC,4/BCnI5BE,GAAkBT,CAAG,sLAQhBhB,EAAU,SAASC,EAAYgB,OAAOC,SAASC,UAAUlB,EAAYgB,OAAOG,OAAOC,4DAGpFtB,4CAGAA,uHAGJA,iHAGAA,sGAGAA,0FAGAA,kHAGAA,2GAGAA,gGAGAA,oFAGAA,yFAKLA,KAA2CA,iGAO3CA,KAAyCA,69BCjDpC2B,GAAwBV,CAAG,yBAE3BjB,cACCA,qBACOA,kBACHC,EACZ,OAAOC,EAAYgB,OAAOK,OAAOC,gCACtBtB,EAAYgB,OAAOK,OAAOC,iCACzBtB,EAAYgB,OAAOK,OAAOC,uIAIGxB,OAAgCA,uCAC/CA,OAAgCA,wIAIxCA,OAAgCA,wCAExBA,OAAgCA,6GAGjBA,OAAgCA,uCAC/CA,OAAgCA,sFAGjBA,OAAgCA,uCAC/CA,OAAgCA,oFAG3BA,wCACEA,sCACFA,wCACEA,wEAGFA,wCACEA,sCACFA,wCACEA,QC1C1B4B,GAAcX,CAAG,wQAcTjB,8ICZR6B,GAAmBZ,CAAG,2GAMdjB,aACRA,cACCA,kBACIC,EACZ,oBAAoBC,EAAYgB,OAAOC,SAASC,UAAUlB,EAAYgB,OAAOG,OAAOC,gEAItEtB,6IAIAA,wBACIA,kHAGJA,yBACIA,uGAGJA,yBACIA,2FAGJA,yBACIA,iGAKhBA,MAAmDA,2DAKnDA,MAA4CA,qIAK5BA,gHAGAA,qGAGAA,yFAGAA,+FAKhBA,KAA0CA,ikCCmE3C,IAAM8B,GAAN,cAA+BC,EACpCC,EACEC,EACEC,EACEC,EAAQC,EAAeC,EAAcC,EAAUC,EAASC,EAAgBC,EAAKC,EAAY,qBAoC/FC,WAAAA,GACEC,qBApBuBC,GAAAC,IAAAC,KAAiBC,GAAaC,EAAAF,gBAAiBG,KAAjBH,KAAkBC,IAEhDG,GAAAL,IAAAC,KAAmB,IAAIK,EAAgBL,KAAM,CACpEM,OAAQ,KACRC,SAAWC,IACLR,KAAKS,WACLD,EACFR,KAAKU,aAAaC,KAAK,SAEvBX,KAAKU,aAAaE,KAAK,cAKJC,GAAAd,IAAAC,KAAqB,IAAIc,EAAkBd,KAAM,CACxEM,OAAQ,KACRC,SAAWQ,GAAYf,KAAKgB,QAAQC,UAAUC,OAAO,UAAWH,IAAYf,KAAKS,aAgBtDT,KAAAmB,MAAqB,OAMtCnB,KAAAoB,MAAQ,KAhBlB,IAAIN,EAAkBd,KAAM,CAC1BqB,aAAeC,GAAgB,MAARA,EACvBf,SAAWQ,GAAYf,KAAKgB,QAAQC,UAAUC,OAAO,UAAWH,IAAYf,KAAKS,WAErF,CAeA,KAAaX,GAAA,IAAAyB,QAAAnB,GAAA,IAAAmB,QAAAV,GAAA,IAAAU,QAAAC,GAAA,IAAAC,QAACC,MACZ,OAAO1B,KAAK2B,UAAY3B,KAAKS,SAAWT,KAAKoB,MAAQ,IACvD,CAGSQ,iBAAAA,GACP/B,MAAM+B,oBAEN5B,KAAK6B,iBAAiB,QAAS3B,EAAAF,KAAIF,GAAA,MACnC,IAAK,MAAMgC,KAAS9B,KAAK+B,OACvB7B,EAAAF,KAAII,GAAA,KAAkB4B,QAAQF,GAC9B5B,EAAAF,KAAIa,GAAA,KAAoBmB,QAAQF,EAEpC,CAGSG,oBAAAA,GACPpC,MAAMoC,uBAENjC,KAAKkC,oBAAoB,QAAShC,EAAAF,KAAIF,GAAA,MACtC,IAAK,MAAMgC,KAAS9B,KAAK+B,OACvB7B,EAAAF,KAAII,GAAA,KAAkB+B,UAAUL,GAChC5B,EAAAF,KAAIa,GAAA,KAAoBsB,UAAUL,EAEtC,CAGmBM,YAAAA,CAAaC,GAC9BxC,MAAMuC,aAAaC,GACnB,CAACrC,KAAKsC,WAAYtC,KAAKU,aAAa6B,QAASC,GAAMA,GAAGC,OAAOzC,MAC/D,CAGmB0C,MAAAA,GACjB,OAAOC,CAAI,6MAI6C3C,KAAKS,iDACnCP,EAAAF,KAAIwB,GAAA,IAAAoB,IAAYzC,KAAhBH,yBAG5B,iBAIE,OAAOA,KAAK2B,QACRgB,CAAI,2KAGJA,CAAI,oLAGV,cAGa1C,GACPA,EAAE4C,mBAEF7C,KAAK8C,cAAc,IAAIC,MAAM,cAAe,CAAEC,SAAS,EAAMC,YAAY,OAC3EjD,KAAK2B,SAAW3B,KAAK2B,QAErB3B,KAAK8C,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,KACjDhD,KAAK8C,cAAc,IAAIC,MAAM,SAAU,CAAEC,SAAS,MAIhDhD,KAAKkD,QAAQ,UACfjD,EAAEkD,iBAEN,EA1HgBpE,GAAAqE,OAAyB,CACvCvE,GACAD,GACAE,GACAb,GACAU,IAGgD0E,EAAA,CAAjCC,EAAM,WAAgDvE,GAAAwE,UAAA,iBAChBF,EAAA,CAAtCC,EAAM,gBAAiEvE,GAAAwE,UAAA,qBAChCF,EAAA,CAAvCC,EAAM,iBAAoEvE,GAAAwE,UAAA,sBAiC9DF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAoC1E,GAAAwE,UAAA,aAAA,GAM7CF,EAAA,CAAXG,KAAwBzE,GAAAwE,UAAA,gBA3DdxE,GAAgBsE,EAAA,CAD5BK,EAAc,eACF3E"}

package/dist/tabs.js

@@ -46,9 +46,10 @@ var M3eTabElement_1;
  * @attr for - The identifier of the interactive control to which this element is attached.
  * @attr selected - Whether the element is selected.
  *
- * @fires input - Emitted when the selected state changes.
- * @fires change - Emitted when the selected state changes.
- * @fires click - Emitted when the element is clicked.
+ * @fires beforeinput - Dispatched before the selected state changes.
+ * @fires input - Dispatched when the selected state changes.
+ * @fires change - Dispatched when the selected state changes.
+ * @fires click - Dispatched when the element is clicked.
  *
  * @cssprop --m3e-tab-font-size - Font size for tab label.
  * @cssprop --m3e-tab-font-weight - Font weight for tab label.
@@ -125,18 +126,18 @@ _M3eTabElement_handleClick = function _M3eTabElement_handleClick(e) {
     e.stopImmediatePropagation();
   }
   if (e.defaultPrevented || this.selected) return;
-  this.selected = true;
-  if (this.dispatchEvent(new Event("input", {
+  if (this.dispatchEvent(new Event("beforeinput", {
     bubbles: true,
-    composed: true,
     cancelable: true
   }))) {
+    this.selected = true;
     this.closest("m3e-tabs")?.[selectionManager].notifySelectionChange(this);
+    this.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
     this.dispatchEvent(new Event("change", {
       bubbles: true
     }));
-  } else {
-    this.selected = false;
   }
 };
 /** The styles of the element. */
@@ -234,7 +235,9 @@ const MIN_PRIMARY_TAB_WIDTH = 24;
  * @attr stretch - Whether tabs are stretched to fill the header.
  * @attr variant - The appearance variant of the tabs.
  *
- * @fires change - Emitted when the selected tab changes.
+ * @fires beforeinput - Dispatched before the selected state of a tab changes.
+ * @fires input - Dispatched when the selected state of a tab changes.
+ * @fires change - Dispatched when the selected tab changes.
  *
  * @cssprop --m3e-tabs-paginator-button-icon-size - Overrides the icon size for paginator buttons.
  * @cssprop --m3e-tabs-active-indicator-color - Color of the active tab indicator.
@@ -287,7 +290,7 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals(LitElement) {
     new ResizeController(this, {
       skipInitial: true,
       callback: () => {
-        addCustomState(this, "-no-animate");
+        addCustomState(this, "--no-animate");
         __classPrivateFieldGet(this, _M3eTabsElement_instances, "m", _M3eTabsElement_updateInkBar).call(this);
       }
     });
@@ -317,7 +320,7 @@ let M3eTabsElement = class M3eTabsElement extends AttachInternals(LitElement) {
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    addCustomState(this, "-no-animate");
+    addCustomState(this, "--no-animate");
     __classPrivateFieldSet(this, _M3eTabsElement_directionalitySubscription, M3eDirectionality.observe(() => {
       this.requestUpdate();
       this[selectionManager].directionality = M3eDirectionality.current;
@@ -395,13 +398,13 @@ _M3eTabsElement_updateInkBar = function _M3eTabsElement_updateInkBar() {
   }
   this._tablist.style.setProperty("--_tabs-active-tab-position", `${left}px`);
   this._tablist.style.setProperty("--_tabs-active-tab-size", `${width}px`);
-  if (width > 0 && hasCustomState(this, "-no-animate")) {
-    setTimeout(() => deleteCustomState(this, "-no-animate"));
+  if (width > 0 && hasCustomState(this, "--no-animate")) {
+    setTimeout(() => deleteCustomState(this, "--no-animate"));
   }
 };
 /** The styles of the element. */
 M3eTabsElement.styles = css`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken.color.primary}); transition: ${unsafeCSS(`left var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},
-        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(:state(-no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
+        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${DesignToken.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${DesignToken.color.onSurface}; --_tab-selected-container-hover-color: ${DesignToken.color.onSurface}; --_tab-selected-container-focus-color: ${DesignToken.color.onSurface}; --_tab-selected-ripple-color: ${DesignToken.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(:is(:state(--no-animate), :--no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`;
 __decorate([query(".tablist")], M3eTabsElement.prototype, "_tablist", void 0);
 __decorate([state()], M3eTabsElement.prototype, "_selectedIndex", void 0);
 __decorate([property({

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../src/tabs/TabElement.ts","../../src/tabs/TabPanelElement.ts","../../src/tabs/TabsElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  Focusable,\r\n  HtmlFor,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { addAriaReferencedId, removeAriaReferencedId, selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * An interactive element that, when activated, presents an associated tab panel.\r\n *\r\n * @description\r\n * The `m3e-tab` component is an interactive control used within a tabbed interface to activate and\r\n * reveal an associated tab panel. It supports accessible labeling, optional iconography, and selection\r\n * state styling consistent with Material 3 guidance. Tabs may be disabled, selected, or linked to a\r\n * specific panel via the `for` attribute, enabling declarative control and semantic clarity.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tab\r\n *\r\n * @slot - Renders the label of the tab.\r\n * @slot icon - Renders an icon before the tab's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr selected - Whether the element is selected.\r\n *\r\n * @fires input - Emitted when the selected state changes.\r\n * @fires change - Emitted when the selected state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-tab-font-size - Font size for tab label.\r\n * @cssprop --m3e-tab-font-weight - Font weight for tab label.\r\n * @cssprop --m3e-tab-line-height - Line height for tab label.\r\n * @cssprop --m3e-tab-tracking - Letter spacing for tab label.\r\n * @cssprop --m3e-tab-padding-start - Padding on the inline start of the tab.\r\n * @cssprop --m3e-tab-padding-end - Padding on the inline end of the tab.\r\n * @cssprop --m3e-tab-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-tab-selected-color - Text color for selected tab.\r\n * @cssprop --m3e-tab-selected-container-hover-color - Hover state-layer color for selected tab.\r\n * @cssprop --m3e-tab-selected-container-focus-color - Focus state-layer color for selected tab.\r\n * @cssprop --m3e-tab-selected-ripple-color - Ripple color for selected tab.\r\n * @cssprop --m3e-tab-unselected-color - Text color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-container-hover-color - Hover state-layer color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-container-focus-color - Focus state-layer color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-ripple-color - Ripple color for unselected tab.\r\n * @cssprop --m3e-tab-disabled-color - Text color for disabled tab.\r\n * @cssprop --m3e-tab-disabled-opacity - Text opacity for disabled tab.\r\n * @cssprop --m3e-tab-spacing - Column gap between icon and label.\r\n * @cssprop --m3e-tab-icon-size - Font size for slotted icon.\r\n */\r\n@customElement(\"m3e-tab\")\r\nexport class M3eTabElement extends Selected(\r\n  HtmlFor(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"tab\"), true))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      height: calc(var(--_tab-height) + ${DesignToken.density.calc(-3)});\r\n      font-size: var(--m3e-tab-font-size, ${DesignToken.typescale.standard.title.small.fontSize});\r\n      font-weight: var(--m3e-tab-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight});\r\n      line-height: var(--m3e-tab-line-height, ${DesignToken.typescale.standard.title.small.lineHeight});\r\n      letter-spacing: var(--m3e-tab-tracking, ${DesignToken.typescale.standard.title.small.tracking});\r\n      flex-grow: var(--_tab-grow);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      padding-inline-start: var(--m3e-tab-padding-start, 1.5rem);\r\n      padding-inline-end: var(--m3e-tab-padding-end, 1.5rem);\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken.shape.corner.large});\r\n    }\r\n    :host([selected]:focus-within) .focus-ring {\r\n      top: var(--_tab-focus-ring-top-offset, 0);\r\n      bottom: var(--_tab-focus-ring-bottom-offset, 0);\r\n    }\r\n    :host([selected]:not(:disabled)) .base {\r\n      color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${DesignToken.color.primary}));\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-tab-selected-container-hover-color,\r\n        var(--_tab-selected-container-hover-color, ${DesignToken.color.primary})\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --_tab-selected-container-focus-color,\r\n        var(--m3e-tab-selected-container-focus-color, ${DesignToken.color.primary})\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --_tab-selected-ripple-color,\r\n        var(--m3e-tab-selected-ripple-color, ${DesignToken.color.primary})\r\n      );\r\n    }\r\n    :host(:not([selected]):not(:disabled)) .base {\r\n      color: var(--m3e-tab-unselected-color, ${DesignToken.color.onSurfaceVariant});\r\n      --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:disabled) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-tab-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .wrapper {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      white-space: nowrap;\r\n      flex-direction: var(--_tab-direction);\r\n      justify-content: center;\r\n      column-gap: var(--m3e-tab-spacing, 0.5rem);\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-tab-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([selected]:not(:disabled)) .base {\r\n        color: ButtonText;\r\n      }\r\n      :host(:not([selected]):not(:disabled)) .base {\r\n        color: ButtonText;\r\n      }\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @internal A reference to the element that wraps the label of the tab. */\r\n  @query(\".label\") readonly label!: HTMLElement;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    control.id = control.id || `m3e-tab-panel-${M3eTabElement.__nextId++}`;\r\n    addAriaReferencedId(this, \"aria-controls\", control.id);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control && this.control.id) {\r\n      removeAriaReferencedId(this, \"aria-controls\", this.control.id);\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" inward ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <slot name=\"icon\" aria-hidden=\"true\"></slot><span class=\"label\"><slot></slot></span>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (this.disabled) {\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n    }\r\n\r\n    if (e.defaultPrevented || this.selected) return;\r\n\r\n    this.selected = true;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.selected = false;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tab\": M3eTabElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A panel presented for a tab.\r\n *\r\n * @description\r\n * The `m3e-tab-panel` component represents the content region associated with a selected tab.\r\n * It is conditionally rendered based on tab selection and provides a structured surface for\r\n * displaying contextual information, media, or interactive elements. Panels are linked to their\r\n * corresponding tabs via the `for` attribute on `m3e-tab`, enabling declarative control and\r\n * accessible navigation consistent with Material 3 guidance.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tab-panel\r\n *\r\n * @slot - Renders the content of the panel.\r\n */\r\n@customElement(\"m3e-tab-panel\")\r\nexport class M3eTabPanelElement extends Role(LitElement, \"tabpanel\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      overflow-y: auto;\r\n      scrollbar-width: ${DesignToken.scrollbar.width};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.slot = \"panel\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot></slot>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tab-panel\": M3eTabPanelElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  hasCustomState,\r\n  ResizeController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/slide-group\";\r\n\r\nimport { TabVariant } from \"./TabVariant\";\r\nimport { M3eTabElement } from \"./TabElement\";\r\nimport { TabHeaderPosition } from \"./TabHeaderPosition\";\r\n\r\nconst MIN_PRIMARY_TAB_WIDTH = 24;\r\n\r\n/**\r\n * Organizes content into separate views where only one view can be visible at a time.\r\n *\r\n * @description\r\n * The `m3e-tabs` component provides a structured navigation surface for organizing content into distinct views,\r\n * where only one view is visible at a time. It supports scrollable tab headers with optional pagination,\r\n * accessible labeling for navigation controls, and configurable header positioning to suit various layout\r\n * contexts. Two visual variants are available: `primary`, which emphasizes active indicators and shape styling\r\n * for prominent navigation, and `secondary`, which offers a more subtle presentation with reduced indicator\r\n * thickness. Stretch behavior allows tabs to expand and align rhythmically within their container, consistent\r\n * with Material 3 guidance.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tabs\r\n *\r\n * @slot - Renders the tabs.\r\n * @slot panel - Renders the panels of the tabs.\r\n * @slot next-icon - Renders the icon to present for the next button used to paginate.\r\n * @slot prev-icon - Renders the icon to present for the previous button used to paginate.\r\n *\r\n * @attr disable-pagination - Whether scroll buttons are disabled.\r\n * @attr header-position - The position of the tab headers.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr stretch - Whether tabs are stretched to fill the header.\r\n * @attr variant - The appearance variant of the tabs.\r\n *\r\n * @fires change - Emitted when the selected tab changes.\r\n *\r\n * @cssprop --m3e-tabs-paginator-button-icon-size - Overrides the icon size for paginator buttons.\r\n * @cssprop --m3e-tabs-active-indicator-color - Color of the active tab indicator.\r\n * @cssprop --m3e-tabs-primary-before-active-indicator-shape - Border radius for active indicator when header is before and variant is primary.\r\n * @cssprop --m3e-tabs-primary-after-active-indicator-shape - Border radius for active indicator when header is after and variant is primary.\r\n * @cssprop --m3e-tabs-primary-active-indicator-inset - Inset for primary variant's active indicator.\r\n * @cssprop --m3e-tabs-primary-active-indicator-thickness - Thickness for primary variant's active indicator.\r\n * @cssprop --m3e-tabs-secondary-active-indicator-thickness - Thickness for secondary variant's active indicator.\r\n */\r\n@customElement(\"m3e-tabs\")\r\nexport class M3eTabsElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: relative;\r\n    }\r\n    .tablist {\r\n      position: relative;\r\n      box-sizing: border-box;\r\n      flex: none;\r\n    }\r\n    ::slotted(prev-icon),\r\n    ::slotted(next-icon),\r\n    .icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important;\r\n    }\r\n    .header {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n    .tabs {\r\n      display: flex;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .ink-bar {\r\n      box-sizing: border-box;\r\n      height: var(--_tabs-active-indicator-thickness);\r\n    }\r\n    .active-indicator {\r\n      position: relative;\r\n      height: var(--_tabs-active-indicator-thickness);\r\n      left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px));\r\n      width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2));\r\n      background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken.color.primary});\r\n      transition: ${unsafeCSS(\r\n        `left var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},\r\n        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host([header-position=\"after\"]) .header {\r\n      flex-direction: column-reverse;\r\n    }\r\n    :host([header-position=\"before\"]) .ink-bar {\r\n      margin-top: calc(0px - var(--_tabs-active-indicator-thickness));\r\n    }\r\n    :host([header-position=\"before\"]) .tablist {\r\n      --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host([header-position=\"after\"]) .ink-bar {\r\n      margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness));\r\n    }\r\n    :host([header-position=\"after\"]) .tablist {\r\n      --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host([header-position=\"before\"][variant=\"primary\"]) .active-indicator {\r\n      border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop});\r\n    }\r\n    :host([header-position=\"after\"][variant=\"primary\"]) .active-indicator {\r\n      border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom});\r\n    }\r\n    .tabs {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"primary\"]) .tablist {\r\n      --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem);\r\n      --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px);\r\n      --_tab-height: 4rem;\r\n    }\r\n    :host([header-position=\"before\"]) .tablist {\r\n      --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px);\r\n    }\r\n    :host([header-position=\"after\"]) .tablist {\r\n      --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px);\r\n    }\r\n    :host([header-position=\"before\"][variant=\"primary\"]) .tablist {\r\n      --_tab-direction: column;\r\n    }\r\n    :host([header-position=\"after\"][variant=\"primary\"]) .tablist {\r\n      --_tab-direction: column-reverse;\r\n    }\r\n    :host([variant=\"secondary\"]) .tablist {\r\n      --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px);\r\n      --_tab-height: 3rem;\r\n      --_tab-selected-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-container-hover-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-container-focus-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-ripple-color: ${DesignToken.color.onSurface};\r\n    }\r\n    :host([stretch]) .header {\r\n      width: 100%;\r\n      --_tab-grow: 1;\r\n    }\r\n    :host(:state(-no-animate)) .active-indicator {\r\n      transition: none;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .active-indicator {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .active-indicator {\r\n        background-color: ButtonText;\r\n        --m3e-divider-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ @query(\".tablist\") private readonly _tablist!: HTMLElement;\r\n  /** @private */ @state() _selectedIndex: number | null = null;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eTabElement>()\r\n    .onSelectedItemsChange(() => this.#handleSelectedChange())\r\n    .withHomeAndEnd()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  constructor() {\r\n    super();\r\n    new ResizeController(this, {\r\n      skipInitial: true,\r\n      callback: () => {\r\n        addCustomState(this, \"-no-animate\");\r\n        this.#updateInkBar();\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Whether scroll buttons are disabled.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-pagination\", type: Boolean }) disablePagination = false;\r\n\r\n  /**\r\n   * The position of the tab headers.\r\n   * @default \"before\"\r\n   */\r\n  @property({ attribute: \"header-position\", reflect: true }) headerPosition: TabHeaderPosition = \"before\";\r\n\r\n  /**\r\n   * The appearance variant of the tabs.\r\n   * @default \"secondary\"\r\n   */\r\n  @property({ reflect: true }) variant: TabVariant = \"secondary\";\r\n\r\n  /**\r\n   * Whether tabs are stretched to fill the header.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) stretch = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous page.\r\n   * @default \"Previous page\"\r\n   */\r\n  @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next page.\r\n   * @default \"Next page\"\r\n   */\r\n  @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n  /** The tabs. */\r\n  get tabs(): readonly M3eTabElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected tab. */\r\n  get selectedTab(): M3eTabElement | null {\r\n    return this._selectedIndex !== null ? (this.tabs[this._selectedIndex] ?? null) : null;\r\n  }\r\n\r\n  /** The zero-based index of the selected tab. */\r\n  get selectedIndex(): number {\r\n    return this._selectedIndex ?? -1;\r\n  }\r\n  set selectedIndex(value: number) {\r\n    if (value >= 0 && value < this.tabs.length) {\r\n      this.tabs[value].selected = true;\r\n    } else {\r\n      const selectedTab = this.selectedTab;\r\n      if (selectedTab) {\r\n        selectedTab.selected = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    addCustomState(this, \"-no-animate\");\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.requestUpdate();\r\n      this[selectionManager].directionality = M3eDirectionality.current;\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if ((_changedProperties.has(\"variant\") || _changedProperties.has(\"stretch\")) && this._selectedIndex !== null) {\r\n      this.#updateInkBar();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    let panelIndex: number | undefined;\r\n    if (this.selectedTab?.control) {\r\n      panelIndex = [...this.querySelectorAll(\"[slot='panel']\")].indexOf(this.selectedTab.control);\r\n      if (panelIndex === -1) {\r\n        panelIndex = undefined;\r\n      }\r\n    }\r\n\r\n    return html` ${this.headerPosition === \"before\" ? this.#renderHeader() : nothing}\r\n      <m3e-slide class=\"tabs\" selected-index=\"${ifDefined(panelIndex)}\">\r\n        <slot name=\"panel\"></slot>\r\n      </m3e-slide>\r\n      ${this.headerPosition === \"after\" ? this.#renderHeader() : nothing}`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderHeader(): unknown {\r\n    return html`<m3e-slide-group\r\n      class=\"tablist\"\r\n      threshold=\"8\"\r\n      previous-page-label=\"${this.previousPageLabel}\"\r\n      next-page-label=\"${this.nextPageLabel}\"\r\n      ?disabled=\"${this.disablePagination}\"\r\n    >\r\n      <slot name=\"prev-icon\" slot=\"prev-icon\">\r\n        ${M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"prev icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"next icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`}\r\n      </slot>\r\n      <slot name=\"next-icon\" slot=\"next-icon\">\r\n        ${M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"next icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"prev icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`}\r\n      </slot>\r\n      <div class=\"header\" role=\"tablist\">\r\n        <div class=\"tabs\">\r\n          <slot\r\n            @slotchange=\"${this.#handleSlotChange}\"\r\n            @keydown=\"${this.#handleKeyDown}\"\r\n            @change=\"${this.#handleChange}\"\r\n          ></slot>\r\n        </div>\r\n        <div class=\"ink-bar\" aria-hidden=\"true\">\r\n          <div class=\"active-indicator\"></div>\r\n        </div>\r\n      </div>\r\n    </m3e-slide-group>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    this[selectionManager].setItems([...this.querySelectorAll(\"m3e-tab\")]);\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this[selectionManager].onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleSelectedChange(): void {\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let selectedIndex = selected ? this.tabs.indexOf(selected) : null;\r\n    if (selectedIndex === -1) {\r\n      selectedIndex = null;\r\n    }\r\n    this._selectedIndex = selectedIndex;\r\n    this.#updateInkBar();\r\n  }\r\n\r\n  /** @private */\r\n  #updateInkBar(): void {\r\n    if (!this._tablist) return;\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let left = 0;\r\n    let width = 0;\r\n\r\n    if (selected && this._selectedIndex !== null) {\r\n      for (let i = 0; i < this._selectedIndex; i++) {\r\n        left += this.tabs[i].clientWidth;\r\n      }\r\n\r\n      width = selected.clientWidth;\r\n      if (this.variant === \"primary\" && selected.label) {\r\n        left += selected.label.offsetLeft;\r\n        width = selected.label.clientWidth;\r\n        if (width < MIN_PRIMARY_TAB_WIDTH) {\r\n          left -= (MIN_PRIMARY_TAB_WIDTH - width) / 2;\r\n          width = MIN_PRIMARY_TAB_WIDTH;\r\n        }\r\n      }\r\n    }\r\n\r\n    this._tablist.style.setProperty(\"--_tabs-active-tab-position\", `${left}px`);\r\n    this._tablist.style.setProperty(\"--_tabs-active-tab-size\", `${width}px`);\r\n\r\n    if (width > 0 && hasCustomState(this, \"-no-animate\")) {\r\n      setTimeout(() => deleteCustomState(this, \"-no-animate\"));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tabs\": M3eTabsElement;\r\n  }\r\n}\r\n"],"names":["M3eTabElement","M3eTabElement_1","Selected","HtmlFor","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","_M3eTabElement_clickHandler","set","e","__classPrivateFieldGet","call","attach","control","id","__nextId","addAriaReferencedId","detach","removeAriaReferencedId","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","update","changedProperties","has","closest","selectionManager","notifySelectionChange","render","html","disabled","preventDefault","stopImmediatePropagation","defaultPrevented","selected","dispatchEvent","Event","bubbles","composed","cancelable","styles","css","DesignToken","density","calc","typescale","standard","title","small","fontSize","fontWeight","lineHeight","tracking","shape","corner","large","color","primary","onSurfaceVariant","onSurface","__decorate","query","prototype","customElement","M3eTabPanelElement","slot","scrollbar","width","MIN_PRIMARY_TAB_WIDTH","M3eTabsElement","_M3eTabsElement_directionalitySubscription","_selectedIndex","_a","SelectionManager","onSelectedItemsChange","_M3eTabsElement_instances","_M3eTabsElement_handleSelectedChange","withHomeAndEnd","withWrap","withDirectionality","M3eDirectionality","current","disablePagination","headerPosition","variant","stretch","previousPageLabel","nextPageLabel","ResizeController","skipInitial","callback","addCustomState","_M3eTabsElement_updateInkBar","tabs","items","selectedTab","selectedIndex","value","length","__classPrivateFieldSet","observe","requestUpdate","directionality","updated","panelIndex","querySelectorAll","indexOf","undefined","nothing","ifDefined","_M3eTabsElement_renderHeader","_M3eTabsElement_handleSlotChange","_M3eTabsElement_handleKeyDown","_M3eTabsElement_handleChange","setItems","onKeyDown","stopPropagation","selectedItems","_tablist","left","i","clientWidth","label","offsetLeft","style","setProperty","hasCustomState","setTimeout","deleteCustomState","unsafeCSS","motion","duration","long2","easing","outlineVariant","extraSmallTop","extraSmallBottom","state","property","attribute","type","Boolean","reflect"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../src/tabs/TabElement.ts","../../src/tabs/TabPanelElement.ts","../../src/tabs/TabsElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Disabled,\r\n  Focusable,\r\n  HtmlFor,\r\n  KeyboardClick,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { addAriaReferencedId, removeAriaReferencedId, selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * An interactive element that, when activated, presents an associated tab panel.\r\n *\r\n * @description\r\n * The `m3e-tab` component is an interactive control used within a tabbed interface to activate and\r\n * reveal an associated tab panel. It supports accessible labeling, optional iconography, and selection\r\n * state styling consistent with Material 3 guidance. Tabs may be disabled, selected, or linked to a\r\n * specific panel via the `for` attribute, enabling declarative control and semantic clarity.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tab\r\n *\r\n * @slot - Renders the label of the tab.\r\n * @slot icon - Renders an icon before the tab's label.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr for - The identifier of the interactive control to which this element is attached.\r\n * @attr selected - Whether the element is selected.\r\n *\r\n * @fires beforeinput - Dispatched before the selected state changes.\r\n * @fires input - Dispatched when the selected state changes.\r\n * @fires change - Dispatched when the selected state changes.\r\n * @fires click - Dispatched when the element is clicked.\r\n *\r\n * @cssprop --m3e-tab-font-size - Font size for tab label.\r\n * @cssprop --m3e-tab-font-weight - Font weight for tab label.\r\n * @cssprop --m3e-tab-line-height - Line height for tab label.\r\n * @cssprop --m3e-tab-tracking - Letter spacing for tab label.\r\n * @cssprop --m3e-tab-padding-start - Padding on the inline start of the tab.\r\n * @cssprop --m3e-tab-padding-end - Padding on the inline end of the tab.\r\n * @cssprop --m3e-tab-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-tab-selected-color - Text color for selected tab.\r\n * @cssprop --m3e-tab-selected-container-hover-color - Hover state-layer color for selected tab.\r\n * @cssprop --m3e-tab-selected-container-focus-color - Focus state-layer color for selected tab.\r\n * @cssprop --m3e-tab-selected-ripple-color - Ripple color for selected tab.\r\n * @cssprop --m3e-tab-unselected-color - Text color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-container-hover-color - Hover state-layer color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-container-focus-color - Focus state-layer color for unselected tab.\r\n * @cssprop --m3e-tab-unselected-ripple-color - Ripple color for unselected tab.\r\n * @cssprop --m3e-tab-disabled-color - Text color for disabled tab.\r\n * @cssprop --m3e-tab-disabled-opacity - Text opacity for disabled tab.\r\n * @cssprop --m3e-tab-spacing - Column gap between icon and label.\r\n * @cssprop --m3e-tab-icon-size - Font size for slotted icon.\r\n */\r\n@customElement(\"m3e-tab\")\r\nexport class M3eTabElement extends Selected(\r\n  HtmlFor(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, \"tab\"), true))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      outline: none;\r\n      user-select: none;\r\n      height: calc(var(--_tab-height) + ${DesignToken.density.calc(-3)});\r\n      font-size: var(--m3e-tab-font-size, ${DesignToken.typescale.standard.title.small.fontSize});\r\n      font-weight: var(--m3e-tab-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight});\r\n      line-height: var(--m3e-tab-line-height, ${DesignToken.typescale.standard.title.small.lineHeight});\r\n      letter-spacing: var(--m3e-tab-tracking, ${DesignToken.typescale.standard.title.small.tracking});\r\n      flex-grow: var(--_tab-grow);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    .base {\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      padding-inline-start: var(--m3e-tab-padding-start, 1.5rem);\r\n      padding-inline-end: var(--m3e-tab-padding-end, 1.5rem);\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .focus-ring {\r\n      border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken.shape.corner.large});\r\n    }\r\n    :host([selected]:focus-within) .focus-ring {\r\n      top: var(--_tab-focus-ring-top-offset, 0);\r\n      bottom: var(--_tab-focus-ring-bottom-offset, 0);\r\n    }\r\n    :host([selected]:not(:disabled)) .base {\r\n      color: var(--m3e-tab-selected-color, var(--_tab-selected-color, ${DesignToken.color.primary}));\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-tab-selected-container-hover-color,\r\n        var(--_tab-selected-container-hover-color, ${DesignToken.color.primary})\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --_tab-selected-container-focus-color,\r\n        var(--m3e-tab-selected-container-focus-color, ${DesignToken.color.primary})\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --_tab-selected-ripple-color,\r\n        var(--m3e-tab-selected-ripple-color, ${DesignToken.color.primary})\r\n      );\r\n    }\r\n    :host(:not([selected]):not(:disabled)) .base {\r\n      color: var(--m3e-tab-unselected-color, ${DesignToken.color.onSurfaceVariant});\r\n      --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken.color.onSurface});\r\n      --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken.color.onSurface});\r\n      --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:disabled) .base {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-tab-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    .wrapper {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      white-space: nowrap;\r\n      flex-direction: var(--_tab-direction);\r\n      justify-content: center;\r\n      column-gap: var(--m3e-tab-spacing, 0.5rem);\r\n    }\r\n    ::slotted([slot=\"icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-tab-icon-size, 1.5rem) !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([selected]:not(:disabled)) .base {\r\n        color: ButtonText;\r\n      }\r\n      :host(:not([selected]):not(:disabled)) .base {\r\n        color: ButtonText;\r\n      }\r\n      :host(:disabled) .base {\r\n        color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ private static __nextId = 0;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /** @internal A reference to the element that wraps the label of the tab. */\r\n  @query(\".label\") readonly label!: HTMLElement;\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n\r\n    control.id = control.id || `m3e-tab-panel-${M3eTabElement.__nextId++}`;\r\n    addAriaReferencedId(this, \"aria-controls\", control.id);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    if (this.control && this.control.id) {\r\n      removeAriaReferencedId(this, \"aria-controls\", this.control.id);\r\n    }\r\n\r\n    super.detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" inward ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <slot name=\"icon\" aria-hidden=\"true\"></slot><span class=\"label\"><slot></slot></span>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (this.disabled) {\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n    }\r\n\r\n    if (e.defaultPrevented || this.selected) return;\r\n\r\n    if (this.dispatchEvent(new Event(\"beforeinput\", { bubbles: true, cancelable: true }))) {\r\n      this.selected = true;\r\n      this.closest(\"m3e-tabs\")?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tab\": M3eTabElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken, Role } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A panel presented for a tab.\r\n *\r\n * @description\r\n * The `m3e-tab-panel` component represents the content region associated with a selected tab.\r\n * It is conditionally rendered based on tab selection and provides a structured surface for\r\n * displaying contextual information, media, or interactive elements. Panels are linked to their\r\n * corresponding tabs via the `for` attribute on `m3e-tab`, enabling declarative control and\r\n * accessible navigation consistent with Material 3 guidance.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tab-panel\r\n *\r\n * @slot - Renders the content of the panel.\r\n */\r\n@customElement(\"m3e-tab-panel\")\r\nexport class M3eTabPanelElement extends Role(LitElement, \"tabpanel\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      overflow-y: auto;\r\n      scrollbar-width: ${DesignToken.scrollbar.width};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.slot = \"panel\";\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot></slot>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tab-panel\": M3eTabPanelElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n  addCustomState,\r\n  AttachInternals,\r\n  customElement,\r\n  deleteCustomState,\r\n  DesignToken,\r\n  hasCustomState,\r\n  ResizeController,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/slide-group\";\r\n\r\nimport { TabVariant } from \"./TabVariant\";\r\nimport { M3eTabElement } from \"./TabElement\";\r\nimport { TabHeaderPosition } from \"./TabHeaderPosition\";\r\n\r\nconst MIN_PRIMARY_TAB_WIDTH = 24;\r\n\r\n/**\r\n * Organizes content into separate views where only one view can be visible at a time.\r\n *\r\n * @description\r\n * The `m3e-tabs` component provides a structured navigation surface for organizing content into distinct views,\r\n * where only one view is visible at a time. It supports scrollable tab headers with optional pagination,\r\n * accessible labeling for navigation controls, and configurable header positioning to suit various layout\r\n * contexts. Two visual variants are available: `primary`, which emphasizes active indicators and shape styling\r\n * for prominent navigation, and `secondary`, which offers a more subtle presentation with reduced indicator\r\n * thickness. Stretch behavior allows tabs to expand and align rhythmically within their container, consistent\r\n * with Material 3 guidance.\r\n *\r\n * @example\r\n * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present\r\n * secondary tabs.\r\n * ```html\r\n * <m3e-tabs>\r\n *  <m3e-tab selected for=\"videos\"><m3e-icon slot=\"icon\" name=\"videocam\"></m3e-icon>Video</m3e-tab>\r\n *  <m3e-tab for=\"photos\"><m3e-icon slot=\"icon\" name=\"photo\"></m3e-icon>Photos</m3e-tab>\r\n *  <m3e-tab for=\"audio\"><m3e-icon slot=\"icon\" name=\"music_note\"></m3e-icon>Audio</m3e-tab>\r\n *  <m3e-tab-panel id=\"videos\">Videos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"photos\">Photos</m3e-tab-panel>\r\n *  <m3e-tab-panel id=\"audio\">Audio</m3e-tab-panel>\r\n * </m3e-tabs>\r\n * ```\r\n *\r\n * @tag m3e-tabs\r\n *\r\n * @slot - Renders the tabs.\r\n * @slot panel - Renders the panels of the tabs.\r\n * @slot next-icon - Renders the icon to present for the next button used to paginate.\r\n * @slot prev-icon - Renders the icon to present for the previous button used to paginate.\r\n *\r\n * @attr disable-pagination - Whether scroll buttons are disabled.\r\n * @attr header-position - The position of the tab headers.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr stretch - Whether tabs are stretched to fill the header.\r\n * @attr variant - The appearance variant of the tabs.\r\n *\r\n * @fires beforeinput - Dispatched before the selected state of a tab changes.\r\n * @fires input - Dispatched when the selected state of a tab changes.\r\n * @fires change - Dispatched when the selected tab changes.\r\n *\r\n * @cssprop --m3e-tabs-paginator-button-icon-size - Overrides the icon size for paginator buttons.\r\n * @cssprop --m3e-tabs-active-indicator-color - Color of the active tab indicator.\r\n * @cssprop --m3e-tabs-primary-before-active-indicator-shape - Border radius for active indicator when header is before and variant is primary.\r\n * @cssprop --m3e-tabs-primary-after-active-indicator-shape - Border radius for active indicator when header is after and variant is primary.\r\n * @cssprop --m3e-tabs-primary-active-indicator-inset - Inset for primary variant's active indicator.\r\n * @cssprop --m3e-tabs-primary-active-indicator-thickness - Thickness for primary variant's active indicator.\r\n * @cssprop --m3e-tabs-secondary-active-indicator-thickness - Thickness for secondary variant's active indicator.\r\n */\r\n@customElement(\"m3e-tabs\")\r\nexport class M3eTabsElement extends AttachInternals(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: relative;\r\n    }\r\n    .tablist {\r\n      position: relative;\r\n      box-sizing: border-box;\r\n      flex: none;\r\n    }\r\n    ::slotted(prev-icon),\r\n    ::slotted(next-icon),\r\n    .icon {\r\n      width: 1em;\r\n      font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important;\r\n    }\r\n    .header {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n    .tabs {\r\n      display: flex;\r\n      flex-wrap: nowrap;\r\n      align-items: center;\r\n    }\r\n    .ink-bar {\r\n      box-sizing: border-box;\r\n      height: var(--_tabs-active-indicator-thickness);\r\n    }\r\n    .active-indicator {\r\n      position: relative;\r\n      height: var(--_tabs-active-indicator-thickness);\r\n      left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px));\r\n      width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2));\r\n      background-color: var(--m3e-tabs-active-indicator-color, ${DesignToken.color.primary});\r\n      transition: ${unsafeCSS(\r\n        `left var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard},\r\n        width var(--m3e-slide-animation-duration, ${DesignToken.motion.duration.long2}) ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    :host([header-position=\"after\"]) .header {\r\n      flex-direction: column-reverse;\r\n    }\r\n    :host([header-position=\"before\"]) .ink-bar {\r\n      margin-top: calc(0px - var(--_tabs-active-indicator-thickness));\r\n    }\r\n    :host([header-position=\"before\"]) .tablist {\r\n      --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host([header-position=\"after\"]) .ink-bar {\r\n      margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness));\r\n    }\r\n    :host([header-position=\"after\"]) .tablist {\r\n      --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid\r\n        var(--m3e-divider-color, ${DesignToken.color.outlineVariant});\r\n    }\r\n    :host([header-position=\"before\"][variant=\"primary\"]) .active-indicator {\r\n      border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${DesignToken.shape.corner.extraSmallTop});\r\n    }\r\n    :host([header-position=\"after\"][variant=\"primary\"]) .active-indicator {\r\n      border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${DesignToken.shape.corner.extraSmallBottom});\r\n    }\r\n    .tabs {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([variant=\"primary\"]) .tablist {\r\n      --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem);\r\n      --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px);\r\n      --_tab-height: 4rem;\r\n    }\r\n    :host([header-position=\"before\"]) .tablist {\r\n      --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px);\r\n    }\r\n    :host([header-position=\"after\"]) .tablist {\r\n      --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px);\r\n    }\r\n    :host([header-position=\"before\"][variant=\"primary\"]) .tablist {\r\n      --_tab-direction: column;\r\n    }\r\n    :host([header-position=\"after\"][variant=\"primary\"]) .tablist {\r\n      --_tab-direction: column-reverse;\r\n    }\r\n    :host([variant=\"secondary\"]) .tablist {\r\n      --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px);\r\n      --_tab-height: 3rem;\r\n      --_tab-selected-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-container-hover-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-container-focus-color: ${DesignToken.color.onSurface};\r\n      --_tab-selected-ripple-color: ${DesignToken.color.onSurface};\r\n    }\r\n    :host([stretch]) .header {\r\n      width: 100%;\r\n      --_tab-grow: 1;\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) .active-indicator {\r\n      transition: none;\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .active-indicator {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .active-indicator {\r\n        background-color: ButtonText;\r\n        --m3e-divider-color: GrayText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ @query(\".tablist\") private readonly _tablist!: HTMLElement;\r\n  /** @private */ @state() _selectedIndex: number | null = null;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eTabElement>()\r\n    .onSelectedItemsChange(() => this.#handleSelectedChange())\r\n    .withHomeAndEnd()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current);\r\n\r\n  constructor() {\r\n    super();\r\n    new ResizeController(this, {\r\n      skipInitial: true,\r\n      callback: () => {\r\n        addCustomState(this, \"--no-animate\");\r\n        this.#updateInkBar();\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Whether scroll buttons are disabled.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"disable-pagination\", type: Boolean }) disablePagination = false;\r\n\r\n  /**\r\n   * The position of the tab headers.\r\n   * @default \"before\"\r\n   */\r\n  @property({ attribute: \"header-position\", reflect: true }) headerPosition: TabHeaderPosition = \"before\";\r\n\r\n  /**\r\n   * The appearance variant of the tabs.\r\n   * @default \"secondary\"\r\n   */\r\n  @property({ reflect: true }) variant: TabVariant = \"secondary\";\r\n\r\n  /**\r\n   * Whether tabs are stretched to fill the header.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) stretch = false;\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the previous page.\r\n   * @default \"Previous page\"\r\n   */\r\n  @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n  /**\r\n   * The accessible label given to the button used to move to the next page.\r\n   * @default \"Next page\"\r\n   */\r\n  @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n  /** The tabs. */\r\n  get tabs(): readonly M3eTabElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected tab. */\r\n  get selectedTab(): M3eTabElement | null {\r\n    return this._selectedIndex !== null ? (this.tabs[this._selectedIndex] ?? null) : null;\r\n  }\r\n\r\n  /** The zero-based index of the selected tab. */\r\n  get selectedIndex(): number {\r\n    return this._selectedIndex ?? -1;\r\n  }\r\n  set selectedIndex(value: number) {\r\n    if (value >= 0 && value < this.tabs.length) {\r\n      this.tabs[value].selected = true;\r\n    } else {\r\n      const selectedTab = this.selectedTab;\r\n      if (selectedTab) {\r\n        selectedTab.selected = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    addCustomState(this, \"--no-animate\");\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => {\r\n      this.requestUpdate();\r\n      this[selectionManager].directionality = M3eDirectionality.current;\r\n    });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if ((_changedProperties.has(\"variant\") || _changedProperties.has(\"stretch\")) && this._selectedIndex !== null) {\r\n      this.#updateInkBar();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    let panelIndex: number | undefined;\r\n    if (this.selectedTab?.control) {\r\n      panelIndex = [...this.querySelectorAll(\"[slot='panel']\")].indexOf(this.selectedTab.control);\r\n      if (panelIndex === -1) {\r\n        panelIndex = undefined;\r\n      }\r\n    }\r\n\r\n    return html` ${this.headerPosition === \"before\" ? this.#renderHeader() : nothing}\r\n      <m3e-slide class=\"tabs\" selected-index=\"${ifDefined(panelIndex)}\">\r\n        <slot name=\"panel\"></slot>\r\n      </m3e-slide>\r\n      ${this.headerPosition === \"after\" ? this.#renderHeader() : nothing}`;\r\n  }\r\n\r\n  /** @private */\r\n  #renderHeader(): unknown {\r\n    return html`<m3e-slide-group\r\n      class=\"tablist\"\r\n      threshold=\"8\"\r\n      previous-page-label=\"${this.previousPageLabel}\"\r\n      next-page-label=\"${this.nextPageLabel}\"\r\n      ?disabled=\"${this.disablePagination}\"\r\n    >\r\n      <slot name=\"prev-icon\" slot=\"prev-icon\">\r\n        ${M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"prev icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"next icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`}\r\n      </slot>\r\n      <slot name=\"next-icon\" slot=\"next-icon\">\r\n        ${M3eDirectionality.current === \"ltr\"\r\n          ? html`<svg class=\"next icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n            </svg>`\r\n          : html`<svg class=\"prev icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n              <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n            </svg>`}\r\n      </slot>\r\n      <div class=\"header\" role=\"tablist\">\r\n        <div class=\"tabs\">\r\n          <slot\r\n            @slotchange=\"${this.#handleSlotChange}\"\r\n            @keydown=\"${this.#handleKeyDown}\"\r\n            @change=\"${this.#handleChange}\"\r\n          ></slot>\r\n        </div>\r\n        <div class=\"ink-bar\" aria-hidden=\"true\">\r\n          <div class=\"active-indicator\"></div>\r\n        </div>\r\n      </div>\r\n    </m3e-slide-group>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    this[selectionManager].setItems([...this.querySelectorAll(\"m3e-tab\")]);\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    this[selectionManager].onKeyDown(e);\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @private */\r\n  #handleSelectedChange(): void {\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let selectedIndex = selected ? this.tabs.indexOf(selected) : null;\r\n    if (selectedIndex === -1) {\r\n      selectedIndex = null;\r\n    }\r\n    this._selectedIndex = selectedIndex;\r\n    this.#updateInkBar();\r\n  }\r\n\r\n  /** @private */\r\n  #updateInkBar(): void {\r\n    if (!this._tablist) return;\r\n    const selected = this[selectionManager].selectedItems[0];\r\n    let left = 0;\r\n    let width = 0;\r\n\r\n    if (selected && this._selectedIndex !== null) {\r\n      for (let i = 0; i < this._selectedIndex; i++) {\r\n        left += this.tabs[i].clientWidth;\r\n      }\r\n\r\n      width = selected.clientWidth;\r\n      if (this.variant === \"primary\" && selected.label) {\r\n        left += selected.label.offsetLeft;\r\n        width = selected.label.clientWidth;\r\n        if (width < MIN_PRIMARY_TAB_WIDTH) {\r\n          left -= (MIN_PRIMARY_TAB_WIDTH - width) / 2;\r\n          width = MIN_PRIMARY_TAB_WIDTH;\r\n        }\r\n      }\r\n    }\r\n\r\n    this._tablist.style.setProperty(\"--_tabs-active-tab-position\", `${left}px`);\r\n    this._tablist.style.setProperty(\"--_tabs-active-tab-size\", `${width}px`);\r\n\r\n    if (width > 0 && hasCustomState(this, \"--no-animate\")) {\r\n      setTimeout(() => deleteCustomState(this, \"--no-animate\"));\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-tabs\": M3eTabsElement;\r\n  }\r\n}\r\n"],"names":["M3eTabElement","M3eTabElement_1","Selected","HtmlFor","KeyboardClick","Focusable","Disabled","AttachInternals","Role","LitElement","constructor","_M3eTabElement_clickHandler","set","e","__classPrivateFieldGet","call","attach","control","id","__nextId","addAriaReferencedId","detach","removeAriaReferencedId","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","update","changedProperties","has","closest","selectionManager","notifySelectionChange","render","html","disabled","preventDefault","stopImmediatePropagation","defaultPrevented","selected","dispatchEvent","Event","bubbles","cancelable","styles","css","DesignToken","density","calc","typescale","standard","title","small","fontSize","fontWeight","lineHeight","tracking","shape","corner","large","color","primary","onSurfaceVariant","onSurface","__decorate","query","prototype","customElement","M3eTabPanelElement","slot","scrollbar","width","MIN_PRIMARY_TAB_WIDTH","M3eTabsElement","_M3eTabsElement_directionalitySubscription","_selectedIndex","_a","SelectionManager","onSelectedItemsChange","_M3eTabsElement_instances","_M3eTabsElement_handleSelectedChange","withHomeAndEnd","withWrap","withDirectionality","M3eDirectionality","current","disablePagination","headerPosition","variant","stretch","previousPageLabel","nextPageLabel","ResizeController","skipInitial","callback","addCustomState","_M3eTabsElement_updateInkBar","tabs","items","selectedTab","selectedIndex","value","length","__classPrivateFieldSet","observe","requestUpdate","directionality","updated","panelIndex","querySelectorAll","indexOf","undefined","nothing","ifDefined","_M3eTabsElement_renderHeader","_M3eTabsElement_handleSlotChange","_M3eTabsElement_handleKeyDown","_M3eTabsElement_handleChange","setItems","onKeyDown","stopPropagation","selectedItems","_tablist","left","i","clientWidth","label","offsetLeft","style","setProperty","hasCustomState","setTimeout","deleteCustomState","unsafeCSS","motion","duration","long2","easing","outlineVariant","extraSmallTop","extraSmallBottom","state","property","attribute","type","Boolean","reflect"],"mappings":"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"}