@crowdstrike/glide-core 0.5.1 → 0.5.2

package/dist/accordion.js

@@ -1 +1 @@
-"use strict";var D=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var h=(s,e,t,n)=>{for(var a=n>1?void 0:n?B(e,t):e,m=s.length-1,r;m>=0;m--)(r=s[m])&&(a=(n?r(e,t,a):r(a))||a);return n&&a&&D(e,t,a),a};var y=(s,e,t)=>{if(!e.has(s))throw TypeError("Cannot "+t)};var o=(s,e,t)=>(y(s,e,"read from private field"),t?t.call(s):e.get(s)),l=(s,e,t)=>{if(e.has(s))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(s):e.set(s,t)};var d=(s,e,t)=>(y(s,e,"access private method"),t);var c,f,g,v,x,S,T,E,k,$,N,w,P;import{LitElement as L,html as O}from"lit";import{classMap as b}from"lit/directives/class-map.js";import{createRef as p,ref as u}from"lit/directives/ref.js";import{customElement as C,property as M,state as R}from"lit/decorators.js";import{owSlot as H}from"./library/ow.js";import F from"./accordion.styles.js";let i=class extends L{constructor(){super(...arguments);l(this,S);l(this,E);l(this,$);l(this,w);this.label="";this.open=!1;this.hasPrefixSlot=!1;this.hasSuffixSlot=!1;l(this,c,p());l(this,f,p());l(this,g,p());l(this,v,p());l(this,x,p())}firstUpdated(){H(o(this,f).value)}render(){return O`<details class="component" ?open="${this.open}" ${u(o(this,g))}><summary class="summary" @click="${d(this,w,P)}" data-test="summary"><svg class="chevron" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="${b({"heading-box":!0,"heading-box-with-prefix":this.hasPrefixSlot})}" data-test="label"><div class="prefix-slot-box"><slot name="prefix" @slotchange="${d(this,E,k)}" ${u(o(this,v))}></slot></div><span class="label">${this.label}</span></div><div class="${b({"suffix-slot-box":!0,"suffix-slot-box-with-content":this.hasSuffixSlot})}" data-test="suffix"><slot name="suffix" @slotchange="${d(this,$,N)}" ${u(o(this,x))}></slot></div></summary><div class="${b({content:!0,"content-with-prefix":this.hasPrefixSlot})}" data-test="content" ${u(o(this,c))}><slot @slotchange="${d(this,S,T)}" ${u(o(this,f))}></slot></div></details>`}};c=new WeakMap,f=new WeakMap,g=new WeakMap,v=new WeakMap,x=new WeakMap,S=new WeakSet,T=function(){H(o(this,f).value)},E=new WeakSet,k=function(){const t=o(this,v).value?.assignedNodes();this.hasPrefixSlot=!!(t&&t.length>0)},$=new WeakSet,N=function(){const t=o(this,x).value?.assignedNodes();this.hasSuffixSlot=!!(t&&t.length>0)},w=new WeakSet,P=function(t){const n=o(this,g).value,a=o(this,c).value,m=!n.open,r=Number.parseFloat(getComputedStyle(a)?.paddingBottom);m?requestAnimationFrame(()=>{a.animate({height:["0px",`${a.offsetHeight-r}px`],opacity:[0,1]},{duration:150,easing:"ease-in"}),this.dispatchEvent(new CustomEvent("toggle",{detail:{newState:"open",oldState:"closed"}}))}):(t.preventDefault(),a.animate({height:[`${a.offsetHeight-r}px`,"0px"],opacity:[1,0]},{duration:100,easing:"ease-out"}).addEventListener("finish",()=>{n.open=!1,this.dispatchEvent(new CustomEvent("toggle",{detail:{newState:"closed",oldState:"open"}}))},{once:!0}))},i.shadowRootOptions={...L.shadowRootOptions,mode:"closed"},i.styles=F,h([M({reflect:!0})],i.prototype,"label",2),h([M({type:Boolean,reflect:!0})],i.prototype,"open",2),h([R()],i.prototype,"hasPrefixSlot",2),h([R()],i.prototype,"hasSuffixSlot",2),i=h([C("glide-core-accordion")],i);export{i as default};
+var __decorate=this&&this.__decorate||function(e,t,o,s){var i,l=arguments.length,a=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,s);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(a=(l<3?i(a):l>3?i(t,o,a):i(t,o))||a);return l>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}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{owSlot}from"./library/ow.js";import styles from"./accordion.styles.js";let GlideCoreAccordion=class GlideCoreAccordion extends LitElement{constructor(){super(...arguments),this.label="",this.open=!1,this.hasPrefixSlot=!1,this.hasSuffixSlot=!1,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#s=createRef(),this.#i=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value)}render(){return html`<details class="component" ?open="${this.open}" ${ref(this.#o)}><summary class="summary" @click="${this.#l}" data-test="summary"><svg class="chevron" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="${classMap({"heading-box":!0,"heading-box-with-prefix":this.hasPrefixSlot})}" data-test="label"><div class="prefix-slot-box"><slot name="prefix" @slotchange="${this.#a}" ${ref(this.#s)}></slot></div><span class="label">${this.label}</span></div><div class="${classMap({"suffix-slot-box":!0,"suffix-slot-box-with-content":this.hasSuffixSlot})}" data-test="suffix"><slot name="suffix" @slotchange="${this.#n}" ${ref(this.#i)}></slot></div></summary><div class="${classMap({content:!0,"content-with-prefix":this.hasPrefixSlot})}" data-test="content" ${ref(this.#e)}><slot @slotchange="${this.#r}" ${ref(this.#t)}></slot></div></details>`}#e;#t;#o;#s;#i;#r(){owSlot(this.#t.value)}#a(){const e=this.#s.value?.assignedNodes();this.hasPrefixSlot=!!(e&&e.length>0)}#n(){const e=this.#i.value?.assignedNodes();this.hasSuffixSlot=!!(e&&e.length>0)}#l(e){const t=this.#o.value,o=this.#e.value,s=!t.open,i=Number.parseFloat(getComputedStyle(o)?.paddingBottom);if(s)requestAnimationFrame((()=>{o.animate({height:["0px",o.offsetHeight-i+"px"],opacity:[0,1]},{duration:150,easing:"ease-in"}),this.dispatchEvent(new CustomEvent("toggle",{detail:{newState:"open",oldState:"closed"}}))}));else{e.preventDefault();o.animate({height:[o.offsetHeight-i+"px","0px"],opacity:[1,0]},{duration:100,easing:"ease-out"}).addEventListener("finish",(()=>{t.open=!1,this.dispatchEvent(new CustomEvent("toggle",{detail:{newState:"closed",oldState:"open"}}))}),{once:!0})}}};__decorate([property({reflect:!0})],GlideCoreAccordion.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreAccordion.prototype,"open",void 0),__decorate([state()],GlideCoreAccordion.prototype,"hasPrefixSlot",void 0),__decorate([state()],GlideCoreAccordion.prototype,"hasSuffixSlot",void 0),GlideCoreAccordion=__decorate([customElement("glide-core-accordion")],GlideCoreAccordion);export default GlideCoreAccordion;

package/dist/accordion.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";import i from"./styles/focus-outline.js";export default[e`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
     .component {
       border-radius: 0.625rem;
       box-shadow: var(--glide-core-shadow-sm);
@@ -24,7 +24,7 @@
       }
 
       &:focus-visible {
-        ${i};
+        ${focusOutline};
       }
 
       &::marker,
@@ -56,7 +56,7 @@
 
       .suffix-slot-box {
         align-items: center;
-        color: #00000080;
+        color: var(--glide-core-icon-primary);
         display: flex;
         gap: 0.625rem;
 
@@ -95,4 +95,4 @@
     .content-with-prefix {
       padding-inline-start: 3.5rem;
     }
-  `];
+  `];

package/dist/accordion.test.basics.js

@@ -0,0 +1,109 @@
+import './accordion.js';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreAccordion from './accordion.js';
+GlideCoreAccordion.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-accordion')).to.equal(GlideCoreAccordion);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-accordion label="label">
+      Inner content
+    </glide-core-accordion>`);
+    await expect(component).to.be.accessible();
+});
+it('is closed by default', async () => {
+    const component = await fixture(html `<glide-core-accordion label="label">
+      Inner content
+    </glide-core-accordion>`);
+    const accordion = component.shadowRoot?.querySelector('details');
+    expect(accordion).to.be.ok;
+    expect(accordion?.hasAttribute('open')).to.be.false;
+});
+it('defaults to "open" when provided with the attribute', async () => {
+    const component = await fixture(html `<glide-core-accordion label="label" open>
+      Inner content
+    </glide-core-accordion>`);
+    const accordion = component.shadowRoot?.querySelector('details');
+    expect(accordion).to.be.ok;
+    expect(accordion?.hasAttribute('open')).to.be.true;
+});
+it('renders the provided "label"', async () => {
+    const component = await fixture(html `<glide-core-accordion label="Accordion Title">
+      Inner content
+    </glide-core-accordion>`);
+    const label = component.shadowRoot?.querySelector('[data-test="label"]');
+    expect(label).to.be.ok;
+    expect(label?.textContent?.trim()).to.equal('Accordion Title');
+});
+it('renders the provided default slotted content', async () => {
+    const component = await fixture(html `<glide-core-accordion label="label"
+      ><p data-body>Inner content</p></glide-core-accordion
+    >`);
+    const body = component.querySelector('[data-body]');
+    expect(body).to.be.ok;
+});
+it('renders with a prefix slot and applies the appropriate classes', async () => {
+    const component = await fixture(html `<glide-core-accordion label="label">
+      Inner content
+      <span slot="prefix" data-prefix>prefix</span>
+    </glide-core-accordion>`);
+    expect(document.querySelector('[data-prefix]')).to.be.ok;
+    expect([
+        ...component.shadowRoot.querySelector('[data-test="label"]').classList,
+    ]).to.deep.equal(['heading-box', 'heading-box-with-prefix']);
+    expect([
+        ...component.shadowRoot.querySelector('[data-test="content"]').classList,
+    ]).to.deep.equal(['content', 'content-with-prefix']);
+});
+it('does not apply prefix classes when no prefix slot is provided', async () => {
+    const component = await fixture(html `<glide-core-accordion label="label">
+      Inner content
+    </glide-core-accordion>`);
+    expect([
+        ...component.shadowRoot.querySelector('[data-test="label"]').classList,
+    ]).to.deep.equal(['heading-box']);
+    expect([
+        ...component.shadowRoot.querySelector('[data-test="content"]').classList,
+    ]).to.deep.equal(['content']);
+});
+it('renders with a suffix slot and applies the appropriate class', async () => {
+    const component = await fixture(html `<glide-core-accordion label="label">
+      Inner content
+      <span slot="suffix" data-suffix>suffix</span>
+    </glide-core-accordion>`);
+    expect(component.querySelector('[data-suffix]')).to.be.ok;
+    expect([
+        ...component.shadowRoot.querySelector('[data-test="suffix"]').classList,
+    ]).to.deep.equal(['suffix-slot-box', 'suffix-slot-box-with-content']);
+});
+it('does not apply the suffix class when no suffix slot is provided', async () => {
+    const component = await fixture(html `<glide-core-accordion label="label">
+      Inner content
+    </glide-core-accordion>`);
+    expect([
+        ...component.shadowRoot.querySelector('[data-test="suffix"]').classList,
+    ]).to.deep.equal(['suffix-slot-box']);
+});
+it('renders without prefix and suffix classes after both are removed', async () => {
+    const component = await fixture(html `
+    <glide-core-accordion label="label">
+      Inner content
+      <span slot="prefix">prefix</span>
+      <span slot="suffix">suffix</span>
+    </glide-core-accordion>
+  `);
+    component.querySelector('[slot="prefix"]')?.remove();
+    component.querySelector('[slot="suffix"]')?.remove();
+    await elementUpdated(component);
+    // prefix
+    expect([
+        ...component.shadowRoot.querySelector('[data-test="label"]').classList,
+    ]).to.deep.equal(['heading-box']);
+    expect([
+        ...component.shadowRoot.querySelector('[data-test="content"]').classList,
+    ]).to.deep.equal(['content']);
+    // suffix
+    expect([
+        ...component.shadowRoot.querySelector('[data-test="suffix"]').classList,
+    ]).to.deep.equal(['suffix-slot-box']);
+});

package/dist/accordion.test.events.js

@@ -0,0 +1,39 @@
+import './accordion.js';
+import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
+import GlideCoreAccordion from './accordion.js';
+GlideCoreAccordion.shadowRootOptions.mode = 'open';
+it('dispatches a "toggle" event when the Accordion opens', async () => {
+    let hasToggleBeenCalled = false;
+    const component = await fixture(html `<glide-core-accordion label="label">
+      Inner content
+    </glide-core-accordion>`);
+    component.addEventListener('toggle', () => (hasToggleBeenCalled = true));
+    const summary = component.shadowRoot?.querySelector('[data-test="summary"]');
+    expect(summary).to.be.ok;
+    summary?.click();
+    await oneEvent(component, 'toggle');
+    expect(hasToggleBeenCalled).to.be.true;
+});
+it('dispatches a "toggle" event when the Accordion closes', async () => {
+    let hasToggleBeenCalled = false;
+    const component = await fixture(html `<glide-core-accordion label="label" open>
+      Inner content
+    </glide-core-accordion>`);
+    component.addEventListener('toggle', () => (hasToggleBeenCalled = true));
+    const summary = component.shadowRoot?.querySelector('[data-test="summary"]');
+    expect(summary).to.be.ok;
+    summary?.click();
+    // Force the animations to complete with javascript
+    // and by triggering a `finish` event ourselves.
+    component.shadowRoot
+        ?.querySelector('[data-test="content"]')
+        ?.getAnimations()
+        ?.at(0)
+        ?.finish();
+    component.shadowRoot
+        ?.querySelector('[data-test="content"]')
+        ?.dispatchEvent(new AnimationEvent('finish'));
+    await elementUpdated(component);
+    await oneEvent(component, 'toggle');
+    expect(hasToggleBeenCalled).to.be.true;
+});

package/dist/button-group.button.js

@@ -1 +1 @@
-"use strict";var V=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var f=(n,a,s,e)=>{for(var l=e>1?void 0:e?O(a,s):a,S=n.length-1,T;S>=0;S--)(T=n[S])&&(l=(e?T(a,s,l):T(l))||l);return e&&l&&V(a,s,l),l};var R=(n,a,s)=>{if(!a.has(n))throw TypeError("Cannot "+s)};var i=(n,a,s)=>(R(n,a,"read from private field"),s?s.call(n):a.get(n)),r=(n,a,s)=>{if(a.has(n))throw TypeError("Cannot add the same private member more than once");a instanceof WeakSet?a.add(n):a.set(n,s)};var d=(n,a,s)=>(R(n,a,"access private method"),s);var b,p,g,h,c,o,v,y,u,E,H,w,U;import{LitElement as L,html as I}from"lit";import{classMap as A}from"lit/directives/class-map.js";import{createRef as $,ref as k}from"lit/directives/ref.js";import{customElement as K,property as m,state as x}from"lit/decorators.js";import{owSlot as M,owSlotType as D}from"./library/ow.js";import j from"./button-group.button.styles.js";let t=class extends L{constructor(){super(...arguments);r(this,h);r(this,o);r(this,y);r(this,E);r(this,w);this.selected=!1;this.disabled=!1;this.value="";this.vertical=!1;this.isSingleButton=!1;this.isTabbable=!1;this.position="inner";r(this,b,$());r(this,p,$());r(this,g,$())}firstUpdated(){if(M(i(this,b).value),D(i(this,b).value,[Text]),this.selected&&(this.isTabbable=!0),this.variant==="icon-only"&&M(i(this,g).value),i(this,h,c).length>0){if(i(this,h,c).length>1&&i(this,h,c).at(0)===this?this.position="first":i(this,h,c).length>1&&i(this,h,c).at(-1)===this?this.position="last":i(this,h,c).length===1&&(this.isSingleButton=!0),i(this,h,c).every(e=>e.disabled))return;const s=i(this,h,c).find(e=>!e.disabled&&e.selected);if(s&&s===this)this.isTabbable=!0;else if(!s){const e=i(this,h,c).find(l=>!l.disabled);e&&e===this&&(this.isTabbable=!0)}}}focus(s){i(this,p).value?.focus(s)}render(){return I`<li role="radio" aria-checked="${this.selected}" aria-disabled="${this.disabled}" tabindex="${!this.isTabbable||this.disabled?-1:0}" @click="${d(this,y,u)}" @keydown="${d(this,w,U)}" ${k(i(this,p))} class="${A({component:!0,selected:this.selected,disabled:!!this.disabled,[this.position]:!0,vertical:this.vertical,single:this.isSingleButton,"icon-only":this.variant==="icon-only"})}"><slot name="prefix" ${k(i(this,g))}></slot><span class="${A({"visually-hidden":this.variant==="icon-only"})}"><slot @slotchange="${d(this,E,H)}" ${k(i(this,b))}></slot></span></li>`}willUpdate(s){if(this.hasUpdated&&s.has("selected")){const e=s.get("selected");if(e===!0)this.isTabbable=!1;else if(e===!1){this.isTabbable=!0,this.focus();for(const l of i(this,h,c))l!==this&&l.selected&&(l.selected=!1)}}}};b=new WeakMap,p=new WeakMap,g=new WeakMap,h=new WeakSet,c=function(){return[...this.closest("glide-core-button-group")?.querySelectorAll("glide-core-button-group-button")??[]]},o=new WeakSet,v=function(s=this){s.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:s.value})),s.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:s.value}))},y=new WeakSet,u=function(){!this.disabled&&!this.selected&&(this.selected=!0,d(this,o,v).call(this))},E=new WeakSet,H=function(){M(i(this,b).value),D(i(this,b).value,[Text])},w=new WeakSet,U=function(s){if(!(this.disabled||i(this,h,c).length<2&&s.key!==" "))switch(s.key){case"ArrowUp":case"ArrowLeft":{s.preventDefault(),this.selected=!1;let e=this.previousElementSibling;for(;!e||e instanceof t&&e.disabled;)if(e===null){const l=i(this,h,c).at(-1);l&&(e=l)}else e=e.previousElementSibling;e&&e instanceof t&&(e.selected=!0,d(this,o,v).call(this,e));break}case"ArrowDown":case"ArrowRight":{s.preventDefault(),this.selected=!1;let e=this.nextElementSibling;for(;!e||e instanceof t&&e.disabled;)if(e===null){const l=i(this,h,c).at(0);l&&(e=l)}else e=e.nextElementSibling;e&&e instanceof t&&(e.selected=!0,d(this,o,v).call(this,e));break}case" ":{s.preventDefault(),!this.disabled&&!this.selected&&(this.selected=!0,d(this,o,v).call(this));break}}},t.shadowRootOptions={...L.shadowRootOptions,mode:"closed"},t.styles=j,f([m({type:Boolean,reflect:!0})],t.prototype,"selected",2),f([m({type:Boolean,reflect:!0})],t.prototype,"disabled",2),f([m()],t.prototype,"value",2),f([m()],t.prototype,"variant",2),f([m({type:Boolean})],t.prototype,"vertical",2),f([x()],t.prototype,"isSingleButton",2),f([x()],t.prototype,"isTabbable",2),f([x()],t.prototype,"position",2),t=f([K("glide-core-button-group-button")],t);export{t as default};
+var _a,GlideCoreButtonGroupButton_1,__decorate=this&&this.__decorate||function(t,e,o,i){var s,l=arguments.length,n=l<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,i);else for(var r=t.length-1;r>=0;r--)(s=t[r])&&(n=(l<3?s(n):l>3?s(e,o,n):s(e,o))||n);return l>3&&n&&Object.defineProperty(e,o,n),n};import{LitElement,html}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{owSlot,owSlotType}from"./library/ow.js";import styles from"./button-group.button.styles.js";let GlideCoreButtonGroupButton=class GlideCoreButtonGroupButton extends LitElement{constructor(){super(...arguments),this.selected=!1,this.disabled=!1,this.value="",this.vertical=!1,this.isSingleButton=!1,this.isTabbable=!1,this.position="inner",this.#t=createRef(),this.#e=createRef(),this.#o=createRef()}static{GlideCoreButtonGroupButton_1=this}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){if(owSlot(this.#t.value),owSlotType(this.#t.value,[Text]),this.selected&&(this.isTabbable=!0),"icon-only"===this.variant&&owSlot(this.#o.value),this.#i.length>0){if(this.#i.length>1&&this.#i.at(0)===this?this.position="first":this.#i.length>1&&this.#i.at(-1)===this?this.position="last":1===this.#i.length&&(this.isSingleButton=!0),this.#i.every((t=>t.disabled)))return;const t=this.#i.find((t=>!t.disabled&&t.selected));if(t&&t===this)this.isTabbable=!0;else if(!t){const t=this.#i.find((t=>!t.disabled));t&&t===this&&(this.isTabbable=!0)}}}focus(t){this.#e.value?.focus(t)}render(){return html`<li role="radio" aria-checked="${this.selected}" aria-disabled="${this.disabled}" tabindex="${!this.isTabbable||this.disabled?-1:0}" @click="${this.#s}" @keydown="${this.#l}" ${ref(this.#e)} class="${classMap({component:!0,selected:this.selected,disabled:Boolean(this.disabled),[this.position]:!0,vertical:this.vertical,single:this.isSingleButton,"icon-only":"icon-only"===this.variant})}"><slot name="prefix" ${ref(this.#o)}></slot><span class="${classMap({"visually-hidden":"icon-only"===this.variant})}"><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot></span></li>`}willUpdate(t){if(this.hasUpdated&&t.has("selected")){const e=t.get("selected");if(!0===e)this.isTabbable=!1;else if(!1===e){this.isTabbable=!0,this.focus();for(const t of this.#i)t!==this&&t.selected&&(t.selected=!1)}}}#t;#e;#o;get#i(){return[...this.closest("glide-core-button-group")?.querySelectorAll("glide-core-button-group-button")??[]]}#r(t=this){t.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:t.value})),t.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:t.value}))}#s(){this.disabled||this.selected||(this.selected=!0,this.#r())}#n(){owSlot(this.#t.value),owSlotType(this.#t.value,[Text])}#l(t){if(!(this.disabled||this.#i.length<2&&" "!==t.key))switch(t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault(),this.selected=!1;let e=this.previousElementSibling;for(;!e||e instanceof GlideCoreButtonGroupButton_1&&e.disabled;)if(null===e){const t=this.#i.at(-1);t&&(e=t)}else e=e.previousElementSibling;e&&e instanceof GlideCoreButtonGroupButton_1&&(e.selected=!0,this.#r(e));break}case"ArrowDown":case"ArrowRight":{t.preventDefault(),this.selected=!1;let e=this.nextElementSibling;for(;!e||e instanceof GlideCoreButtonGroupButton_1&&e.disabled;)if(null===e){const t=this.#i.at(0);t&&(e=t)}else e=e.nextElementSibling;e&&e instanceof GlideCoreButtonGroupButton_1&&(e.selected=!0,this.#r(e));break}case" ":t.preventDefault(),this.disabled||this.selected||(this.selected=!0,this.#r())}}};__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"selected",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"value",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"variant",void 0),__decorate([property({type:Boolean})],GlideCoreButtonGroupButton.prototype,"vertical",void 0),__decorate([state()],GlideCoreButtonGroupButton.prototype,"isSingleButton",void 0),__decorate([state()],GlideCoreButtonGroupButton.prototype,"isTabbable",void 0),__decorate([state()],GlideCoreButtonGroupButton.prototype,"position",void 0),GlideCoreButtonGroupButton=GlideCoreButtonGroupButton_1=__decorate([customElement("glide-core-button-group-button")],GlideCoreButtonGroupButton);export default GlideCoreButtonGroupButton;

package/dist/button-group.button.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";import r from"./styles/focus-outline.js";import o from"./styles/visually-hidden.js";export default[e`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
     .component {
       align-items: center;
       appearance: none;
@@ -72,7 +72,7 @@
         border-color: var(--glide-core-border-focus);
         color: var(--glide-core-color-white);
 
-        ${r};
+        ${focusOutline};
 
         /* create a stacking context so the outline doesn't become obscured behind other elements */
         transform: translateX(0);
@@ -94,6 +94,6 @@
     }
 
     .visually-hidden {
-      ${o};
+      ${visuallyHidden};
     }
-  `];
+  `];

package/dist/button-group.button.test.basics.js

@@ -0,0 +1,169 @@
+import { ArgumentError } from 'ow';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreButtonGroupButton from './button-group.button.js';
+import sinon from 'sinon';
+GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-button-group-button')).to.equal(GlideCoreButtonGroupButton);
+});
+it('is accessible', async () => {
+    const element = await fixture(html `<glide-core-button-group-button value="value"
+      >Button</glide-core-button-group-button
+    >`);
+    await expect(element).to.be.accessible();
+});
+it('renders an li with role "radio"', async () => {
+    const element = await fixture(html `<glide-core-button-group-button value="value"
+      >Button</glide-core-button-group-button
+    >`);
+    const liElement = element.shadowRoot?.querySelector('li');
+    expect(liElement).to.have.attribute('role', 'radio');
+});
+it('renders "aria-checked" equal to "false" and "tabindex" equal to "-1" by default', async () => {
+    const element = await fixture(html `<glide-core-button-group-button value="value"
+      >Button</glide-core-button-group-button
+    >`);
+    const liElement = element.shadowRoot?.querySelector('li');
+    expect(liElement).to.not.be.null;
+    expect(liElement).to.have.attribute('aria-checked', 'false');
+    expect(liElement).to.have.attribute('tabindex', '-1');
+});
+it('renders "aria-checked" equal to "true" and "tabindex" equal to "0" when attribute "selected" exists', async () => {
+    const element = await fixture(html `<glide-core-button-group-button value="value" selected
+      >Button</glide-core-button-group-button
+    >`);
+    const liElement = element.shadowRoot?.querySelector('li');
+    expect(liElement).to.have.attribute('aria-checked', 'true');
+    expect(liElement).to.have.attribute('tabindex', '0');
+});
+it('renders two slots, where one has name "prefix", and the other is default with given text', async () => {
+    const element = await fixture(html `<glide-core-button-group-button value="value" selected
+      ><span slot="prefix" data-prefix>Prefix</span
+      >Button</glide-core-button-group-button
+    >`);
+    const prefixSlot = element.shadowRoot?.querySelector('slot[name="prefix"]');
+    const defaultSlot = element.shadowRoot?.querySelector('slot:not([name="prefix"])');
+    // verify the slots exist
+    expect(prefixSlot).to.not.be.null;
+    expect(defaultSlot).to.not.be.null;
+    const prefixContent = document.querySelector('[data-prefix]');
+    const content = document.querySelector('glide-core-button-group-button');
+    // verify the content of the slots exist
+    expect(prefixContent).to.not.be.null;
+    expect(prefixContent?.textContent).to.equal('Prefix');
+    expect(content?.textContent).to.contain('Button');
+});
+it('is has a disabled presentation when the "disabled" attribute is true', async () => {
+    const element = await fixture(html `<glide-core-button-group-button value="value" disabled
+      >Button</glide-core-button-group-button
+    >`);
+    const liElement = element.shadowRoot?.querySelector('li');
+    expect(liElement).to.have.attribute('aria-disabled', 'true');
+});
+it('does not have a disabled presentation when "disabled" attribute is false', async () => {
+    const element = await fixture(html `<glide-core-button-group-button value="value"
+      >Button</glide-core-button-group-button
+    >`);
+    const liElement = element.shadowRoot?.querySelector('li');
+    expect(liElement).to.have.attribute('aria-disabled', 'false');
+});
+it('has a vertical presention when the "vertical" attribute is set', async () => {
+    await fixture(html ` <glide-core-button-group-button value="value" vertical
+      >Button</glide-core-button-group-button
+    >`);
+    const buttonElement = document.querySelector('glide-core-button-group-button');
+    const liElement = buttonElement?.shadowRoot?.querySelector('li');
+    expect(liElement).to.have.class('vertical');
+});
+it('does not have a vertical presention when the "vertical" attribute is not set', async () => {
+    await fixture(html ` <glide-core-button-group-button value="value"
+      >Button</glide-core-button-group-button
+    >`);
+    const buttonElement = document.querySelector('glide-core-button-group-button');
+    const liElement = buttonElement?.shadowRoot?.querySelector('li');
+    expect(liElement).to.not.have.class('vertical');
+});
+it('sets buttons as not tabbable by default', async () => {
+    const element = await fixture(html `<glide-core-button-group-button value="value"
+      >Button</glide-core-button-group-button
+    >`);
+    const liElement = element.shadowRoot?.querySelector('li');
+    await expect(liElement).to.have.attribute('tabindex', '-1');
+});
+it('sets a "selected" button as tabbable', async () => {
+    const element = await fixture(html `<glide-core-button-group-button value="value" selected
+      >Button</glide-core-button-group-button
+    >`);
+    const liElement = element.shadowRoot?.querySelector('li');
+    await expect(liElement).to.have.attribute('tabindex', '0');
+});
+it('has a presentation for variant "icon-only"', async () => {
+    const element = await fixture(html `<glide-core-button-group-button
+      value="value"
+      selected
+      variant="icon-only"
+      ><span slot="prefix">Prefix</span>Button</glide-core-button-group-button
+    >`);
+    const liElement = element.shadowRoot?.querySelector('li');
+    expect(liElement).to.have.class('icon-only');
+});
+it('does not apply class "icon-only" when variant "icon-only" is absent', async () => {
+    const element = await fixture(html `<glide-core-button-group-button value="value"
+      >Button</glide-core-button-group-button
+    >`);
+    const liElement = element.shadowRoot?.querySelector('li');
+    expect(liElement).to.not.have.class('icon-only');
+});
+it('throws an error when no label is present and variant is `icon-only`', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-button-group-button
+        value="value"
+        selected
+        variant="icon-only"
+        ><span slot="prefix">Prefix</span></glide-core-button-group-button
+      >`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});
+it('throws an error when prefix slot is empty and variant is `icon-only`', async () => {
+    const spy = sinon.spy();
+    // Not sure how to resolve the below, despite the test passing, so disabling console errors for now:
+    //
+    // Browser logs:
+    //     An error was thrown in a Promise outside a test. Did you forget to await a function or assertion?
+    sinon.stub(console, 'error'); // Disable console.error
+    try {
+        await fixture(html `<glide-core-button-group-button
+        value="value"
+        selected
+        variant="icon-only"
+        >Button</glide-core-button-group-button
+      >`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});
+it('does not throw an error when prefix slot is empty and no variant is set', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-button-group-button value="value" selected
+        >Button</glide-core-button-group-button
+      >`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.notCalled).to.be.true;
+});

