@crowdstrike/glide-core 0.26.0 → 0.27.0

package/dist/tooltip.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tooltip.styles.js";import"./tooltip.container.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=!1,this.#o=!1,this.#i=!1,this.#r=[],this.#l=createRef(),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#a}set label(e){this.#a=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}get disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#n():this.#d();const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.disabled=e);const o=this.#l.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get offset(){return this.#c??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#c=e}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e,e&&t&&!this.disabled?(this.#n(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&!this.disabled&&(this.#d(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get screenreaderHidden(){return this.#i}set screenreaderHidden(e){this.#i=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.screenreaderHidden=e);const o=this.#l.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get shortcut(){return this.#r}set shortcut(e){this.#r=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.shortcut=e)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#p),clearTimeout(this.#h)}firstUpdated(){this.#s.value&&(this.#s.value.popover="manual"),this.open&&!this.disabled&&this.#n();const e=document.createElement("glide-core-private-tooltip-container");e.label=this.label,e.screenreaderHidden=this.screenreaderHidden,e.shortcut=this.shortcut,this.append(e)}render(){return html`<div class="component" data-test="component" @mouseover="${this.#m}" @mouseout="${this.#f}"><div class="target-slot-container"><slot class="target-slot" data-test="target-slot" name="target" @focusin="${this.#u}" @focusout="${this.#v}" @keydown="${this.#g}" @slotchange="${this.#b}" ${assertSlot()} ${ref(this.#l)}></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" ${ref(this.#s)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" name="private"></slot></div></div></div>`}#e;#y;#p;#t;#o;#i;#a;#c;#h;#r;#l;#s;#w(){clearTimeout(this.#p)}#d(){this.#s.value?.hidePopover(),this.#y?.()}#f(){this.#E(),clearTimeout(this.#h)}#m(){this.#w(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#s.value?.dataset.openDelay))}#b(){const e=this.querySelector("glide-core-private-tooltip-container"),t=this.#l.value?.assignedElements().at(0);e&&t&&!this.disabled&&!this.screenreaderHidden&&t.setAttribute("aria-describedby",e.id)}#u(){this.open=!0}#v(){this.open=!1}#g(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}#E(){this.#p=setTimeout((()=>{this.open=!1}),Number(this.#s.value?.dataset.closeDelay))}#n(){this.disabled||(this.#y?.(),this.#l.value&&this.#s.value&&(this.#y=autoUpdate(this.#l.value,this.#s.value,(()=>{(async()=>{if(this.#l.value&&this.#s.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#l.value,this.#s.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({crossAxis:!0,limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#s.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?`${i.arrow.x}px`:null,top:i.arrow?.y?`${i.arrow.y}px`:null}),this.effectivePlacement=o,this.#s.value.showPopover();const r=this.querySelector("glide-core-private-tooltip-container");r&&("bottom"===o||"left"===o||"right"===o||"top"===o)&&(r.placement=o)}})()}))))}};__decorate([property({reflect:!0}),required],GlideCoreTooltip.prototype,"label",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreTooltip.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"screenreaderHidden",null),__decorate([property({reflect:!0,type:Array})],GlideCoreTooltip.prototype,"shortcut",null),__decorate([property({reflect:!0})],GlideCoreTooltip.prototype,"version",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip"),final],GlideCoreTooltip);export default GlideCoreTooltip;const icons={topArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`,rightArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`,bottomArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`,leftArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`};
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tooltip.styles.js";import"./tooltip.container.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Tooltip=class Tooltip extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=!1,this.#o=!1,this.#i=!1,this.#r=[],this.#s=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#a}set label(e){this.#a=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}get disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#n():this.#c();const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.disabled=e);const o=this.#s.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get offset(){return this.#d??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#d=e}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e,e&&t&&!this.disabled?(this.#n(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&!this.disabled&&(this.#c(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get screenreaderHidden(){return this.#i}set screenreaderHidden(e){this.#i=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.screenreaderHidden=e);const o=this.#s.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get shortcut(){return this.#r}set shortcut(e){this.#r=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.shortcut=e)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#p),clearTimeout(this.#h)}firstUpdated(){this.#l.value&&(this.#l.value.popover="manual"),this.open&&!this.disabled&&this.#n();const e=document.createElement("glide-core-private-tooltip-container");e.label=this.label,e.screenreaderHidden=this.screenreaderHidden,e.shortcut=this.shortcut,this.append(e)}render(){return html`<div class="component" data-test="component" @mouseover="${this.#m}" @mouseout="${this.#f}"><div class="target-slot-container"><slot class="target-slot" data-test="target-slot" name="target" @focusin="${this.#u}" @focusout="${this.#v}" @keydown="${this.#g}" @slotchange="${this.#b}" ${assertSlot()} ${ref(this.#s)}></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" ${ref(this.#l)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" name="private"></slot></div></div></div>`}#e;#y;#p;#t;#o;#i;#a;#d;#h;#r;#s;#l;#w(){clearTimeout(this.#p)}#c(){this.#l.value?.hidePopover(),this.#y?.()}#f(){this.#E(),clearTimeout(this.#h)}#m(){this.#w(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#l.value?.dataset.openDelay))}#b(){const e=this.querySelector("glide-core-private-tooltip-container"),t=this.#s.value?.assignedElements().at(0);e&&t&&!this.disabled&&!this.screenreaderHidden&&t.setAttribute("aria-describedby",e.id)}#u(){this.open=!0}#v(){this.open=!1}#g(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}#E(){this.#p=setTimeout((()=>{this.open=!1}),Number(this.#l.value?.dataset.closeDelay))}#n(){this.disabled||(this.#y?.(),this.#s.value&&this.#l.value&&(this.#y=autoUpdate(this.#s.value,this.#l.value,(()=>{(async()=>{if(this.#s.value&&this.#l.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#s.value,this.#l.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({crossAxis:!0,limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#l.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?`${i.arrow.x}px`:null,top:i.arrow?.y?`${i.arrow.y}px`:null}),this.effectivePlacement=o,this.#l.value.showPopover();const r=this.querySelector("glide-core-private-tooltip-container");r&&("bottom"===o||"left"===o||"right"===o||"top"===o)&&(r.placement=o)}})()}))))}};__decorate([property({reflect:!0}),required],Tooltip.prototype,"label",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],Tooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"open",null),__decorate([property({reflect:!0})],Tooltip.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",reflect:!0,type:Boolean})],Tooltip.prototype,"screenreaderHidden",null),__decorate([property({reflect:!0,type:Array})],Tooltip.prototype,"shortcut",null),__decorate([property({reflect:!0})],Tooltip.prototype,"version",void 0),__decorate([state()],Tooltip.prototype,"effectivePlacement",void 0),Tooltip=__decorate([customElement("glide-core-tooltip"),final],Tooltip);export default Tooltip;const icons={topArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`,rightArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`,bottomArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`,leftArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`};

