@crowdstrike/glide-core 0.26.1 → 0.28.0

package/dist/slider.js

@@ -0,0 +1,168 @@
+var __decorate=this&&this.__decorate||function(e,i,t,a){var s,n=arguments.length,l=n<3?i:null===a?a=Object.getOwnPropertyDescriptor(i,t):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,i,t,a);else for(var m=e.length-1;m>=0;m--)(s=e[m])&&(l=(n<3?s(l):n>3?s(i,t,l):s(i,t))||l);return n>3&&l&&Object.defineProperty(i,t,l),l};import"./label.js";import{html,LitElement}from"lit";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{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./slider.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Slider=class Slider extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}get value(){return this.multiple&&void 0!==this.minimumValue&&void 0!==this.maximumValue?[this.minimumValue,this.maximumValue]:void 0!==this.minimumValue?[this.minimumValue]:[]}set value(e){if(0===e.length){const e=this.max-this.min;return this.minimumValue=this.min+Math.floor(.25*e),this.maximumValue=this.multiple?this.min+Math.ceil(.75*e):void 0,void this.#e()}if(this.multiple&&2===e.length&&void 0!==e[0]&&void 0!==e[1]){if(e[0]>e[1])throw new Error("The first value must be less than the second.");const i=Math.round(e[0]/this.step)*this.step,t=Math.round(e[1]/this.step)*this.step;return this.minimumValue=Math.max(i,this.min),this.maximumValue=Math.min(t,this.max),void this.#e()}if(this.multiple&&e.length>2)throw new Error("Only two values are allowed when `multiple`.");if(!this.multiple&&e.length>0&&void 0!==e[0]){const i=Math.round(e[0]/this.step)*this.step;return this.minimumValue=Math.max(Math.min(i,this.max),this.min),this.maximumValue=void 0,void this.#e()}}get max(){return this.#i}set max(e){this.#i=e,this.maximumValue=Math.min(this.maximumValue??this.#i,e),void 0!==this.minimumValue&&this.minimumValue>e&&(this.minimumValue=this.multiple&&void 0!==this.maximumValue?Math.min(e,this.maximumValue-this.step):e),this.#e()}get min(){return this.#t}set min(e){this.#t=e,this.minimumValue=Math.max(this.minimumValue??this.#t,e),this.multiple?void 0!==this.maximumValue&&this.maximumValue<e&&(this.maximumValue=Math.max(e,this.minimumValue+this.step)):this.maximumValue=void 0,this.#e()}get multiple(){return this.#a}set multiple(e){const i=this.#a;if(this.#a=e,i&&!e)return this.maximumValue=void 0,void this.updateComplete.then((()=>{this.#e()}));if(!i&&e&&void 0!==this.minimumValue){const e=this.max-this.min,i=this.min+Math.ceil(.75*e);this.minimumValue>=i?(this.maximumValue=this.max,this.minimumValue>=this.maximumValue&&(this.minimumValue=this.maximumValue-this.step)):this.maximumValue=i,this.updateComplete.then((()=>{this.#e()}))}}get step(){return this.#s}set step(e){this.#s=e>0?e:1}get form(){return this.#n.form}get validity(){return this.#n.validity}checkValidity(){this.isCheckingValidity=!0;const e=this.#n.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#l),document.removeEventListener("mousemove",this.#m),document.removeEventListener("mouseup",this.#h)}firstUpdated(){if(!this.multiple&&1===this.value.length)return this.minimumValue=this.value.at(0),this.#d=this.value,void this.#e();if(this.multiple&&2===this.value.length)return this.minimumValue=this.value.at(0),this.maximumValue=this.value.at(1),void 0!==this.minimumValue&&void 0!==this.maximumValue&&(this.#d=[this.minimumValue,this.maximumValue]),void this.#e();if(!this.value||0===this.value.length){const e=this.max-this.min;this.minimumValue=this.min+Math.floor(.25*e),this.maximumValue=this.multiple?this.min+Math.ceil(.75*e):void 0,this.#d=this.multiple&&void 0!==this.maximumValue?[this.minimumValue,this.maximumValue]:[this.minimumValue],this.#e()}}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#l.bind(this))}formResetCallback(){this.value=this.#d}render(){return html`
+      <glide-core-private-label
+        class=${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}
+        label=${ifDefined(this.label)}
+        orientation=${this.orientation}
+        split=${ifDefined(this.privateSplit??void 0)}
+        tooltip=${ifDefined(this.tooltip)}
+        ?disabled=${this.disabled}
+        ?error=${this.#u}
+        ?hide=${this.hideLabel}
+        ?required=${this.required}
+      >
+        <label>${this.label}</label>
+
+        <div
+          class=${classMap({"slider-container":!0,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#u})}
+          slot="control"
+        >
+          ${when(this.multiple,(()=>html`<input
+                  aria-describedby="meta"
+                  aria-label=${this.#r.term("setMinimum",this.label)}
+                  aria-invalid=${this.#u}
+                  class=${classMap({input:!0,disabled:this.disabled,error:this.#u,readonly:this.readonly&&!this.disabled})}
+                  data-test="minimum-input"
+                  max=${ifDefined(this.maximumValue?this.maximumValue-this.step:void 0)}
+                  min=${this.min}
+                  step=${this.step}
+                  type="number"
+                  .value=${this.minimumValue?.toString()??""}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  @change=${this.#o.bind(this)}
+                  @input=${this.#p}
+                  @keydown=${this.#c}
+                  ${ref(this.#v)}
+                />
+
+                <div class="track-container">
+                  <div
+                    class=${classMap({"unfilled-track":!0,disabled:this.disabled})}
+                    data-test="slider"
+                    role="group"
+                    @click=${this.#f.bind(this)}
+                    ${ref(this.#b)}
+                  >
+                    <div
+                      class=${classMap({"filled-track":!0,disabled:this.disabled})}
+                      ${ref(this.#g)}
+                    ></div>
+
+                    <div
+                      aria-disabled=${this.disabled}
+                      aria-label=${this.#r.term("minimum",this.label)}
+                      aria-readonly=${this.readonly}
+                      aria-valuemin=${this.min}
+                      aria-valuemax=${this.max}
+                      aria-valuenow=${ifDefined(this.minimumValue)}
+                      class=${classMap({handle:!0,disabled:this.disabled,readonly:this.readonly&&!this.disabled})}
+                      data-test="minimum-handle"
+                      role="slider"
+                      tabindex="0"
+                      @mousedown=${this.#y.bind(this)}
+                      @keydown=${this.#V.bind(this)}
+                      ${ref(this.#x)}
+                    ></div>
+
+                    <div
+                      aria-disabled=${this.disabled}
+                      aria-label=${this.#r.term("maximum",this.label)}
+                      aria-readonly=${this.readonly}
+                      aria-valuemin=${this.min}
+                      aria-valuemax=${this.max}
+                      aria-valuenow=${ifDefined(this.maximumValue)}
+                      class=${classMap({handle:!0,disabled:this.disabled,readonly:this.readonly&&!this.disabled})}
+                      data-test="maximum-handle"
+                      role="slider"
+                      tabindex="0"
+                      @mousedown=${this.#E.bind(this)}
+                      @keydown=${this.#M.bind(this)}
+                      ${ref(this.#$)}
+                    ></div>
+                  </div>
+                </div>
+
+                <input
+                  aria-label=${this.#r.term("setMaximum",this.label)}
+                  aria-invalid=${this.#u}
+                  class=${classMap({input:!0,disabled:this.disabled,error:this.#u,readonly:this.readonly&&!this.disabled})}
+                  data-test="maximum-input"
+                  max=${this.max}
+                  min=${ifDefined(this.minimumValue?this.minimumValue+this.step:void 0)}
+                  step=${this.step}
+                  type="number"
+                  .value=${this.maximumValue?.toString()??""}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  @change=${this.#R.bind(this)}
+                  @input=${this.#w}
+                  @keydown=${this.#c}
+                  ${ref(this.#k)}
+                />`),(()=>html`<div class="track-container single">
+                  <div
+                    class=${classMap({"unfilled-track":!0,disabled:this.disabled})}
+                    data-test="slider"
+                    role="group"
+                    @click=${this.#f.bind(this)}
+                    ${ref(this.#b)}
+                  >
+                    <div
+                      class=${classMap({"filled-track":!0,disabled:this.disabled})}
+                      ${ref(this.#g)}
+                    ></div>
+
+                    <div
+                      aria-describedby="meta"
+                      aria-disabled=${this.disabled}
+                      aria-label=${ifDefined(this.label)}
+                      aria-readonly=${this.readonly}
+                      aria-valuemin=${this.min}
+                      aria-valuemax=${this.max}
+                      aria-valuenow=${ifDefined(this.minimumValue)}
+                      class=${classMap({handle:!0,disabled:this.disabled,readonly:this.readonly&&!this.disabled})}
+                      data-test="single-handle"
+                      role="slider"
+                      tabindex="0"
+                      @mousedown=${this.#H.bind(this)}
+                      @keydown=${this.#S.bind(this)}
+                      ${ref(this.#D)}
+                    ></div>
+                  </div>
+                </div>
+
+                <input
+                  aria-label=${ifDefined(this.label)}
+                  aria-invalid=${this.#u}
+                  class=${classMap({input:!0,disabled:this.disabled,error:this.#u,readonly:this.readonly&&!this.disabled})}
+                  data-test="single-input"
+                  max=${this.max}
+                  min=${this.min}
+                  step=${this.step}
+                  type="number"
+                  .value=${this.minimumValue?.toString()??""}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  @change=${this.#_.bind(this)}
+                  @input=${this.#I.bind(this)}
+                  @keydown=${this.#c}
+                  ${ref(this.#A)}
+                />`))}
+        </div>
+
+        <div class="meta" id="meta" slot="description">
+          <slot
+            class=${classMap({description:!0,hidden:Boolean(this.#u&&this.validityMessage)})}
+            name="description"
+          >
+            <!--
+              Additional information or context
+              @type {Element | string}
+            -->
+          </slot>
+
+          ${when(this.#u&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
+                >${unsafeHTML(this.validityMessage)}</span
+              >`))}
+        </div>
+      </glide-core-private-label>
+    `}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#n.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#n.setValidity({customError:!1},"",this.#C.value):this.#n.setValidity({customError:!0,patternMismatch:this.#n.validity.patternMismatch,valueMissing:this.#n.validity.valueMissing}," ",this.#C.value)}setValidity(e,i){this.validityMessage=i,this.#n.setValidity(e," ",this.#C.value)}constructor(){super(),this.name="",this.orientation="horizontal",this.hideLabel=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#T=!1,this.#d=[],this.#C=createRef(),this.#r=new LocalizeController(this),this.#i=100,this.#$=createRef(),this.#k=createRef(),this.#t=0,this.#x=createRef(),this.#v=createRef(),this.#a=!1,this.#D=createRef(),this.#A=createRef(),this.#b=createRef(),this.#g=createRef(),this.#s=1,this.#m=e=>{e.preventDefault();const i=this.#b.value;if(i&&this.#F){const{clientX:t}=e;if(void 0!==t){const e=i.getBoundingClientRect();this.#L(t,this.#F,e)}}},this.#h=()=>{this.#F&&(document.removeEventListener("mousemove",this.#m),document.removeEventListener("mouseup",this.#h),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.#T=!0,this.#F=void 0,setTimeout((()=>{this.#T=!1})))},this.#n=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#F;#T;#d;#C;#n;#r;#i;#$;#k;#t;#x;#v;#a;#D;#A;#b;#g;#s;get#u(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#m;#h;#L(e,i,t){const a=(e-t.left)/t.width*(this.max-this.min)+this.min,s=Math.round(a/this.step)*this.step;if(this.multiple){if(i===this.#x.value&&void 0!==this.maximumValue){const e=Math.min(Math.max(s,this.min),this.maximumValue-this.step);if(e!==this.minimumValue)return this.minimumValue=e,this.#e(),void this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}if(i===this.#$.value&&void 0!==this.minimumValue){const e=Math.min(Math.max(s,this.minimumValue+this.step),this.max);if(e!==this.maximumValue)return this.maximumValue=e,this.#e(),void this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}}else{const e=Math.min(Math.max(s,this.min),this.max);e!==this.minimumValue&&(this.minimumValue=e,this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}}#l(e){this.name&&this.value&&!this.disabled&&e.formData.append(this.name,JSON.stringify(this.value))}#c(e){"Enter"===e.key&&this.form?.requestSubmit()}#M(e){this.#$.value&&this.#j(e,this.#$.value)}#E(e){this.#$.value&&this.#K(e,this.#$.value)}#R(){if(this.#k.value&&void 0!==this.minimumValue){const e=Number(this.#k.value.value),i=Math.round(e/this.step)*this.step;this.maximumValue=Math.min(Math.max(i,this.minimumValue+this.step),this.max),this.#e(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#w(){if(this.#k.value){const e=Number(this.#k.value.value);void 0!==this.minimumValue&&e>=this.minimumValue&&(this.maximumValue=Math.min(e,this.max),this.#e())}}#V(e){this.#x.value&&this.#j(e,this.#x.value)}#y(e){this.#x.value&&this.#K(e,this.#x.value)}#o(){if(this.#v.value&&void 0!==this.maximumValue){const e=Number(this.#v.value.value),i=Math.round(e/this.step)*this.step;this.minimumValue=Math.min(Math.max(i,this.min),this.maximumValue-this.step),this.#e(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#p(){if(this.#v.value){const e=Number(this.#v.value.value);void 0!==this.maximumValue&&e<=this.maximumValue&&(this.minimumValue=Math.max(e,this.min),this.#e())}}#j(e,i){if(!this.disabled&&!this.readonly&&void 0!==this.minimumValue&&void 0!==this.maximumValue){const t=i===this.#x.value;let a=t?this.minimumValue:this.maximumValue;switch(e.key){case"ArrowLeft":case"ArrowDown":a-=this.step;break;case"ArrowRight":case"ArrowUp":a+=this.step;break;case"PageDown":a-=10*this.step;break;case"PageUp":a+=10*this.step;break;case"Home":a=t?this.min:this.minimumValue+this.step;break;case"End":a=t?this.maximumValue-this.step:this.max;break;case"Enter":return void this.form?.requestSubmit();default:return}e.preventDefault(),t?this.minimumValue=Math.min(Math.max(a,this.min),this.maximumValue-this.step):this.maximumValue=Math.min(Math.max(a,this.minimumValue+this.step),this.max),this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#S(e){if(this.disabled||this.readonly)return;if(this.#D.value&&void 0!==this.minimumValue){let i=this.minimumValue;switch(e.key){case"ArrowLeft":case"ArrowDown":i-=this.step;break;case"ArrowRight":case"ArrowUp":i+=this.step;break;case"PageDown":i-=10*this.step;break;case"PageUp":i+=10*this.step;break;case"Home":i=this.min;break;case"End":i=this.max;break;case"Enter":return void this.form?.requestSubmit();default:return}e.preventDefault(),this.minimumValue=Math.min(Math.max(i,this.min),this.max),this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#H(e){this.#D.value&&this.#K(e,this.#D.value)}#_(){if(this.#A.value){const e=Number(this.#A.value.value),i=Math.round(e/this.step)*this.step;this.minimumValue=Math.min(Math.max(i,this.min),this.max),this.#e(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#I(){if(this.#A.value){const e=Number(this.#A.value.value);e>=0&&(this.minimumValue=Math.min(e,this.max),this.#e())}}#f(e){if(this.disabled||this.readonly)return;if(e.target===this.#x.value||e.target===this.#$.value||e.target===this.#D.value||this.#T)return;const i=this.#b.value;if(i){const t=i.getBoundingClientRect(),a=(e.clientX-t.left)/t.width*(this.max-this.min)+this.min,s=Math.round(a/this.step)*this.step;if(this.multiple&&void 0!==this.minimumValue&&void 0!==this.maximumValue){return Math.abs(s-this.minimumValue)<=Math.abs(s-this.maximumValue)?this.minimumValue=Math.min(Math.max(s,this.min),this.maximumValue-this.step):this.maximumValue=Math.min(Math.max(s,this.minimumValue+this.step),this.max),this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}this.minimumValue=Math.min(Math.max(s,this.min),this.max),this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#K(e,i){if(this.disabled||this.readonly)return;e.preventDefault();const t=this.#b.value;t&&(this.#F=i,document.addEventListener("mousemove",this.#m),document.addEventListener("mouseup",this.#h),this.#L(e.clientX,i,t.getBoundingClientRect()))}#e(){const e=this.#g.value,i=this.#D.value,t=this.#x.value,a=this.#$.value;if(e&&void 0!==this.minimumValue){if(!this.multiple&&i){const t=this.max-this.min,a=(this.minimumValue-this.min)/t*100;return i.style.left=`${a}%`,e.style.left="0",void(e.style.width=`${a}%`)}if(void 0!==this.maximumValue&&t&&a){const i=this.max-this.min,s=(this.minimumValue-this.min)/i*100,n=(this.maximumValue-this.min)/i*100;t.style.left=`${s}%`,a.style.left=`${n}%`,e.style.left=`${s}%`,e.style.width=n-s+"%"}}}};__decorate([property({reflect:!0,useDefault:!0})],Slider.prototype,"name",void 0),__decorate([property({type:Array})],Slider.prototype,"value",null),__decorate([property({reflect:!0}),required],Slider.prototype,"label",void 0),__decorate([property({reflect:!0,useDefault:!0})],Slider.prototype,"orientation",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],Slider.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],Slider.prototype,"required",void 0),__decorate([property({type:Boolean})],Slider.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],Slider.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Number})],Slider.prototype,"max",null),__decorate([property({reflect:!0,type:Number})],Slider.prototype,"min",null),__decorate([property({type:Boolean})],Slider.prototype,"multiple",null),__decorate([property({reflect:!0,type:Number,useDefault:!0})],Slider.prototype,"step",null),__decorate([property()],Slider.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],Slider.prototype,"version",void 0),__decorate([property({reflect:!0})],Slider.prototype,"tooltip",void 0),__decorate([state()],Slider.prototype,"isBlurring",void 0),__decorate([state()],Slider.prototype,"isCheckingValidity",void 0),__decorate([state()],Slider.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],Slider.prototype,"maximumValue",void 0),__decorate([state()],Slider.prototype,"minimumValue",void 0),__decorate([state()],Slider.prototype,"validityMessage",void 0),Slider=__decorate([customElement("glide-core-slider"),final],Slider);export default Slider;

package/dist/slider.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/slider.styles.js

@@ -0,0 +1,168 @@
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(".handle:focus-visible")}
+  `,css`
+    /* The designs call for a bit more spacing than the default when vertical. */
+    glide-core-private-label[orientation='vertical']::part(private-tooltips) {
+      margin-block-end: var(--glide-core-spacing-base-xxs);
+    }
+
+    .slider-container {
+      --private-track-size: 0.375rem;
+
+      align-items: center;
+      display: flex;
+      gap: var(--glide-core-spacing-base-md);
+      inline-size: 100%;
+      justify-content: space-between;
+    }
+
+    .input {
+      /* stylelint-disable-next-line property-no-vendor-prefix */
+      -moz-appearance: textfield;
+      background-color: var(--glide-core-color-interactive-surface-container);
+      block-size: 2.125rem;
+      border: 1px solid var(--glide-core-color-interactive-stroke-primary);
+      border-radius: var(--glide-core-rounding-base-radius-sm);
+      box-sizing: border-box;
+      inline-size: 2.125rem;
+      text-align: center;
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        appearance: none;
+      }
+
+      &:focus,
+      &:hover {
+        border-color: var(--glide-core-color-interactive-stroke-primary--hover);
+        outline: none;
+        transition: border-color 200ms ease-in-out;
+      }
+
+      &.disabled {
+        background-color: var(
+          --glide-core-color-interactive-surface-container--disabled
+        );
+        border-color: var(
+          --glide-core-color-interactive-stroke-primary--disabled
+        );
+        color: var(--glide-core-color-interactive-text-default--disabled);
+      }
+
+      &.error {
+        border-color: var(--glide-core-color-advisory-stroke-error-primary);
+      }
+
+      /*
+        We had to resort to a class selector because there may be a
+        bug in Chrome and Safari with ":read-only":
+        https://bugs.chromium.org/p/chromium/issues/detail?id=1519649
+      */
+      &.readonly {
+        background-color: transparent;
+        border: 1px solid transparent;
+        padding-inline-start: 0;
+      }
+    }
+
+    .track-container {
+      flex-grow: 1;
+      min-inline-size: 0;
+
+      &.single {
+        /*
+            Without this suggestion from design, when the handle is
+            at the min, it would overflow the container and not
+            align with label. This isn't needed in multiple mode
+            because we have an input to help prevent this from
+            happening.
+         */
+        padding-inline-start: var(--glide-core-spacing-base-sm);
+      }
+    }
+
+    .filled-track {
+      background-color: var(
+        --glide-core-color-interactive-surface-container-active
+      );
+      block-size: var(--private-track-size);
+      border-radius: var(--glide-core-rounding-base-radius-round);
+
+      /*
+        Absolute positioning is required here, as JavaScript is
+        used to fill it as the user interacts with the component.
+      */
+      position: absolute;
+
+      &.disabled {
+        background-color: var(
+          --glide-core-color-interactive-surface-container-inactive
+        );
+      }
+    }
+
+    .unfilled-track {
+      background-color: var(--glide-core-color-static-stroke-primary);
+      block-size: var(--private-track-size);
+      border-radius: var(--glide-core-rounding-base-radius-round);
+      inline-size: 100%;
+      position: relative;
+
+      &.disabled {
+        background-color: var(--glide-core-color-static-stroke-secondary);
+      }
+    }
+
+    .handle {
+      background-color: var(
+        --glide-core-private-color-slider-and-scrollbar-surface-handle
+      );
+      block-size: 1.5rem;
+      border: 2px solid var(--glide-core-color-interactive-stroke-active);
+      border-radius: var(--glide-core-rounding-base-radius-round);
+      box-sizing: border-box;
+      cursor: pointer;
+      inline-size: 1.5rem;
+      inset-block-start: 50%;
+      position: absolute;
+      transform: translate(-50%, -50%);
+      transition:
+        border 150ms ease-in-out,
+        box-shadow 150ms ease-in-out;
+
+      &:not(.disabled, .readonly):is(:active, :hover) {
+        border: 4px solid var(--glide-core-color-interactive-stroke-active);
+        box-shadow: var(--glide-core-effect-hovered);
+      }
+
+      &.disabled {
+        border-color: var(--glide-core-color-interactive-stroke-primary);
+        cursor: not-allowed;
+        transition: none;
+      }
+
+      &.readonly {
+        transition: none;
+      }
+    }
+
+    .meta {
+      column-gap: var(--glide-core-spacing-base-xs);
+      display: flex;
+      font-size: var(--glide-core-typography-size-body-small);
+      grid-column: 2;
+      justify-content: space-between;
+    }
+
+    .description {
+      display: block;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .validity-message {
+      display: block;
+    }
+  `];

package/dist/spinner.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-spinner': GlideCoreSpinner;
+        'glide-core-spinner': Spinner;
     }
 }
 /**
@@ -11,7 +11,7 @@ declare global {
  * @readonly
  * @attr {string} [version]
  */
-export default class GlideCoreSpinner extends LitElement {
+export default class Spinner extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     /**

package/dist/spinner.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,r,t,o){var i,s=arguments.length,l=s<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,r,t,o);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(l=(s<3?i(l):s>3?i(r,t,l):i(r,t))||l);return s>3&&l&&Object.defineProperty(r,t,l),l};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./spinner.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreSpinner=class GlideCoreSpinner extends LitElement{constructor(){super(...arguments),this.size="medium",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,[this.size]:!0})}" role="progressbar"></div>`}};__decorate([property({reflect:!0}),required],GlideCoreSpinner.prototype,"label",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreSpinner.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreSpinner.prototype,"version",void 0),GlideCoreSpinner=__decorate([customElement("glide-core-spinner"),final],GlideCoreSpinner);export default GlideCoreSpinner;
+var __decorate=this&&this.__decorate||function(e,t,r,o){var i,s=arguments.length,n=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,o);else for(var p=e.length-1;p>=0;p--)(i=e[p])&&(n=(s<3?i(n):s>3?i(t,r,n):i(t,r))||n);return s>3&&n&&Object.defineProperty(t,r,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./spinner.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Spinner=class Spinner extends LitElement{constructor(){super(...arguments),this.size="medium",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,[this.size]:!0})}" role="progressbar"></div>`}};__decorate([property({reflect:!0}),required],Spinner.prototype,"label",void 0),__decorate([property({reflect:!0,useDefault:!0})],Spinner.prototype,"size",void 0),__decorate([property({reflect:!0})],Spinner.prototype,"version",void 0),Spinner=__decorate([customElement("glide-core-spinner"),final],Spinner);export default Spinner;

package/dist/split-button.d.ts

@@ -1,28 +1,22 @@
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-split-button': GlideCoreSplitButton;
+        'glide-core-split-button': SplitButton;
     }
 }
 /**
- * @attr {'large'|'small'} [size='large']
  * @attr {'primary'|'secondary'} [variant='primary']
  *
  * @readonly
  * @attr {string} [version]
  *
- * @slot {GlideCoreSplitButtonPrimaryButton | GlideCoreSplitButtonPrimaryLink}
- * @slot {GlideCoreSplitButtonSecondaryButton} [secondary-button]
+ * @slot {SplitButtonPrimaryButton | SplitButtonPrimaryLink}
+ * @slot {SplitButtonSecondaryButton} [secondary-button]
  */
-export default class GlideCoreSplitButton extends LitElement {
+export default class SplitButton extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    /**
-     * @default 'large'
-     */
-    get size(): 'large' | 'small';
-    set size(size: 'large' | 'small');
     /**
      * @default 'primary'
      */

package/dist/split-button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,n=arguments.length,l=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(l=(n<3?i(l):n>3?i(e,o,l):i(e,o))||l);return n>3&&l&&Object.defineProperty(e,o,l),l};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreSplitButtonPrimaryButton from"./split-button.primary-button.js";import GlideCoreSplitButtonPrimaryLink from"./split-button.primary-link.js";import GlideCoreSplitButtonSecondaryButton from"./split-button.secondary-button.js";import styles from"./split-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreSplitButton=class GlideCoreSplitButton extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#t=createRef(),this.#e=createRef(),this.#o="large",this.#r="primary"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get size(){return this.#o}set size(t){this.#o=t,this.primaryButtonElement&&(this.primaryButtonElement.privateSize=t),this.secondaryButtonElement&&(this.secondaryButtonElement.privateSize=t)}get variant(){return this.#r}set variant(t){this.#r=t,this.primaryButtonElement&&(this.primaryButtonElement.privateVariant=t),this.secondaryButtonElement&&(this.secondaryButtonElement.privateVariant=t)}get secondaryButtonElement(){const t=this.#e.value?.assignedElements().at(0);if(t instanceof GlideCoreSplitButtonSecondaryButton)return t}get primaryButtonElement(){const t=this.#t.value?.assignedElements().at(0);if(t instanceof GlideCoreSplitButtonPrimaryButton||t instanceof GlideCoreSplitButtonPrimaryLink)return t}render(){return html`<div class="component"><slot @slotchange="${this.#i}" ${assertSlot([GlideCoreSplitButtonPrimaryButton,GlideCoreSplitButtonPrimaryLink])} ${ref(this.#t)}></slot><slot name="secondary-button" @slotchange="${this.#n}" ${assertSlot([GlideCoreSplitButtonSecondaryButton])} ${ref(this.#e)}></slot></div>`}#t;#e;#o;#r;#i(){this.primaryButtonElement&&(this.primaryButtonElement.privateSize=this.size,this.primaryButtonElement.privateVariant=this.variant)}#n(){this.secondaryButtonElement&&(this.secondaryButtonElement.privateSize=this.size,this.secondaryButtonElement.privateVariant=this.variant)}};__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"variant",null),__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"version",void 0),GlideCoreSplitButton=__decorate([customElement("glide-core-split-button"),final],GlideCoreSplitButton);export default GlideCoreSplitButton;
+var __decorate=this&&this.__decorate||function(t,e,o,n){var r,i=arguments.length,a=i<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,n);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(i<3?r(a):i>3?r(e,o,a):r(e,o))||a);return i>3&&a&&Object.defineProperty(e,o,a),a};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import SplitButtonPrimaryButton from"./split-button.primary-button.js";import SplitButtonPrimaryLink from"./split-button.primary-link.js";import SplitButtonSecondaryButton from"./split-button.secondary-button.js";import styles from"./split-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let SplitButton=class SplitButton extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#t=createRef(),this.#e=createRef(),this.#o="primary"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get variant(){return this.#o}set variant(t){this.#o=t,this.primaryButtonElement&&(this.primaryButtonElement.privateVariant=t),this.secondaryButtonElement&&(this.secondaryButtonElement.privateVariant=t)}get secondaryButtonElement(){const t=this.#e.value?.assignedElements().at(0);if(t instanceof SplitButtonSecondaryButton)return t}get primaryButtonElement(){const t=this.#t.value?.assignedElements().at(0);if(t instanceof SplitButtonPrimaryButton||t instanceof SplitButtonPrimaryLink)return t}render(){return html`<div class="component"><slot @slotchange="${this.#n}" ${assertSlot([SplitButtonPrimaryButton,SplitButtonPrimaryLink])} ${ref(this.#t)}></slot><slot name="secondary-button" @slotchange="${this.#r}" ${assertSlot([SplitButtonSecondaryButton])} ${ref(this.#e)}></slot></div>`}#t;#e;#o;#n(){this.primaryButtonElement&&(this.primaryButtonElement.privateVariant=this.variant)}#r(){this.secondaryButtonElement&&(this.secondaryButtonElement.privateVariant=this.variant)}};__decorate([property({reflect:!0})],SplitButton.prototype,"variant",null),__decorate([property({reflect:!0})],SplitButton.prototype,"version",void 0),SplitButton=__decorate([customElement("glide-core-split-button"),final],SplitButton);export default SplitButton;

package/dist/split-button.primary-button.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-split-button-primary-button': GlideCoreSplitButtonPrimaryButton;
+        'glide-core-split-button-primary-button': SplitButtonPrimaryButton;
     }
 }
 /**
@@ -16,7 +16,7 @@ declare global {
  *
  * @slot {Element} [icon] - An icon before the label
  */
-export default class GlideCoreSplitButtonPrimaryButton extends LitElement {
+export default class SplitButtonPrimaryButton extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     label?: string;

package/dist/split-button.primary-button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,p=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)p=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(p=(a<3?i(p):a>3?i(e,o,p):i(e,o))||p);return a>3&&p&&Object.defineProperty(e,o,p),p};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./split-button.primary-button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreSplitButtonPrimaryButton=class GlideCoreSplitButtonPrimaryButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.privateSize="large",this.privateVariant="primary",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" class="${classMap({component:!0,disabled:this.disabled,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="component" type="button" ?disabled="${this.disabled}"><slot name="icon"></slot>${this.label}</button>`}};__decorate([property({reflect:!0}),required],GlideCoreSplitButtonPrimaryButton.prototype,"label",void 0),__decorate([property({attribute:"aria-controls",reflect:!0,useDefault:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0,useDefault:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0,useDefault:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"ariaHasPopup",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreSplitButtonPrimaryButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreSplitButtonPrimaryButton.prototype,"privateSize",void 0),__decorate([property()],GlideCoreSplitButtonPrimaryButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"version",void 0),GlideCoreSplitButtonPrimaryButton=__decorate([customElement("glide-core-split-button-primary-button"),final],GlideCoreSplitButtonPrimaryButton);export default GlideCoreSplitButtonPrimaryButton;
+var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,p=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)p=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(p=(a<3?i(p):a>3?i(e,o,p):i(e,o))||p);return a>3&&p&&Object.defineProperty(e,o,p),p};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./split-button.primary-button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let SplitButtonPrimaryButton=class SplitButtonPrimaryButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.privateSize="large",this.privateVariant="primary",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" class="${classMap({component:!0,disabled:this.disabled,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="component" type="button" ?disabled="${this.disabled}"><slot name="icon"></slot>${this.label}</button>`}};__decorate([property({reflect:!0}),required],SplitButtonPrimaryButton.prototype,"label",void 0),__decorate([property({attribute:"aria-controls",reflect:!0,useDefault:!0})],SplitButtonPrimaryButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0,useDefault:!0})],SplitButtonPrimaryButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0,useDefault:!0})],SplitButtonPrimaryButton.prototype,"ariaHasPopup",void 0),__decorate([property({reflect:!0,type:Boolean})],SplitButtonPrimaryButton.prototype,"disabled",void 0),__decorate([property()],SplitButtonPrimaryButton.prototype,"privateSize",void 0),__decorate([property()],SplitButtonPrimaryButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],SplitButtonPrimaryButton.prototype,"version",void 0),SplitButtonPrimaryButton=__decorate([customElement("glide-core-split-button-primary-button"),final],SplitButtonPrimaryButton);export default SplitButtonPrimaryButton;