package/dist/button-group.button.test.events.js

@@ -0,0 +1,73 @@
+import './button-group.button.js';
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreButtonGroupButton from './button-group.button.js';
+import sinon from 'sinon';
+GlideCoreButtonGroupButton.shadowRootOptions.mode = 'open';
+it('emits a change event when clicked', async () => {
+    const element = await fixture(html `<glide-core-button-group-button value="value"
+      >Button</glide-core-button-group-button
+    >`);
+    const liElement = element.shadowRoot?.querySelector('li');
+    // This pattern is adopted from https://open-wc.org/docs/testing/helpers/#testing-events
+    // Without setTimeout the test fails. The suspicion is this is related to task scheduling,
+    // however this can be investigated later.
+    setTimeout(() => {
+        liElement?.click();
+    });
+    const changeEvent = await oneEvent(element, 'change');
+    expect(changeEvent instanceof Event).to.be.true;
+});
+it('emits an input event when clicked', async () => {
+    const element = await fixture(html `<glide-core-button-group-button value="value"
+      >Button</glide-core-button-group-button
+    >`);
+    const liElement = element.shadowRoot.querySelector('li');
+    setTimeout(() => {
+        liElement?.click();
+    });
+    const inputEvent = await oneEvent(element, 'input');
+    expect(inputEvent instanceof Event).to.be.true;
+});
+it('emits a change event when a space key is pressed and is not already selected', async () => {
+    const buttonElement = await fixture(html `<glide-core-button-group-button value="value-1"
+      >Button 1</glide-core-button-group-button
+    >`);
+    buttonElement.focus();
+    setTimeout(async () => {
+        await sendKeys({ press: ' ' });
+    });
+    const changeEvent = await oneEvent(buttonElement, 'change');
+    expect(changeEvent instanceof Event).to.be.true;
+});
+it('does not emit change event when a space key is pressed and is selected', async () => {
+    const buttonElement = await fixture(html `<glide-core-button-group-button value="value-1" selected
+      >Button 1</glide-core-button-group-button
+    > `);
+    const spy = sinon.spy();
+    buttonElement.addEventListener('change', spy);
+    buttonElement.focus();
+    await sendKeys({ press: ' ' });
+    expect(spy.notCalled).to.be.true;
+});
+it('emits an input event when a space key is pressed and is not already selected', async () => {
+    const buttonElement = await fixture(html ` <glide-core-button-group-button value="value-1"
+      >Button 1</glide-core-button-group-button
+    >`);
+    buttonElement.focus();
+    setTimeout(async () => {
+        await sendKeys({ press: ' ' });
+    });
+    const inputEvent = await oneEvent(buttonElement, 'input');
+    expect(inputEvent instanceof Event).to.be.true;
+});
+it('does not emit an input event when a space key is pressed and is selected', async () => {
+    const buttonElement = await fixture(html `<glide-core-button-group-button value="value-1" selected
+      >Button 1</glide-core-button-group-button
+    >`);
+    buttonElement.focus();
+    const spy = sinon.spy();
+    buttonElement.addEventListener('input', spy);
+    await sendKeys({ press: ' ' });
+    expect(spy.notCalled).to.be.true;
+});

