@eunomia/elements 1.0.0-beta.6 → 1.0.0-beta.7

package/dist/ssr/tabs-ssr.css

@@ -0,0 +1,129 @@
+eun-tab-group:not(:defined) {
+  --_indicatorHeight: var(--tab-indicator-height, 2px);
+  --_dividerGap: var(--tab-divider-gap, 0px);
+  --_dividerSize: var(--tab-divider-size, 2px);
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--tab-gap, 0);
+  padding-block-start: 4px;
+  background: none;
+}
+
+eun-tab-group:not(:defined)[align="center"] {
+  justify-content: center;
+}
+
+eun-tab-group:not(:defined)[align="end"] {
+  justify-content: flex-end;
+}
+
+eun-tab-group:not(:defined)[full] {
+  justify-content: flex-start;
+}
+
+eun-tab-group:not(:defined) > eun-tab {
+  position: relative;
+  order: 0;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  padding: var(
+    --tab-padding,
+    var(--tab-padding-block, var(--eun-space-s, 8px))
+      var(--tab-padding-inline, var(--eun-space-m, 16px))
+  );
+  border: var(--tab-border);
+  border-radius: var(--tab-border-radius, 8px);
+  background: var(--tab-background-color, transparent);
+  color: var(--tab-text-color, var(--eun-text-color, #071621));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--tab-font-size, var(--eun-font-size-s, 14px));
+  font-weight: var(--tab-font-weight, var(--eun-font-weight-m, 500));
+  white-space: nowrap;
+}
+
+eun-tab-group:not(:defined)[full] > eun-tab {
+  flex: 1 1 0%;
+}
+
+eun-tab-group:not(:defined) > eun-tab:first-of-type {
+  margin-inline-start: 4px;
+}
+
+eun-tab-group:not(:defined) > eun-tab:last-of-type {
+  margin-inline-end: 4px;
+}
+
+eun-tab-group:not(:defined) > eun-tab[disabled] {
+  display: var(--tab-disabled-display, grid);
+  color: var(--eun-text-disabled-color, #8d93aa);
+}
+
+/* The active tab : the one marked active, or the first one. */
+eun-tab-group:not(:defined) > eun-tab[active],
+eun-tab-group:not(:defined):not(:has(> eun-tab[active]))
+  > eun-tab:first-of-type {
+  background: var(--tab-active-background-color, transparent);
+  border: var(--tab-border-active, var(--tab-border));
+  color: var(--tab-active-text-color, var(--eun-color-primary-500, #3d6fff));
+}
+
+eun-tab-group:not(:defined):not([hide-indicator]) > eun-tab[active]::after,
+eun-tab-group:not(:defined):not([hide-indicator], :has(> eun-tab[active]))
+  > eun-tab:first-of-type::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: calc(-1 * var(--_dividerGap));
+  height: var(--_indicatorHeight);
+  background: var(--tab-indicator-color, var(--eun-color-primary-500, #3d6fff));
+}
+
+/* The divider under the tab list. */
+eun-tab-group:not(:defined)::before {
+  content: "";
+  order: 1;
+  flex: 0 0 100%;
+  height: var(--_dividerSize);
+  margin-block-start: calc(var(--_dividerGap) - var(--_dividerSize));
+  background: var(--tab-divider-color, var(--eun-divider-color, #dee0e7));
+}
+
+/* Every panel but the active one is hidden, as once upgraded. */
+eun-tab-group:not(:defined) > eun-tab-panel {
+  display: none;
+}
+
+eun-tab-group:not(:defined):not(:has(> eun-tab[active]))
+  > eun-tab-panel:first-of-type,
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(1)[active])
+  > eun-tab-panel:nth-of-type(1),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(2)[active])
+  > eun-tab-panel:nth-of-type(2),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(3)[active])
+  > eun-tab-panel:nth-of-type(3),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(4)[active])
+  > eun-tab-panel:nth-of-type(4),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(5)[active])
+  > eun-tab-panel:nth-of-type(5),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(6)[active])
+  > eun-tab-panel:nth-of-type(6),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(7)[active])
+  > eun-tab-panel:nth-of-type(7),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(8)[active])
+  > eun-tab-panel:nth-of-type(8),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(9)[active])
+  > eun-tab-panel:nth-of-type(9),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(10)[active])
+  > eun-tab-panel:nth-of-type(10),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(11)[active])
+  > eun-tab-panel:nth-of-type(11),
+eun-tab-group:not(:defined):has(> eun-tab:nth-of-type(12)[active])
+  > eun-tab-panel:nth-of-type(12) {
+  order: 2;
+  display: block;
+  flex: 0 0 100%;
+  margin-block-start: var(--tab-panel-gap, var(--eun-space-l, 32px));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--tab-panel-font-size, var(--eun-font-size-s, 14px));
+}