package/dist/split-button.primary-button.styles.js

@@ -3,16 +3,20 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
   `,css`
     .component {
       align-items: center;
+      block-size: 2.125rem;
       border-radius: var(--glide-core-rounding-base-radius-md) 0 0
         var(--glide-core-rounding-base-radius-md);
       border-style: solid;
       border-width: 1px 0 1px 1px;
+      box-sizing: border-box;
       cursor: pointer;
       display: inline-flex;
       font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-large);
       font-weight: var(--glide-core-typography-weight-bold);
       gap: 0.625rem;
       justify-content: center;
+      line-height: 1.5rem;
       padding-block: var(--glide-core-spacing-base-xs);
       padding-inline: var(--glide-core-spacing-base-md);
       position: relative;
@@ -61,20 +65,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         }
       }
 
-      &.small {
-        block-size: 1.75rem;
-        box-sizing: border-box;
-        font-size: var(--glide-core-typography-size-body-small);
-        line-height: 1rem;
-      }
-
-      &.large {
-        block-size: 2.125rem;
-        box-sizing: border-box;
-        font-size: var(--glide-core-typography-size-body-large);
-        line-height: 1.5rem;
-      }
-
       /*
         A "disabled" class is used instead of ":disabled" because these styles are
         shared between Split Button Primary Button and Split Button Primary Link.

package/dist/split-button.primary-link.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-split-button-primary-link': GlideCoreSplitButtonPrimaryLink;
+        'glide-core-split-button-primary-link': SplitButtonPrimaryLink;
     }
 }
 /**
@@ -14,7 +14,7 @@ declare global {
  *
  * @slot {Element} [icon] - An icon before the label
  */