package/dist/button-group.js

@@ -1 +1 @@
-"use strict";var A=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var a=(o,e,t,l)=>{for(var i=l>1?void 0:l?w(e,t):e,c=o.length-1,f;c>=0;c--)(f=o[c])&&(i=(l?f(e,t,i):f(i))||i);return l&&i&&A(e,t,i),i};var v=(o,e,t)=>{if(!e.has(o))throw TypeError("Cannot "+t)};var n=(o,e,t)=>(v(o,e,"read from private field"),t?t.call(o):e.get(o)),u=(o,e,t)=>{if(e.has(o))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(o):e.set(o,t)};var h=(o,e,t)=>(v(o,e,"access private method"),t);var s,m,I;import{LitElement as d,html as g}from"lit";import{classMap as E}from"lit/directives/class-map.js";import{createRef as M,ref as R}from"lit/directives/ref.js";import{customElement as S,property as p,queryAssignedElements as $}from"lit/decorators.js";import{owSlotType as b}from"./library/ow.js";import{when as x}from"lit/directives/when.js";import y from"./button-group.button.js";import O from"./button-group.styles.js";let r=class extends d{constructor(){super(...arguments);u(this,m);this.label="";this.orientation="horizontal";u(this,s,M())}firstUpdated(){if(b(n(this,s).value,[y]),this.orientation==="vertical")for(const t of this.listItems)t.toggleAttribute("vertical");if(this.variant==="icon-only")for(const t of this.listItems)t.setAttribute("variant","icon-only")}render(){return g`${x(!!this.label,()=>g`<div class="label" id="glide-core-button-group">${this.label}</div>`)}<ul aria-labelledby="glide-core-button-group" role="radiogroup" class="${E({"radio-group":!0,vertical:this.orientation==="vertical"})}"><slot @slotchange="${h(this,m,I)}" ${R(n(this,s))}></slot></ul>`}willUpdate(t){if(this.hasUpdated&&t.has("variant"))if(t.get("variant")==="icon-only")for(const i of this.listItems)i.removeAttribute("variant");else for(const i of this.listItems)i.setAttribute("variant","icon-only");if(this.hasUpdated&&t.has("orientation")){const l=t.get("orientation");if(l==="vertical")for(const i of this.listItems)i.removeAttribute("vertical");else if(l==="horizontal")for(const i of this.listItems)i.toggleAttribute("vertical")}}};s=new WeakMap,m=new WeakSet,I=function(){b(n(this,s).value,[y])},r.shadowRootOptions={...d.shadowRootOptions,mode:"closed"},r.styles=O,a([p()],r.prototype,"label",2),a([$({selector:"glide-core-button-group-button"})],r.prototype,"listItems",2),a([p()],r.prototype,"variant",2),a([p()],r.prototype,"orientation",2),r=a([S("glide-core-button-group")],r);export{r as default};
+var __decorate=this&&this.__decorate||function(t,e,o,r){var i,l=arguments.length,s=l<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(s=(l<3?i(s):l>3?i(e,o,s):i(e,o))||s);return l>3&&s&&Object.defineProperty(e,o,s),s};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedElements}from"lit/decorators.js";import{owSlotType}from"./library/ow.js";import{when}from"lit/directives/when.js";import GlideCoreButtonGroupButton from"./button-group.button.js";import styles from"./button-group.styles.js";let GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.label="",this.orientation="horizontal",this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){if(owSlotType(this.#t.value,[GlideCoreButtonGroupButton]),"vertical"===this.orientation)for(const t of this.listItems)t.toggleAttribute("vertical");if("icon-only"===this.variant)for(const t of this.listItems)t.setAttribute("variant","icon-only")}render(){return html`${when(Boolean(this.label),(()=>html`<div class="label" id="glide-core-button-group">${this.label}</div>`))}<ul aria-labelledby="glide-core-button-group" role="radiogroup" class="${classMap({"radio-group":!0,vertical:"vertical"===this.orientation})}"><slot @slotchange="${this.#e}" ${ref(this.#t)}></slot></ul>`}willUpdate(t){if(this.hasUpdated&&t.has("variant")){if("icon-only"===t.get("variant"))for(const t of this.listItems)t.removeAttribute("variant");else for(const t of this.listItems)t.setAttribute("variant","icon-only")}if(this.hasUpdated&&t.has("orientation")){const e=t.get("orientation");if("vertical"===e)for(const t of this.listItems)t.removeAttribute("vertical");else if("horizontal"===e)for(const t of this.listItems)t.toggleAttribute("vertical")}}#t;#e(){owSlotType(this.#t.value,[GlideCoreButtonGroupButton])}};__decorate([property()],GlideCoreButtonGroup.prototype,"label",void 0),__decorate([queryAssignedElements({selector:"glide-core-button-group-button"})],GlideCoreButtonGroup.prototype,"listItems",void 0),__decorate([property()],GlideCoreButtonGroup.prototype,"variant",void 0),__decorate([property()],GlideCoreButtonGroup.prototype,"orientation",void 0),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group")],GlideCoreButtonGroup);export default GlideCoreButtonGroup;

package/dist/button-group.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as r}from"lit";import e from"./styles/visually-hidden.js";export default[r`
+import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
     .radio-group {
       appearance: none;
       border: 1px solid var(--glide-core-border-base);
@@ -13,6 +13,6 @@
     }
 
     .label {
-      ${e};
+      ${visuallyHidden};
     }
-  `];
+  `];