package/dist/translations/en.js

@@ -1 +1 @@
-const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",selectAll:"Select all",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noResults:"No results found",tooltip:"Tooltip:",severityInformational:"Severity: Informational",severityCritical:"Severity: Critical",severityMedium:"Severity: Medium",success:"Success:",error:"Error:",informational:"Informational:",loading:"Loading",announcedCharacterCount:(t,e)=>`Character count ${t} of ${e}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`Clear ${t} entry`,editOption:t=>`Edit option: ${t}`,editTag:t=>`Edit tag: ${t}`,removeTag:t=>`Remove tag: ${t}`,itemCount:t=>`${t} items`};export default translation;
+const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",selectAll:"Select all",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noAvailableOptions:"No options available",noMatchingOptions:"No matching options",tooltip:"Tooltip:",severityInformational:"Severity: Informational",severityCritical:"Severity: Critical",severityMedium:"Severity: Medium",success:"Success:",error:"Error:",informational:"Informational:",loading:"Loading",announcedCharacterCount:(t,i)=>`Character count ${t} of ${i}`,displayedCharacterCount:(t,i)=>`${t}/${i}`,clearEntry:t=>`Clear ${t} entry`,editOption:t=>`Edit option: ${t}`,editTag:t=>`Edit tag: ${t}`,removeTag:t=>`Remove tag: ${t}`,itemCount:t=>`${t} items`};export default translation;

package/dist/translations/fr.d.ts

@@ -1,5 +1,5 @@
 import type { Translation } from '../library/localize.js';
