@descope/web-components-ui 1.0.246 → 1.0.247

package/src/components/button-selection-group-fields/descope-button-selection-group/ButtonSelectionGroupClass.js

@@ -0,0 +1,67 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
+} from '../../../mixins';
+import { componentName as descopeInternalComponentName } from '../descope-button-selection-group-internal/ButtonSelectionGroupInternalClass';
+import { compose } from '../../../helpers';
+import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
+import {
+  buttonSelectionGroupBaseMixin,
+  buttonSelectionGroupMappings,
+  buttonSelectionGroupStyles,
+} from '../baseButtonSelectionGroup';
+
+export const componentName = getComponentName('button-selection-group');
+
+const buttonSelectionGroupMixin = (superclass) =>
+  class ButtonMultiSelectionGroupMixinClass extends superclass {
+    init() {
+      super.init?.();
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+      <${descopeInternalComponentName}
+      	name="button-selection-group"
+      	slot="input"
+        tabindex="-1"
+        part="internal-component"
+      >
+        <slot></slot>
+      </${descopeInternalComponentName}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: ['size', 'default-value', 'allow-deselect'],
+      });
+    }
+  };
+
+export const ButtonSelectionGroupClass = compose(
+  createStyleMixin({
+    mappings: {
+      ...buttonSelectionGroupMappings,
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  componentNameValidationMixin,
+  buttonSelectionGroupBaseMixin,
+  buttonSelectionGroupMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => buttonSelectionGroupStyles,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);
+
+export default ButtonSelectionGroupClass;

package/src/components/{descope-button-selection-group → button-selection-group-fields/descope-button-selection-group}/index.js

@@ -1,6 +1,6 @@
 import { componentName, ButtonSelectionGroupClass } from './ButtonSelectionGroupClass';
-import './descope-button-selection-group-internal';
-import './descope-button-selection-group-item';
+import '../descope-button-selection-group-internal';
+import '../descope-button-selection-group-item';
 
 customElements.define(componentName, ButtonSelectionGroupClass);
 

package/src/components/button-selection-group-fields/descope-button-selection-group-internal/ButtonSelectionGroupInternalClass.js

@@ -0,0 +1,77 @@
+import { getComponentName } from '../../../helpers/componentHelpers';
+import { createBaseButtonSelectionGroupInternalClass } from '../createBaseButtonSelectionGroupInternalClass';
+
+export const componentName = getComponentName('button-selection-group-internal');
+
+export class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupInternalClass(
+  componentName
+) {
+  getSelectedNode() {
+    return this.items.find((item) => item.hasAttribute('selected'));
+  }
+
+  get allowDeselect() {
+    return this.getAttribute('allow-deselect') === 'true';
+  }
+
+  removeSelected() {
+    this.getSelectedNode()?.removeAttribute('selected');
+  }
+
+  onClick(e) {
+    if (e.target !== e.currentTarget) {
+      if (e.target === this.getSelectedNode() && this.allowDeselect) {
+        this.removeSelected();
+      } else {
+        this.setSelected(e.target);
+      }
+      this.dispatchChange();
+    }
+  }
+
+  setSelected(node) {
+    if (node !== this.getSelectedNode()) {
+      this.removeSelected();
+      node?.setAttribute('selected', 'true');
+    }
+  }
+
+  get defaultValue() {
+    return this.getAttribute('default-value');
+  }
+
+  setDefaultValue() {
+    // we want to defer this action until all attributes are synched
+    setTimeout(() => {
+      if (this.defaultValue) {
+        this.value = this.defaultValue;
+        this.setCustomValidity();
+      }
+    });
+  }
+
+  get value() {
+    return this.getSelectedNode()?.value || '';
+  }
+
+  set value(value) {
+    const node = this.items.find((child) => child.value === value);
+    this.setSelected(node);
+  }
+
+  getValidity() {
+    if (this.isRequired && !this.value) {
+      return { valueMissing: true };
+    }
+
+    return {};
+  }
+
+  init() {
+    super.init();
+
+    this.setDefaultValue();
+
+    this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
+  }
+}

package/src/index.cjs.js

@@ -27,8 +27,9 @@ export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone
 export { NewPasswordClass } from './components/descope-new-password/NewPasswordClass';
 export { RecaptchaClass } from './components/descope-recaptcha/RecaptchaClass';
 export { UploadFileClass } from './components/descope-upload-file/UploadFileClass';
-export { ButtonSelectionGroupClass } from './components/descope-button-selection-group/ButtonSelectionGroupClass';
-export { ButtonSelectionGroupItemClass } from './components/descope-button-selection-group/descope-button-selection-group-item/ButtonSelectionGroupItemClass';
+export { ButtonSelectionGroupClass } from './components/button-selection-group-fields/descope-button-selection-group/ButtonSelectionGroupClass';
+export { ButtonMultiSelectionGroupClass } from './components/button-selection-group-fields/descope-button-multi-selection-group/ButtonMultiSelectionGroupClass';
+export { ButtonSelectionGroupItemClass } from './components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass';
 export { ModalClass } from './components/descope-modal/ModalClass';
 export { NotificationClass } from './components/descope-notification/NotificationClass';
 export { GridClass } from './components/descope-grid/GridClass';

package/src/index.d.ts

@@ -32,7 +32,8 @@ export { PhoneFieldInputBoxClass } from './components/phone-fields/descope-phone
 export { NewPasswordClass } from './components/descope-new-password';
 export { RecaptchaClass } from './components/descope-recaptcha';
 export { UploadFileClass } from './components/descope-upload-file';
-export { ButtonSelectionGroupClass } from './components/descope-button-selection-group/ButtonSelectionGroupClass';
+export { ButtonSelectionGroupClass } from './components/button-selection-group-fields/descope-button-selection-group/ButtonSelectionGroupClass';
+export { ButtonMultiSelectionGroupClass } from './components/button-selection-group-fields/descope-button-multi-selection-group/ButtonMultiSelectionGroupClass';
 export { GridClass } from './components/descope-grid/GridClass';
 export { GridTextColumnClass } from './components/descope-grid/descope-grid-text-column/index';
 export { GridSelectionColumnClass } from './components/descope-grid/descope-grid-selection-column/index';

package/src/index.js

@@ -22,7 +22,8 @@ export * from './components/phone-fields/descope-phone-input-box-field';
 export * from './components/descope-new-password';
 export * from './components/descope-recaptcha';
 export * from './components/descope-upload-file';
-export * from './components/descope-button-selection-group';
+export * from './components/button-selection-group-fields/descope-button-selection-group';
+export * from './components/button-selection-group-fields/descope-button-multi-selection-group';
 export * from './components/descope-grid';
 export * from './components/descope-multi-select-combo-box';
 export * from './components/descope-badge';

package/src/mixins/inputValidationMixin.js

@@ -45,11 +45,11 @@ export const inputValidationMixin = (superclass) =>
     }
 
     get defaultErrorMsgRangeUnderflow() {
-      return `At least ${this.minItemsSelection} items are required.`;
+      return `At least ${this.getAttribute('min-items-selection')} items are required.`;
     }
 
     get defaultErrorMsgRangeOverflow() {
-      return `At most ${this.maxItemsSelection} items are allowed.`;
+      return `At most ${this.getAttribute('max-items-selection')} items are allowed.`;
     }
 
     getErrorMessage(flags) {

package/src/theme/components/buttonSelectionGroup/baseButtonSelectionGroup.js

@@ -0,0 +1,15 @@
+import { getThemeRefs } from '../../../helpers/themeHelpers';
+import globals from '../../globals';
+import { refs } from '../inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+
+export const createBaseButtonSelectionGroupMappings = (vars) => ({
+  [vars.hostDirection]: refs.direction,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.itemsSpacing]: globalRefs.spacing.sm,
+  [vars.hostWidth]: refs.width,
+});

package/src/theme/components/buttonSelectionGroup/buttonMultiSelectionGroup.js

@@ -0,0 +1,11 @@
+import { ButtonMultiSelectionGroupClass } from '../../../components/button-selection-group-fields/descope-button-multi-selection-group/ButtonMultiSelectionGroupClass';
+import { createBaseButtonSelectionGroupMappings } from './baseButtonSelectionGroup';
+
+const vars = ButtonMultiSelectionGroupClass.cssVarList;
+
+const buttonMultiSelectionGroup = {
+  ...createBaseButtonSelectionGroupMappings(vars),
+};
+
+export default buttonMultiSelectionGroup;
+export { vars };

package/src/theme/components/buttonSelectionGroup/buttonSelectionGroup.js

@@ -1,19 +1,10 @@
-import { ButtonSelectionGroupClass } from '../../../components/descope-button-selection-group/ButtonSelectionGroupClass';
-import { getThemeRefs } from '../../../helpers/themeHelpers';
-import globals from '../../globals';
-import { refs } from '../inputWrapper';
+import { ButtonSelectionGroupClass } from '../../../components/button-selection-group-fields/descope-button-selection-group/ButtonSelectionGroupClass';
+import { createBaseButtonSelectionGroupMappings } from './baseButtonSelectionGroup';
 
-const globalRefs = getThemeRefs(globals);
 const vars = ButtonSelectionGroupClass.cssVarList;
 
 const buttonSelectionGroup = {
-  [vars.hostDirection]: refs.direction,
-  [vars.fontFamily]: refs.fontFamily,
-  [vars.labelTextColor]: refs.labelTextColor,
-  [vars.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars.itemsSpacing]: globalRefs.spacing.sm,
-  [vars.hostWidth]: refs.width,
+  ...createBaseButtonSelectionGroupMappings(vars),
 };
 
 export default buttonSelectionGroup;

package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js

@@ -1,4 +1,4 @@
-import { ButtonSelectionGroupItemClass } from '../../../components/descope-button-selection-group/descope-button-selection-group-item/ButtonSelectionGroupItemClass';
+import { ButtonSelectionGroupItemClass } from '../../../components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass';
 import { getThemeRefs } from '../../../helpers/themeHelpers';
 import globals from '../../globals';
 

package/src/theme/components/index.js

@@ -23,6 +23,7 @@ import * as inputWrapper from './inputWrapper';
 import * as uploadFile from './uploadFile';
 import * as buttonSelectionGroupItem from './buttonSelectionGroup/buttonSelectionGroupItem';
 import * as buttonSelectionGroup from './buttonSelectionGroup/buttonSelectionGroup';
+import * as buttonMultiSelectionGroup from './buttonSelectionGroup/buttonMultiSelectionGroup';
 import * as modal from './modal';
 import * as grid from './grid';
 import * as notificationCard from './notificationCard';
@@ -56,6 +57,7 @@ const components = {
   uploadFile,
   buttonSelectionGroupItem,
   buttonSelectionGroup,
+  buttonMultiSelectionGroup,
   modal,
   grid,
   notificationCard,

package/dist/umd/descope-button-selection-group-descope-button-selection-group-internal-index-js.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1348],{3547:(e,t,s)=>{s.d(t,{B:()=>a,f:()=>n});var i=s(3878),l=s(4567),r=s(7878);const n=(0,l.iY)("button-selection-group-internal");class a extends((0,i.P)({componentName:n,baseSelector:"slot"})){constructor(){super(),this.innerHTML='\n    <style>\n    slot {\n      box-sizing: border-box;\n      width: 100%;\n      display: flex;\n      flex-wrap: wrap;\n    }\n  </style>\n  <slot part="wrapper"></slot>\n\t\t'}#e=r.C.bind(this,"change");get items(){return this.querySelector("slot").assignedElements()}get isReadonly(){return"true"===this.getAttribute("readonly")}getSelectedNode(){return this.items.find((e=>e.hasAttribute("selected")))}get size(){return this.getAttribute("size")||"md"}get allowDeselect(){return"true"===this.getAttribute("allow-deselect")}removeSelected(){this.getSelectedNode()?.removeAttribute("selected")}onClick(e){e.target!==e.currentTarget&&(e.target===this.getSelectedNode()&&this.allowDeselect?this.removeSelected():this.setSelected(e.target),this.#e())}setSelected(e){e!==this.getSelectedNode()&&(this.removeSelected(),e?.setAttribute("selected","true"))}get value(){return this.getSelectedNode()?.value||""}set value(e){const t=this.items.find((t=>t.value===e));this.setSelected(t)}get defaultValue(){return this.getAttribute("default-value")}setDefaultValue(){setTimeout((()=>{this.defaultValue&&(this.value=this.defaultValue,this.setCustomValidity())}))}onSizeChange(){this.items.forEach((e=>{e.setAttribute("size",this.size)}))}onReadOnlyChange(){this.querySelector("slot").toggleAttribute("inert",this.isReadonly)}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}onObservedAttributeChange(e){e.forEach((e=>{switch(e){case"size":this.onSizeChange();break;case"readonly":this.onReadOnlyChange()}}))}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.items[0]?.focus()})),super.init?.(),this.setDefaultValue(),(0,l.FX)(this,this.onObservedAttributeChange.bind(this),{includeAttrs:["size","readonly"]}),this.querySelector("slot").addEventListener("click",this.onClick.bind(this))}}},8460:(e,t,s)=>{s.r(t),s.d(t,{ButtonSelectionGroupInternalClass:()=>i.B});var i=s(3547);customElements.define(i.f,i.B)}}]);

package/dist/umd/descope-button-selection-group-descope-button-selection-group-item-index-js.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[206],{7901:(t,e,o)=>{o.r(e),o.d(e,{ButtonSelectionGroupItemClass:()=>u});var s=o(1e3),n=o(2561),r=o(2061),i=o(4567),a=o(9690);const c=(0,i.iY)("button-selection-group-item");class l extends((0,n.s)({componentName:c,baseSelector:":host > descope-button"})){get size(){return this.getAttribute("size")||"md"}get variant(){return this.getAttribute("variant")||"contained"}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t<style>\n      descope-button {\n        max-width: 100%;\n      }\n\t\t\tdescope-button > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\toverflow: hidden;\n        text-overflow: ellipsis;\n        display: inline-block;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n        max-width: 100%\n\t\t\t}\n\t\t</style>\n    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">\n      <slot></slot>\n    </descope-button>\n\t`,(0,i.oP)(this,this.baseElement,{includeAttrs:["size","variant"]})}handleFocus(){this.shadowRoot.querySelector("descope-button")?.focus()}focus(){this.handleFocus()}init(){super.init(),this.addEventListener("focus",(t=>{t.isTrusted&&this.handleFocus()}))}}const u=(0,r.qC)((0,s.yk)({mappings:{hostDirection:{selector:()=>a.n.componentName,property:a.n.cssVarList.hostDirection},backgroundColor:{selector:()=>a.n.componentName,property:a.n.cssVarList.backgroundColor},labelTextColor:{selector:()=>a.n.componentName,property:a.n.cssVarList.labelTextColor},borderColor:{selector:()=>a.n.componentName,property:a.n.cssVarList.borderColor},borderStyle:{selector:()=>a.n.componentName,property:a.n.cssVarList.borderStyle},borderRadius:{selector:()=>a.n.componentName,property:a.n.cssVarList.borderRadius}}}),s.e4,s.Ae)(l);o(2018),customElements.define(c,u)}}]);

package/dist/umd/descope-button-selection-group-index-js.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6699],{8086:(t,e,n)=>{n.r(e),n.d(e,{ButtonSelectionGroupClass:()=>m});var r=n(1e3),i=n(3547),a=n(2061),s=n(4567),o=n(4201);const d=(0,s.iY)("button-selection-group"),{host:l,label:p,requiredIndicator:c,internalWrapper:u,errorMessage:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-button-selection-group-internal slot"},errorMessage:{selector:"::part(error-message)"}},m=(0,a.qC)((0,r.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},fontFamily:l,labelTextColor:[{...p,property:"color"},{...c,property:"color"}],labelRequiredIndicator:{...c,property:"content"},errorMessageTextColor:{...h,property:"color"},itemsSpacing:{...u,property:"gap"}}}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"]}),r.Ae,(t=>class extends t{#t=({value:t,label:e})=>`<descope-button-selection-group-item value="${t}">${e}</descope-button-selection-group-item>`;#e;get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get size(){return this.inputElement?.size}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" - ',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${i.f}\n\t\t\t\tname="button-selection-group"\n\t\t\t\tslot="input"\n        tabindex="-1"\n\t\t\t>\n        <slot></slot>\n      </${i.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.f),(0,s.oP)(this,this.inputElement,{includeAttrs:["size","default-value","allow-deselect"]}),this.renderItems(),(0,s.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,s.P$)(this,(({addedNodes:t})=>{t.forEach((t=>{t.setAttribute("size",this.size)}))}))}}))((0,r.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t\t${(0,o.DY)()}\n\t\t\t:host::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t\t:host::part(input-field)::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\n\t\t\tdescope-button-selection-group-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        display: inline-block;\n\t\t\t\tmin-height: initial;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbackground-color: transparent;\n\t\t\t\tpadding: 0;\n\t\t\t\toverflow: hidden;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\n\t\t\tvaadin-text-field {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%\n\t\t\t}\n\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\t\t\tborder: 0 solid;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n      ${(0,o.Wf)("vaadin-text-field")}\n\t\t\t${(0,o.Pd)("vaadin-text-field")}\n    `,excludeAttrsSync:["tabindex"],componentName:d}));n(8460),n(7901),customElements.define(d,m)}}]);

package/src/components/descope-button-selection-group/descope-button-selection-group-internal/ButtonSelectionGroupInternalClass.js

@@ -1,145 +0,0 @@
-import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
-import { getComponentName, observeAttributes } from '../../../helpers/componentHelpers';
-import { createDispatchEvent } from '../../../helpers/mixinsHelpers';
-
-export const componentName = getComponentName('button-selection-group-internal');
-
-export class ButtonSelectionGroupInternalClass extends createBaseInputClass({
-  componentName,
-  baseSelector: 'slot',
-}) {
-  constructor() {
-    super();
-
-    this.innerHTML = `
-    <style>
-    slot {
-      box-sizing: border-box;
-      width: 100%;
-      display: flex;
-      flex-wrap: wrap;
-    }
-  </style>
-  <slot part="wrapper"></slot>
-		`;
-  }
-
-  #dispatchChange = createDispatchEvent.bind(this, 'change');
-
-  get items() {
-    return this.querySelector('slot').assignedElements();
-  }
-
-  get isReadonly() {
-    return this.getAttribute('readonly') === 'true';
-  }
-
-  getSelectedNode() {
-    return this.items.find((item) => item.hasAttribute('selected'));
-  }
-
-  get size() {
-    return this.getAttribute('size') || 'md';
-  }
-
-  get allowDeselect() {
-    return this.getAttribute('allow-deselect') === 'true';
-  }
-
-  removeSelected() {
-    this.getSelectedNode()?.removeAttribute('selected');
-  }
-
-  onClick(e) {
-    if (e.target !== e.currentTarget) {
-      if (e.target === this.getSelectedNode() && this.allowDeselect) {
-        this.removeSelected();
-      } else {
-        this.setSelected(e.target);
-      }
-      this.#dispatchChange();
-    }
-  }
-
-  setSelected(node) {
-    if (node !== this.getSelectedNode()) {
-      this.removeSelected();
-      node?.setAttribute('selected', 'true');
-    }
-  }
-
-  get value() {
-    return this.getSelectedNode()?.value || '';
-  }
-
-  set value(value) {
-    const node = this.items.find((child) => child.value === value);
-    this.setSelected(node);
-  }
-
-  get defaultValue() {
-    return this.getAttribute('default-value');
-  }
-
-  setDefaultValue() {
-    // we want to defer this action until all attributes are synched
-    setTimeout(() => {
-      if (this.defaultValue) {
-        this.value = this.defaultValue;
-        this.setCustomValidity();
-      }
-    });
-  }
-
-  onSizeChange() {
-    this.items.forEach((item) => {
-      item.setAttribute('size', this.size);
-    });
-  }
-
-  onReadOnlyChange() {
-    this.querySelector('slot').toggleAttribute('inert', this.isReadonly);
-  }
-
-  getValidity() {
-    if (this.isRequired && !this.value) {
-      return { valueMissing: true };
-    }
-
-    return {};
-  }
-
-  onObservedAttributeChange(attrs) {
-    attrs.forEach((attr) => {
-      switch (attr) {
-        case 'size':
-          this.onSizeChange();
-          break;
-        case 'readonly':
-          this.onReadOnlyChange();
-          break;
-        default:
-          break;
-      }
-    });
-  }
-
-  init() {
-    // we are adding listeners before calling to super because it's stopping the events
-    this.addEventListener('focus', (e) => {
-      // we want to ignore focus events we are dispatching
-      if (e.isTrusted) {
-        this.items[0]?.focus();
-      }
-    });
-
-    super.init?.();
-    this.setDefaultValue();
-
-    observeAttributes(this, this.onObservedAttributeChange.bind(this), {
-      includeAttrs: ['size', 'readonly'],
-    });
-
-    this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
-  }
-}