-export default class GlideCoreSplitButtonPrimaryLink extends LitElement {
+export default class SplitButtonPrimaryLink extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     label?: string;

package/dist/split-button.primary-link.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,r,i){var o,a=arguments.length,l=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,r,i);else for(var s=t.length-1;s>=0;s--)(o=t[s])&&(l=(a<3?o(l):a>3?o(e,r,l):o(e,r))||l);return a>3&&l&&Object.defineProperty(e,r,l),l};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./split-button.primary-button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreSplitButtonPrimaryLink=class GlideCoreSplitButtonPrimaryLink extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.privateSize="large",this.privateVariant="primary",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}render(){return this.disabled?html`<span aria-disabled="true" class="${classMap({component:!0,disabled:!0,[this.privateVariant]:!0,[this.privateSize]:!0})}" role="link"><slot name="icon"></slot>${this.label}</span>`:html`<a class="${classMap({component:!0,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="component" href="${ifDefined(this.href)}"><slot name="icon"></slot>${this.label}</a>`}};__decorate([property({reflect:!0}),required],GlideCoreSplitButtonPrimaryLink.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreSplitButtonPrimaryLink.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonPrimaryLink.prototype,"href",void 0),__decorate([property()],GlideCoreSplitButtonPrimaryLink.prototype,"privateSize",void 0),__decorate([property()],GlideCoreSplitButtonPrimaryLink.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonPrimaryLink.prototype,"version",void 0),GlideCoreSplitButtonPrimaryLink=__decorate([customElement("glide-core-split-button-primary-link"),final],GlideCoreSplitButtonPrimaryLink);export default GlideCoreSplitButtonPrimaryLink;
+var __decorate=this&&this.__decorate||function(t,e,r,i){var o,a=arguments.length,s=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var p=t.length-1;p>=0;p--)(o=t[p])&&(s=(a<3?o(s):a>3?o(e,r,s):o(e,r))||s);return a>3&&s&&Object.defineProperty(e,r,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./split-button.primary-button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let SplitButtonPrimaryLink=class SplitButtonPrimaryLink extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.privateSize="large",this.privateVariant="primary",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}render(){return this.disabled?html`<span aria-disabled="true" class="${classMap({component:!0,disabled:!0,[this.privateVariant]:!0,[this.privateSize]:!0})}" role="link"><slot name="icon"></slot>${this.label}</span>`:html`<a class="${classMap({component:!0,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="component" href="${ifDefined(this.href)}"><slot name="icon"></slot>${this.label}</a>`}};__decorate([property({reflect:!0}),required],SplitButtonPrimaryLink.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],SplitButtonPrimaryLink.prototype,"disabled",void 0),__decorate([property({reflect:!0})],SplitButtonPrimaryLink.prototype,"href",void 0),__decorate([property()],SplitButtonPrimaryLink.prototype,"privateSize",void 0),__decorate([property()],SplitButtonPrimaryLink.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],SplitButtonPrimaryLink.prototype,"version",void 0),SplitButtonPrimaryLink=__decorate([customElement("glide-core-split-button-primary-link"),final],SplitButtonPrimaryLink);export default SplitButtonPrimaryLink;