package/dist/ssr/toggle-group-ssr.css

@@ -0,0 +1,182 @@
+eun-toggle-group:not(:defined) {
+  display: inline-flex;
+  box-sizing: border-box;
+  width: fit-content;
+  max-width: 100%;
+  gap: var(--toggle-group-gap, var(--eun-space-xs, 4px));
+  padding: var(--toggle-group-padding, var(--toggle-group-padding-block, 4px))
+    var(--toggle-group-padding, var(--toggle-group-padding-inline, 4px));
+  overflow: hidden;
+  border-radius: var(
+    --toggle-group-border-radius,
+    var(--eun-border-radius-m, 8px)
+  );
+  background: var(
+    --toggle-group-background,
+    var(--eun-surface-sunken, #f7f8fa)
+  );
+  border: var(--eun-border-width-s, 1px) solid
+    var(--toggle-group-border-color, var(--eun-color-grey-300, #dee0e7));
+  box-shadow: var(--toggle-group-box-shadow, none);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--eun-font-size-s, 14px);
+}
+
+eun-toggle-group:is([appearance="outline"], [appearance="flat"]):not(:defined) {
+  padding: 0;
+  overflow: visible;
+  background: var(--toggle-group-background, transparent);
+  border: none;
+  border-radius: 0;
+}
+
+eun-toggle-group[full]:not(:defined) {
+  display: flex;
+  width: 100%;
+}
+
+eun-toggle-group[disabled]:not(:defined) {
+  opacity: 0.5;
+}
+
+eun-toggle-item:not(:defined) {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--eun-space-xs, 4px);
+  box-sizing: border-box;
+  padding: 6px 14px;
+  border-radius: calc(
+    var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
+  );
+  color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--eun-font-size-s, 14px);
+  font-weight: var(--eun-font-weight-m, 500);
+  white-space: nowrap;
+  --_customTint: color-mix(
+    in srgb,
+    var(--toggle-group-active-background) 15%,
+    transparent
+  );
+}
+
+eun-toggle-item:not(:defined) > [slot="icon"] {
+  order: -1;
+}
+
+:is(
+  eun-toggle-group:is([appearance="outline"], [appearance="flat"])
+    > eun-toggle-item,
+  eun-toggle-item:is([appearance="outline"], [appearance="flat"])
+):not(:defined) {
+  border: var(--eun-border-width-s, 1px) solid
+    var(--toggle-group-border-color, transparent);
+  border-radius: var(
+    --toggle-group-border-radius,
+    var(--eun-border-radius-m, 8px)
+  );
+}
+
+:is(
+  eun-toggle-group[appearance="outline"] > eun-toggle-item,
+  eun-toggle-item[appearance="outline"]
+):not(:defined) {
+  border-color: var(
+    --toggle-group-border-color,
+    var(--eun-color-grey-300, #dee0e7)
+  );
+}
+
+:is(eun-toggle-group[full] > eun-toggle-item, eun-toggle-item[full]):not(
+  :defined
+) {
+  flex: 1 1 0%;
+  justify-content: center;
+}
+
+:is(
+  eun-toggle-group:not(
+      [single],
+      :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+    )
+    > eun-toggle-item[checked],
+  eun-toggle-group:is(
+      [single],
+      :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+    )
+    > eun-toggle-item:nth-child(1 of [checked]),
+  eun-toggle-group:is(
+      [single],
+      :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+    ):not([value], :has(> eun-toggle-item[checked]))
+    > eun-toggle-item:first-of-type
+):not(:defined) {
+  background: var(
+    --toggle-group-active-background,
+    var(--eun-color-primary-500, #3d6fff)
+  );
+  color: var(
+    --toggle-group-active-color,
+    var(--eun-color-on-primary-500, #ffffff)
+  );
+}
+
+:is(
+    eun-toggle-group:not(
+        [single],
+        :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+      )
+      > eun-toggle-item[checked],
+    eun-toggle-group:is(
+        [single],
+        :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+      )
+      > eun-toggle-item:nth-child(1 of [checked]),
+    eun-toggle-group:is(
+        [single],
+        :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+      ):not([value], :has(> eun-toggle-item[checked]))
+      > eun-toggle-item:first-of-type
+  ):is(
+    eun-toggle-group:is([appearance="outline"], [appearance="flat"])
+      > eun-toggle-item,
+    eun-toggle-item:is([appearance="outline"], [appearance="flat"])
+  ):not(:defined) {
+  background: var(--_customTint, var(--eun-color-primary-alpha-20, #3d6fff33));
+  color: var(
+    --toggle-group-active-color,
+    var(--toggle-group-active-background, var(--eun-color-primary-500, #3d6fff))
+  );
+  font-weight: var(--eun-font-weight-b, 700);
+}
+
+:is(
+    eun-toggle-group:not(
+        [single],
+        :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+      )
+      > eun-toggle-item[checked],
+    eun-toggle-group:is(
+        [single],
+        :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+      )
+      > eun-toggle-item:nth-child(1 of [checked]),
+    eun-toggle-group:is(
+        [single],
+        :has(> eun-toggle-item:nth-of-type(2):last-of-type)
+      ):not([value], :has(> eun-toggle-item[checked]))
+      > eun-toggle-item:first-of-type
+  ):is(
+    eun-toggle-group[appearance="outline"] > eun-toggle-item,
+    eun-toggle-item[appearance="outline"]
+  ):not(:defined) {
+  border-color: var(
+    --toggle-group-active-background,
+    var(--eun-color-primary-500, #3d6fff)
+  );
+}
+
+eun-toggle-item[disabled]:not(:defined) {
+  opacity: 0.5;
+}

package/dist/ssr/toolbar-ssr.css

@@ -14,12 +14,41 @@ eun-toolbar:not(:defined) {
   height: var(--toolbar-height, 72px);
   padding: var(
     --toolbar-padding,
-    var(--toolbar-padding-block, 0)
-      var(--toolbar-padding-inline, 24px)
+    var(--toolbar-padding-block, 0) var(--toolbar-padding-inline, 24px)
   );
   position: sticky;
   top: 0;
   z-index: var(--toolbar-z-index, 100);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  background: var(
+    --toolbar-background,
+    var(--toolbar-background-light, var(--eun-surface-color, #ffffff))
+  );
+  color: var(
+    --toolbar-color,
+    var(--toolbar-color-light, var(--eun-text-color, #071621))
+  );
+  border-block-end: var(--eun-border-width-s, 1px) solid
+    var(--toolbar-border-color, var(--eun-border-color, #dee0e7));
+  box-shadow: var(--toolbar-shadow, none);
+}
+
+eun-toolbar[theme="dark"]:not(:defined) {
+  background: var(
+    --toolbar-background,
+    var(--toolbar-background-dark, var(--eun-surface-inverse, #0b1620))
+  );
+  color: var(
+    --toolbar-color,
+    var(--toolbar-color-dark, var(--eun-text-on-inverse, #f5f7fa))
+  );
+}
+
+/* A page loads scrolled to the top, where the upgraded bar is transparent. */
+eun-toolbar[transparent-at-top]:not(:defined) {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
 }
 
 eun-toolbar[position="fixed"]:not(:defined) {

package/dist/utils/implicit-submission.utils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Whether a key press should trigger implicit submission: Enter, outside
+ * of an IME composition, and not already handled by something else.
+ *
+ * @param event - The keydown event to check.
+ * @returns Whether the event asks for implicit submission.
+ */
+export declare function isImplicitSubmissionKey(event: KeyboardEvent): boolean;
+/**
+ * Submits a form the way the browser does when Enter is pressed in one of
+ * its text fields, since a field whose native input lives in a shadow root
+ * never triggers it on its own. Clicks the form's default button when it
+ * has one, unless that button is disabled. Without one, submits only when
+ * the form holds a single text field.
+ *
+ * @param form - The form to submit.
+ */
+export declare function submitImplicitly(form: HTMLFormElement): void;

package/dist/utils/implicit-submission.utils.js

@@ -0,0 +1,79 @@
+/**
+ * Buttons that can submit a form, in the order the browser looks for the
+ * form's default button. `eun-button` and `eun-fab` aren't form-associated,
+ * so they're found in the form's own subtree rather than in `form.elements`.
+ */
+const SUBMIT_BUTTONS = [
+    "button:not([type])",
+    'button[type="submit"]',
+    'input[type="submit"]',
+    'input[type="image"]',
+    'eun-button[type="submit"]',
+    'eun-fab[type="submit"]',
+].join(", ");
+/**
+ * Native input types that block implicit submission, per the HTML spec.
+ */
+const BLOCKING_INPUT_TYPES = new Set([
+    "text",
+    "search",
+    "url",
+    "tel",
+    "email",
+    "password",
+    "date",
+    "month",
+    "week",
+    "time",
+    "datetime-local",
+    "number",
+]);
+/**
+ * Library fields standing in for one of the native inputs above, and so
+ * blocking implicit submission the same way it does.
+ */
+const BLOCKING_FIELDS = [
+    "eun-input",
+    "eun-search",
+    "eun-input-phone",
+    "eun-counter",
+    "eun-date-picker",
+    "eun-time-picker",
+].join(", ");
+/**
+ * Whether a key press should trigger implicit submission: Enter, outside
+ * of an IME composition, and not already handled by something else.
+ *
+ * @param event - The keydown event to check.
+ * @returns Whether the event asks for implicit submission.
+ */
+export function isImplicitSubmissionKey(event) {
+    return (event.key === "Enter" &&
+        !event.isComposing &&
+        event.keyCode !== 229 &&
+        !event.defaultPrevented);
+}
+/**
+ * Submits a form the way the browser does when Enter is pressed in one of
+ * its text fields, since a field whose native input lives in a shadow root
+ * never triggers it on its own. Clicks the form's default button when it
+ * has one, unless that button is disabled. Without one, submits only when
+ * the form holds a single text field.
+ *
+ * @param form - The form to submit.
+ */
+export function submitImplicitly(form) {
+    const defaultButton = form.querySelector(SUBMIT_BUTTONS);
+    if (defaultButton) {
+        if (!defaultButton.matches(":disabled, [disabled]")) {
+            defaultButton.click();
+        }
+        return;
+    }
+    const blockingFields = Array.from(form.elements).filter((element) => (element instanceof HTMLInputElement &&
+        BLOCKING_INPUT_TYPES.has(element.type)) ||
+        element.matches(BLOCKING_FIELDS));
+    if (blockingFields.length <= 1) {
+        form.requestSubmit();
+    }
+}

package/dist/utils/listbox-options.utils.d.ts

@@ -31,3 +31,14 @@ export declare function parseListboxOptions(children: Iterable<Element>): Listbo
  * @returns the rendered template, or the plain `label` when nothing matches.
  */
 export declare function renderHighlightedLabel(label: string, query: string): TemplateResult | string;
+/**
+ * Renders a listbox's option rows, wrapping each run of options sharing an
+ * `optgroup` in a `role="group"` row named by that group's label, so
+ * assistive technology announces which group an option belongs to.
+ * Options outside any group are rendered as they are.
+ *
+ * @param options the options to render, in display order.
+ * @param renderOption renders one option row, given its index in `options`.
+ * @returns the rendered rows.
+ */
+export declare function renderListboxRows<T extends ListboxOption>(options: T[], renderOption: (option: T, index: number) => TemplateResult): TemplateResult[];

package/dist/utils/listbox-options.utils.js

@@ -48,7 +48,45 @@ export function renderHighlightedLabel(label, query) {
     if (index === -1) {
         return label;
     }
-    return html `${label.slice(0, index)}<mark
-      >${label.slice(index, index + query.length)}</mark
-    >${label.slice(index + query.length)}`;
+    return html `${label.slice(0, index)}<mark>${label.slice(index, index + query.length)}</mark>${label.slice(index + query.length)}`;
+}
+/**
+ * Renders a listbox's option rows, wrapping each run of options sharing an
+ * `optgroup` in a `role="group"` row named by that group's label, so
+ * assistive technology announces which group an option belongs to.
+ * Options outside any group are rendered as they are.
+ *
+ * @param options the options to render, in display order.
+ * @param renderOption renders one option row, given its index in `options`.
+ * @returns the rendered rows.
+ */
+export function renderListboxRows(options, renderOption) {
+    const rows = [];
+    let groupCount = 0;
+    let index = 0;
+    while (index < options.length) {
+        const { group } = options[index];
+        const start = index;
+        while (index < options.length && options[index].group === group) {
+            index += 1;
+        }
+        const run = options
+            .slice(start, index)
+            .map((option, offset) => renderOption(option, start + offset));
+        if (!group) {
+            rows.push(...run);
+            continue;
+        }
+        const labelId = `listbox-group-${groupCount}`;
+        groupCount += 1;
+        rows.push(html `
+      <li class="option-group" role="group" aria-labelledby=${labelId}>
+        <div id=${labelId} class="group-label">${group}</div>
+        <ul class="group-options" role="presentation">
+          ${run}
+        </ul>
+      </li>
+    `);
+    }
+    return rows;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eunomia/elements",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.7",
   "description": "Eunomia the framework-agnostic web component design system",
   "type": "module",
   "homepage": "https://eunomia-ds.vercel.app",
@@ -169,6 +169,10 @@
       "types": "./dist/components/form/radio/radio.d.ts",
       "default": "./dist/components/form/radio/radio.js"
     },
+    "./rating.js": {
+      "types": "./dist/components/form/rating/rating.d.ts",
+      "default": "./dist/components/form/rating/rating.js"
+    },
     "./scheduler-event-editor.js": {
       "types": "./dist/features/scheduler/scheduler-event-editor/scheduler-event-editor.d.ts",
       "default": "./dist/features/scheduler/scheduler-event-editor/scheduler-event-editor.js"
@@ -291,17 +295,32 @@
     },
     "./styles/*": "./styles/*",
     "./cdn/*": "./dist/cdn/*",
+    "./alert-ssr.css": "./dist/ssr/alert-ssr.css",
     "./animate-ssr.css": "./dist/ssr/animate-ssr.css",
-    "./toolbar-ssr.css": "./dist/ssr/toolbar-ssr.css",
-    "./sidebar-ssr.css": "./dist/ssr/sidebar-ssr.css",
-    "./overlay-ssr.css": "./dist/ssr/overlay-ssr.css",
-    "./links-ssr.css": "./dist/ssr/links-ssr.css",
+    "./badge-ssr.css": "./dist/ssr/badge-ssr.css",
+    "./breadcrumb-ssr.css": "./dist/ssr/breadcrumb-ssr.css",
     "./button-ssr.css": "./dist/ssr/button-ssr.css",
-    "./tag-ssr.css": "./dist/ssr/tag-ssr.css",
     "./card-ssr.css": "./dist/ssr/card-ssr.css",
+    "./carousel-ssr.css": "./dist/ssr/carousel-ssr.css",
+    "./checkbox-ssr.css": "./dist/ssr/checkbox-ssr.css",
+    "./chip-ssr.css": "./dist/ssr/chip-ssr.css",
+    "./collapse-ssr.css": "./dist/ssr/collapse-ssr.css",
+    "./description-list-ssr.css": "./dist/ssr/description-list-ssr.css",
+    "./field-ssr.css": "./dist/ssr/field-ssr.css",
+    "./icon-ssr.css": "./dist/ssr/icon-ssr.css",
+    "./image-carousel-ssr.css": "./dist/ssr/image-carousel-ssr.css",
+    "./links-ssr.css": "./dist/ssr/links-ssr.css",
+    "./overlay-ssr.css": "./dist/ssr/overlay-ssr.css",
+    "./pagination-ssr.css": "./dist/ssr/pagination-ssr.css",
+    "./rating-ssr.css": "./dist/ssr/rating-ssr.css",
     "./rich-text.css": "./dist/ssr/rich-text.css",
+    "./sidebar-ssr.css": "./dist/ssr/sidebar-ssr.css",
+    "./skeleton-ssr.css": "./dist/ssr/skeleton-ssr.css",
     "./table-ssr.css": "./dist/ssr/table-ssr.css",
-    "./description-list-ssr.css": "./dist/ssr/description-list-ssr.css"
+    "./tabs-ssr.css": "./dist/ssr/tabs-ssr.css",
+    "./tag-ssr.css": "./dist/ssr/tag-ssr.css",
+    "./toggle-group-ssr.css": "./dist/ssr/toggle-group-ssr.css",
+    "./toolbar-ssr.css": "./dist/ssr/toolbar-ssr.css"
   },
   "files": [
     "dist",

package/dist/cdn/components/chunks/chunk-4PI6RDUS.js

@@ -1 +0,0 @@
-import{a as r,j as a}from"./chunk-YITWLCD3.js";var o=n=>{class e extends n{constructor(){super(...arguments);this.appearance="outline"}}return r([a({reflect:!0})],e.prototype,"appearance",2),e};export{o as a};

package/dist/cdn/components/chunks/chunk-A3X4KD2X.js

@@ -1 +0,0 @@
-import{b as n}from"./chunk-VOTRXBDS.js";import{a as r}from"./chunk-YYCEPZUN.js";import{a as i,j as a}from"./chunk-YITWLCD3.js";var p=s=>{class t extends s{constructor(){super(...arguments);this.checked=!1;this.checkable=!0;this.buildCommonValidators=()=>this.required&&!this.checked?{validity:{valueMissing:!0},message:this.validationDictionary.validation.valueMissing}:{validity:{}}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","checkbox"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.defaultChecked!==void 0&&!this.hasAttribute("checked")&&(this.checked=this.defaultChecked),this.addEventListener("keydown",this.handleKeydown)}formResetCallback(){this.checked=this.defaultChecked??!1,this.dirty=!1,this.touched=!1}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback?.()}updated(e){super.updated(e),e.has("checked")&&(this.setAttribute("aria-checked",String(this.checked)),this.updateInternals()),n(e)&&this.setAttribute("aria-invalid",String(this.showError)),e.has("required")&&this.setAttribute("aria-required",String(this.required))}handleClick(e){this.handleChange(e)}handleChange(e){if(e.stopPropagation(),!(this.disabled||this.readonly||this.inert)){if(e.preventDefault(),this.checked=!this.checked,this.updateInternals(),this.checkValidity(this.checked),this.description){let d=this.description instanceof Array?this.description.join(","):this.description;this.setAttribute("aria-description",d)}else this.removeAttribute("aria-description");this.dispatchEvent(new r(this.checked))}}handleKeydown(e){e.key===" "&&(e.preventDefault(),this.handleChange(e))}updateInternals(){this.setFormValue(this.valueState)}}return i([a({type:Boolean,reflect:!0})],t.prototype,"checked",2),i([a({type:Boolean,attribute:"default-checked"})],t.prototype,"defaultChecked",2),t};export{p as a};