-export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading"];
+export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions"];
 type PendingTranslation = (typeof PENDING_STRINGS)[number];
 declare const translation: Omit<Translation, PendingTranslation>;
 export default translation;

package/dist/translations/fr.js

@@ -1 +1 @@
-export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"FERMER",dismiss:"Ignorer",selectAll:"Tout sélectionner",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",noResults:"Aucun résultat trouvé",tooltip:"Info-bulle :",announcedCharacterCount:(e,t)=>`Nombre de caractères ${e} sur ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Effacer l'entrée ${e}`,editOption:e=>`Modifier l'option : ${e}`,editTag:e=>`Modifier la balise : ${e}`,removeTag:e=>`Enlever la balise : ${e}`,itemCount:e=>`${e} éléments`};export default translation;
+export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading","noAvailableOptions","noMatchingOptions"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"FERMER",dismiss:"Ignorer",selectAll:"Tout sélectionner",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",tooltip:"Info-bulle :",announcedCharacterCount:(e,t)=>`Nombre de caractères ${e} sur ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Effacer l'entrée ${e}`,editOption:e=>`Modifier l'option : ${e}`,editTag:e=>`Modifier la balise : ${e}`,removeTag:e=>`Enlever la balise : ${e}`,itemCount:e=>`${e} éléments`};export default translation;

package/dist/translations/ja.d.ts

@@ -1,5 +1,5 @@
 import type { Translation } from '../library/localize.js';
-export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading"];
+export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions"];
 type PendingTranslation = (typeof PENDING_STRINGS)[number];
 declare const translation: Omit<Translation, PendingTranslation>;
 export default translation;

package/dist/translations/ja.js

@@ -1 +1 @@
-export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"閉じる",selectAll:"すべて選択",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",noResults:"結果が見つかりません",tooltip:"ツールチップ：",announcedCharacterCount:(t,e)=>`文字数 ${t}/${e}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`${t}入力をクリア`,editOption:t=>`編集オプション：${t}`,editTag:t=>`タグの編集：${t}`,removeTag:t=>`タグの削除：${t}`,itemCount:t=>`${t}件`};export default translation;
+export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading","noAvailableOptions","noMatchingOptions"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"閉じる",selectAll:"すべて選択",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",tooltip:"ツールチップ：",announcedCharacterCount:(t,e)=>`文字数 ${t}/${e}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`${t}入力をクリア`,editOption:t=>`編集オプション：${t}`,editTag:t=>`タグの編集：${t}`,removeTag:t=>`タグの削除：${t}`,itemCount:t=>`${t}件`};export default translation;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "A Web Component design system",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -52,8 +52,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.12",
-    "@shoelace-style/localize": "^3.2.1",
-    "nanoid": "^5.0.9"
+    "@shoelace-style/localize": "^3.2.1"
   },
   "peerDependencies": {
     "lit": "^3.2.1"
@@ -65,6 +64,7 @@
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.22.0",
     "@figma/rest-api-spec": "^0.27.0",
+    "@html-eslint/eslint-plugin": "^0.40.3",
     "@open-wc/testing": "^4.0.0",
     "@playwright/test": "^1.52.0",
     "@rollup/plugin-commonjs": "^28.0.2",
@@ -173,7 +173,7 @@
     "test": "per-env",
     "test:development": "npm-run-all --parallel test:development:web-test-runner test:development:web-test-runner:serve-coverage",
     "test:development:playwright": "playwright test --quiet --ui-port 6007 --update-snapshots",
-    "test:development:playwright:update": "rimraf ./src/aria-snapshots && playwright test --quiet --project aria --update-snapshots --workers 100%",
+    "test:development:playwright:update": "rimraf ./src/aria-snapshots && playwright test --quiet --project aria --update-snapshots --update-source-method=overwrite --workers 100%",
     "test:development:vitest": "vitest --config ./vitest.config.js & chokidar './src/eslint/**' './src/stylelint/**' --ignore './src/eslint/rules/*.test.ts' './src/stylelint/*.test.ts' --initial --silent --command 'tsc --noCheck --outDir ./dist'",
     "test:development:vitest:comment": "Excluded from `test:development` because Vitest muddies the console when running alongside Web Test Runner.",
     "test:development:web-test-runner": "web-test-runner --watch",