package/dist/split-button.secondary-button.d.ts

@@ -2,7 +2,7 @@ import './menu.options.js';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-split-button-secondary-button': GlideCoreSplitButtonSecondaryButton;
+        'glide-core-split-button-secondary-button': SplitButtonSecondaryButton;
     }
 }
 /**
@@ -14,9 +14,9 @@ declare global {
  * @readonly
  * @attr {string} [version]
  *
- * @slot {GlideCoreMenuButton | GlideCoreMenuLink}
+ * @slot {MenuButton | MenuLink}
  */
-export default class GlideCoreSplitButtonSecondaryButton extends LitElement {
+export default class SplitButtonSecondaryButton extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
@@ -25,7 +25,6 @@ export default class GlideCoreSplitButtonSecondaryButton extends LitElement {
     menuOpen: boolean;
     menuPlacement: 'bottom-end' | 'top-end';
     privateActive: boolean;
-    privateSize: 'large' | 'small';
     privateVariant: 'primary' | 'secondary';
     readonly version: string;
     click(): void;

package/dist/split-button.secondary-button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var i,n=arguments.length,l=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,r);else for(var s=e.length-1;s>=0;s--)(i=e[s])&&(l=(n<3?i(l):n>3?i(t,o,l):i(t,o))||l);return n>3&&l&&Object.defineProperty(t,o,l),l};import"./menu.options.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreMenu from"./menu.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import chevronIcon from"./icons/chevron.js";import styles from"./split-button.secondary-button.styles.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 GlideCoreSplitButtonSecondaryButton=class GlideCoreSplitButtonSecondaryButton extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.menuOpen=!1,this.menuPlacement="bottom-end",this.privateActive=!1,this.privateSize="large",this.privateVariant="primary",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}click(){this.#e.value?.click()}firstUpdated(){const e=new MutationObserver((()=>{this.#t.value&&(this.menuOpen=this.#t.value.open)}));this.#t.value&&e.observe(this.#t.value,{attributes:!0,attributeFilter:["open"]})}render(){return html`<glide-core-menu placement="${this.menuPlacement}" size="${this.privateSize}" ?open="${this.menuOpen}" ${ref(this.#t)}><button aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,active:this.menuOpen,disabled:this.disabled,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="button" slot="target" type="button" ?disabled="${this.disabled}" ${ref(this.#e)}>${chevronIcon}</button><glide-core-menu-options><slot ${assertSlot([GlideCoreMenuButton,GlideCoreMenuLink])}></slot></glide-core-menu-options></glide-core-menu>`}#e;#t};__decorate([property({reflect:!0}),required],GlideCoreSplitButtonSecondaryButton.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreSplitButtonSecondaryButton.prototype,"disabled",void 0),__decorate([property({attribute:"menu-open",reflect:!0,type:Boolean})],GlideCoreSplitButtonSecondaryButton.prototype,"menuOpen",void 0),__decorate([property({attribute:"menu-placement",reflect:!0,useDefault:!0})],GlideCoreSplitButtonSecondaryButton.prototype,"menuPlacement",void 0),__decorate([property({type:Boolean})],GlideCoreSplitButtonSecondaryButton.prototype,"privateActive",void 0),__decorate([property()],GlideCoreSplitButtonSecondaryButton.prototype,"privateSize",void 0),__decorate([property()],GlideCoreSplitButtonSecondaryButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonSecondaryButton.prototype,"version",void 0),GlideCoreSplitButtonSecondaryButton=__decorate([customElement("glide-core-split-button-secondary-button"),final],GlideCoreSplitButtonSecondaryButton);export default GlideCoreSplitButtonSecondaryButton;
+var __decorate=this&&this.__decorate||function(t,e,o,n){var r,i=arguments.length,s=i<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,n);else for(var a=t.length-1;a>=0;a--)(r=t[a])&&(s=(i<3?r(s):i>3?r(e,o,s):r(e,o))||s);return i>3&&s&&Object.defineProperty(e,o,s),s};import"./menu.options.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import Menu from"./menu.js";import MenuButton from"./menu.button.js";import MenuLink from"./menu.link.js";import chevronIcon from"./icons/chevron.js";import styles from"./split-button.secondary-button.styles.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 SplitButtonSecondaryButton=class SplitButtonSecondaryButton extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.menuOpen=!1,this.menuPlacement="bottom-end",this.privateActive=!1,this.privateVariant="primary",this.version=packageJson.version,this.#t=createRef(),this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}click(){this.#t.value?.click()}firstUpdated(){const t=new MutationObserver((()=>{this.#e.value&&(this.menuOpen=this.#e.value.open)}));this.#e.value&&t.observe(this.#e.value,{attributes:!0,attributeFilter:["open"]})}render(){return html`<glide-core-menu placement="${this.menuPlacement}" ?open="${this.menuOpen}" ${ref(this.#e)}><button aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,active:this.menuOpen,disabled:this.disabled,[this.privateVariant]:!0})}" data-test="button" slot="target" type="button" ?disabled="${this.disabled}" ${ref(this.#t)}>${chevronIcon}</button><glide-core-menu-options><slot ${assertSlot([MenuButton,MenuLink])}></slot></glide-core-menu-options></glide-core-menu>`}#t;#e};__decorate([property({reflect:!0}),required],SplitButtonSecondaryButton.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],SplitButtonSecondaryButton.prototype,"disabled",void 0),__decorate([property({attribute:"menu-open",reflect:!0,type:Boolean})],SplitButtonSecondaryButton.prototype,"menuOpen",void 0),__decorate([property({attribute:"menu-placement",reflect:!0,useDefault:!0})],SplitButtonSecondaryButton.prototype,"menuPlacement",void 0),__decorate([property({type:Boolean})],SplitButtonSecondaryButton.prototype,"privateActive",void 0),__decorate([property()],SplitButtonSecondaryButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],SplitButtonSecondaryButton.prototype,"version",void 0),SplitButtonSecondaryButton=__decorate([customElement("glide-core-split-button-secondary-button"),final],SplitButtonSecondaryButton);export default SplitButtonSecondaryButton;