@crowdstrike/glide-core 0.5.1 → 0.6.0

package/dist/modal.test.floating-components.js

@@ -0,0 +1,62 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreModal from './modal.js';
+import GlideCoreModalTertiaryIcon from './modal.tertiary-icon.js';
+import GlideCoreTreeItemMenu from './tree.item.menu.js';
+GlideCoreModal.shadowRootOptions.mode = 'open';
+GlideCoreModalTertiaryIcon.shadowRootOptions.mode = 'open';
+GlideCoreTreeItemMenu.shadowRootOptions.mode = 'open';
+it('sets containing block for tooltips', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      <glide-core-tooltip>
+        Tooltip
+        <span slot="target">Target</span>
+      </glide-core-tooltip>
+      <glide-core-modal-tertiary-icon
+        slot="tertiary"
+        label="Information"
+        tooltip-placement="right"
+      >
+        Icon
+      </glide-core-modal-tertiary-icon>
+    </glide-core-modal>`);
+    const containingBlock = element.shadowRoot?.querySelector('dialog');
+    element.showModal();
+    const tooltip = element.querySelector('glide-core-tooltip');
+    expect(tooltip?.containingBlock === containingBlock).to.be.true;
+    const tertiaryIconTooltip = element
+        .querySelector('glide-core-modal-tertiary-icon')
+        ?.shadowRoot?.querySelector('glide-core-tooltip');
+    expect(tertiaryIconTooltip?.containingBlock === containingBlock).to.be.true;
+});
+it('sets containing block for menus', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      <glide-core-menu>
+        <glide-core-menu-options>
+          <glide-core-menu-link label="One" url="/one"> </glide-core-menu-link>
+        </glide-core-menu-options>
+
+        <div slot="target">Target</div>
+      </glide-core-menu>
+    </glide-core-modal>`);
+    const containingBlock = element.shadowRoot?.querySelector('dialog');
+    element.showModal();
+    const menu = element.querySelector('glide-core-menu');
+    expect(menu?.containingBlock === containingBlock).to.be.true;
+});
+it('sets containing block for tree item menu', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      <glide-core-tree>
+        <glide-core-tree-item label="yup">
+          <glide-core-tree-item-menu slot="menu">
+            <glide-core-menu-link label="Edit" url="/edit">
+            </glide-core-menu-link>
+          </glide-core-tree-item-menu>
+        </glide-core-tree-item>
+      </glide-core-tree>
+    </glide-core-modal>`);
+    const containingBlock = element.shadowRoot?.querySelector('dialog');
+    element.showModal();
+    const treeItemMenu = element.querySelector('glide-core-tree-item-menu');
+    const menu = treeItemMenu?.shadowRoot?.querySelector('glide-core-menu');
+    expect(menu?.containingBlock === containingBlock).to.be.true;
+});

package/dist/modal.test.lock-scroll.js

@@ -0,0 +1,76 @@
+import * as sinon from 'sinon';
+import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys, sendMouse } from '@web/test-runner-commands';
+import GlideCoreModal from './modal.js';
+GlideCoreModal.shadowRootOptions.mode = 'open';
+const addSpy = sinon.spy(document.documentElement.classList, 'add');
+const removeSpy = sinon.spy(document.documentElement.classList, 'remove');
+afterEach(() => {
+    addSpy.resetHistory();
+    removeSpy.resetHistory();
+});
+after(() => {
+    addSpy.restore();
+    removeSpy.restore();
+});
+it('adds the "private-glide-core-modal-lock-scroll" class to the documentElement when opened and removes it when closed', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.showModal();
+    expect(addSpy.callCount).to.equal(1);
+    expect(addSpy.calledWith('private-glide-core-modal-lock-scroll')).to.be.ok;
+    expect(removeSpy.callCount).to.equal(0);
+    element.close();
+    expect(removeSpy.callCount).to.equal(1);
+    expect(removeSpy.calledWith('private-glide-core-modal-lock-scroll')).to.be.ok;
+    // Verify `add` was not called again for some reason
+    expect(addSpy.callCount).to.equal(1);
+});
+it('removes the "private-glide-core-modal-lock-scroll" class when the close button is clicked', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.showModal();
+    expect(removeSpy.callCount).to.equal(0);
+    const button = element.shadowRoot.querySelector('[data-test="close-button"]');
+    expect(button).to.be.ok;
+    button?.click();
+    expect(removeSpy.callCount).to.equal(1);
+});
+it('removes the "private-glide-core-modal-lock-scroll" class when the "close" method is called', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.showModal();
+    expect(removeSpy.callCount).to.equal(0);
+    const dialogElement = element.shadowRoot.querySelector('dialog');
+    expect(dialogElement?.hasAttribute('open')).to.be.true;
+    element.close();
+    expect(removeSpy.callCount).to.equal(1);
+});
+it('removes the "private-glide-core-modal-lock-scroll" class when the escape key is pressed', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.showModal();
+    expect(removeSpy.callCount).to.equal(0);
+    await sendKeys({ press: 'Escape' });
+    expect(removeSpy.callCount).to.equal(1);
+});
+it('removes class "private-glide-core-modal-lock-scroll" from document when click is outside dialog', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title"
+      >Modal Content</glide-core-modal
+    >`);
+    element.showModal();
+    const dialogElement = element?.shadowRoot?.querySelector('dialog');
+    const boundingRectangle = dialogElement?.getBoundingClientRect();
+    expect(boundingRectangle).is.not.null;
+    expect(document.documentElement.classList.contains('private-glide-core-modal-lock-scroll')).to.be.true;
+    const { top, left } = boundingRectangle;
+    await sendMouse({
+        type: 'click',
+        position: [Math.floor(left - 1), Math.floor(top - 1)],
+    });
+    expect(document.documentElement.classList.contains('private-glide-core-modal-lock-scroll')).to.be.false;
+});

package/dist/modal.test.methods.js

@@ -0,0 +1,23 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreModal from './modal.js';
+GlideCoreModal.shadowRootOptions.mode = 'open';
+it('opens the modal when the "showModal" method is called and closes it when "close" is called', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      Modal Content
+    </glide-core-modal>`);
+    element.showModal();
+    const dialogElement = element.shadowRoot?.querySelector('dialog');
+    expect(dialogElement?.hasAttribute('open')).to.be.true;
+    element.close();
+    expect(dialogElement?.hasAttribute('open')).to.be.false;
+});
+it('remains open when the "showModal" method is called twice', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      Modal Content
+    </glide-core-modal>`);
+    element.showModal();
+    const dialogElement = element.shadowRoot?.querySelector('dialog');
+    expect(dialogElement?.hasAttribute('open')).to.be.true;
+    element.showModal();
+    expect(dialogElement?.hasAttribute('open')).to.be.true;
+});

package/dist/modal.test.scrollbars.js

@@ -0,0 +1,19 @@
+import './modal.js';
+import * as sinon from 'sinon';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreModal from './modal.js';
+GlideCoreModal.shadowRootOptions.mode = 'open';
+const cssSupportsStub = sinon.stub(window.CSS, 'supports').returns(false);
+const setPropertySpy = sinon.spy(document.documentElement.style, 'setProperty');
+afterEach(() => {
+    cssSupportsStub.restore();
+    setPropertySpy.restore();
+});
+it('sets the "--glide-scroll-size" variable when the browser does not support scrollbar-gutter', async () => {
+    const element = await fixture(html `<glide-core-modal label="Modal title">
+      Modal Content
+    </glide-core-modal>`);
+    element.showModal();
+    expect(cssSupportsStub.calledWith('scrollbar-gutter')).to.be.ok;
+    expect(setPropertySpy.callCount).to.equal(1);
+});

package/dist/radio-group.js

@@ -1 +1 @@
-"use strict";var tt=Object.defineProperty;var et=Object.getOwnPropertyDescriptor;var m=(n,d,t,e)=>{for(var i=e>1?void 0:e?et(d,t):d,b=n.length-1,A;b>=0;b--)(A=n[b])&&(i=(e?A(d,t,i):A(i))||i);return e&&i&&tt(d,t,i),i};var O=(n,d,t)=>{if(!d.has(n))throw TypeError("Cannot "+t)};var s=(n,d,t)=>(O(n,d,"read from private field"),t?t.call(n):d.get(n)),o=(n,d,t)=>{if(d.has(n))throw TypeError("Cannot add the same private member more than once");d instanceof WeakSet?d.add(n):d.set(n,t)},E=(n,d,t,e)=>(O(n,d,"write to private field"),e?e.call(n,t):d.set(n,t),t);var a=(n,d,t)=>(O(n,d,"access private method"),t);var R,g,p,c,y,I,V,F,S,B,$,X,x,Y,C,Z,D,_,U,G,l,r,u,v,w,T,q,H,L,z,M,K;import"./label.js";import"./tooltip.js";import{LitElement as N,html as it}from"lit";import{classMap as st}from"lit/directives/class-map.js";import{createRef as j,ref as J}from"lit/directives/ref.js";import{customElement as at,property as k,state as P}from"lit/decorators.js";import{owSlot as Q,owSlotType as W}from"./library/ow.js";import f from"./radio.js";import lt from"./radio-group.styles.js";let h=class extends N{constructor(){super();o(this,V);o(this,S);o(this,$);o(this,x);o(this,C);o(this,D);o(this,U);o(this,l);o(this,u);o(this,w);o(this,q);o(this,L);o(this,M);this.description="";this.disabled=!1;this.label="";this.hideLabel=!1;this.name="";this.required=!1;this.value="";this.isCheckingValidity=!1;this.isReportValidityOrSubmit=!1;o(this,R,j());o(this,g,j());o(this,p,void 0);o(this,c,void 0);o(this,y,void 0);o(this,I,({formData:t})=>{this.name&&this.value.length>0&&!this.disabled&&t.append(this.name,this.value)});E(this,c,this.attachInternals()),this.addEventListener("invalid",a(this,C,Z))}checkValidity(){return this.isCheckingValidity=!0,s(this,c).checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",s(this,I)),E(this,p,void 0)}firstUpdated(){Q(s(this,g).value),W(s(this,g).value,[f]),E(this,p,s(this,l,r).find(t=>t.checked)),a(this,V,F).call(this)}focus(t){let e=s(this,l,r).find(i=>i.checked);e||(e=s(this,l,r).find(i=>i.tabIndex===0)),e?.focus(t)}get form(){return s(this,c).form}get validity(){return s(this,c).validity}get willValidate(){return s(this,c).willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",s(this,I))}formResetCallback(){if(s(this,p)&&this.contains(s(this,p)))for(const t of s(this,l,r))a(this,u,v).call(this,t===s(this,p),t)}render(){return it`<div class="component" @click="${a(this,$,X)}" @keydown="${a(this,D,_)}" ${J(s(this,R))}><glide-core-label orientation="horizontal" ?error="${s(this,S,B)}" ?hide="${this.hideLabel}" ?required="${this.required}"><label id="label" data-test="label">${this.label}</label><div class="${st({"radio-container":!0,vertical:!0,invalid:s(this,S,B)})}" role="radiogroup" slot="control" aria-labelledby="label description"><slot ${J(s(this,g))} @slotchange="${a(this,x,Y)}"></slot></div><slot name="tooltip" slot="tooltip"></slot><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return s(this,c).reportValidity()}updated(t){this.hasUpdated&&(t.has("value")||t.has("required"))&&(a(this,U,G).call(this),a(this,q,H).call(this,!s(this,c).validity.valid),this.requestUpdate())}willUpdate(t){if(this.hasUpdated){if(t.has("required")&&a(this,M,K).call(this),t.has("disabled")){for(const e of s(this,l,r))a(this,w,T).call(this,this.disabled,e);!this.disabled&&a(this,L,z).call(this)}if(t.has("value"))for(const e of s(this,l,r))e.checked=e.value===this.value}}};R=new WeakMap,g=new WeakMap,p=new WeakMap,c=new WeakMap,y=new WeakMap,I=new WeakMap,V=new WeakSet,F=function(){const t=s(this,l,r).find(e=>e.checked);this.value=t?.value??s(this,p)?.value??"",E(this,y,t??s(this,p)),this.required&&a(this,M,K).call(this);for(const e of s(this,l,r))this.disabled?a(this,w,T).call(this,this.disabled,e):a(this,w,T).call(this,e.disabled,e);!this.disabled&&a(this,L,z).call(this)},S=new WeakSet,B=function(){const t=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;return a(this,q,H).call(this,t),t},$=new WeakSet,X=function(t){if(this.disabled)return;if(t.target instanceof f&&t.target.disabled&&s(this,y)&&!s(this,y).disabled){s(this,y)?.focus();return}const e=t.target;if(e instanceof f&&e&&!e.disabled){a(this,u,v).call(this,!0,e);for(const i of s(this,l,r))i!==e&&a(this,u,v).call(this,!1,i)}},x=new WeakSet,Y=function(){Q(s(this,g).value),W(s(this,g).value,[f]),a(this,V,F).call(this)},C=new WeakSet,Z=function(t){t.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())},D=new WeakSet,_=function(t){if(!(this.disabled||t.target instanceof f&&t.target?.disabled)&&t.target instanceof f){const e=t.target;switch(t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let i=e.previousElementSibling;for(;(!i||i instanceof f&&i.disabled||!(i instanceof f))&&i!==e;)if(i===null){const b=s(this,l,r).at(-1);b&&(i=b)}else i=i.previousElementSibling;i&&i instanceof f&&!i.disabled&&i!==e&&(a(this,u,v).call(this,!1,e),a(this,u,v).call(this,!0,i));break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let i=e.nextElementSibling;for(;(!i||i instanceof f&&i.disabled||!(i instanceof f))&&i!==e;)if(i===null){const b=s(this,l,r).at(0);b&&(i=b)}else i=i.nextElementSibling;i&&i instanceof f&&!i.disabled&&i!==e&&(a(this,u,v).call(this,!1,e),a(this,u,v).call(this,!0,i));break}case" ":{if(t.preventDefault(),!e.disabled&&!e.checked){a(this,u,v).call(this,!0,e);for(const i of s(this,l,r))i!==e&&a(this,u,v).call(this,!1,i)}break}}}},U=new WeakSet,G=function(){const t=s(this,l,r).find(e=>e.checked);this.required&&!t?s(this,c).setValidity({valueMissing:!0}," ",s(this,R).value):s(this,c).setValidity({})},l=new WeakSet,r=function(){return s(this,g).value?.assignedElements().filter(t=>t instanceof f)??[]},u=new WeakSet,v=function(t,e){e.checked=t,e.tabIndex=t?0:-1,t&&(E(this,y,e),this.value=e.value,e.focus(),e.dispatchEvent(new Event("change",{bubbles:!0})),e.dispatchEvent(new Event("input",{bubbles:!0})))},w=new WeakSet,T=function(t,e){e.disabled=t,t&&(e.tabIndex=-1)},q=new WeakSet,H=function(t){for(const e of s(this,l,r))e.invalid=t},L=new WeakSet,z=function(){if(this.disabled||s(this,l,r).every(i=>i.disabled))return;let t=null;const e=s(this,l,r).find(i=>!i.disabled&&i.checked);if(e)t=e;else{const i=s(this,l,r).find(b=>!b.disabled);i&&(t=i)}if(t)for(const i of s(this,l,r))i.tabIndex=i===t?0:-1},M=new WeakSet,K=function(){for(const t of s(this,l,r))t.required=this.required},h.formAssociated=!0,h.shadowRootOptions={...N.shadowRootOptions,mode:"closed"},h.styles=lt,m([k()],h.prototype,"description",2),m([k({type:Boolean,reflect:!0})],h.prototype,"disabled",2),m([k()],h.prototype,"label",2),m([k({attribute:"hide-label",type:Boolean})],h.prototype,"hideLabel",2),m([k()],h.prototype,"name",2),m([k({type:Boolean,reflect:!0})],h.prototype,"required",2),m([k({reflect:!0})],h.prototype,"value",2),m([P()],h.prototype,"isCheckingValidity",2),m([P()],h.prototype,"isReportValidityOrSubmit",2),h=m([at("glide-core-radio-group")],h);export{h as default};
+var __decorate=this&&this.__decorate||function(e,i,t,o){var s,a=arguments.length,d=a<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,i,t,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(d=(a<3?s(d):a>3?s(i,t,d):s(i,t))||d);return a>3&&d&&Object.defineProperty(i,t,d),d};import"./label.js";import"./tooltip.js";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 GlideCoreRadio from"./radio.js";import styles from"./radio-group.styles.js";let GlideCoreRadioGroup=class GlideCoreRadioGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}checkValidity(){return this.isCheckingValidity=!0,this.#e.checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i),this.#t=void 0}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreRadio]),this.#t=this.#s.find((e=>e.checked)),this.#a()}focus(e){let i=this.#s.find((e=>e.checked));i||(i=this.#s.find((e=>0===e.tabIndex))),i?.focus(e)}get form(){return this.#e.form}get validity(){return this.#e.validity}get willValidate(){return this.#e.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){if(this.#t&&this.contains(this.#t))for(const e of this.#s)this.#d(e===this.#t,e)}render(){return html`<div class="component" @click="${this.#l}" @keydown="${this.#r}" ${ref(this.#n)}><glide-core-label orientation="horizontal" ?disabled="${this.disabled}" ?error="${this.#h}" ?hide="${this.hideLabel}" ?required="${this.required}"><label id="label" data-test="label">${this.label}</label><div class="${classMap({"radio-container":!0,vertical:!0,invalid:this.#h})}" role="radiogroup" slot="control" aria-labelledby="label description"><slot ${ref(this.#o)} @slotchange="${this.#c}"></slot></div><slot name="tooltip" slot="tooltip"></slot><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return this.#e.reportValidity()}updated(e){this.hasUpdated&&(e.has("value")||e.has("required"))&&(this.#p(),this.#f(!this.#e.validity.valid),this.requestUpdate())}willUpdate(e){if(this.hasUpdated){if(e.has("required")&&this.#u(),e.has("disabled")){for(const e of this.#s)this.#R(this.disabled,e);!this.disabled&&this.#m()}if(e.has("value"))for(const e of this.#s)e.checked=e.value===this.value}}constructor(){super(),this.description="",this.disabled=!1,this.label="",this.hideLabel=!1,this.name="",this.required=!1,this.value="",this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#n=createRef(),this.#o=createRef(),this.#t=void 0,this.#i=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",this.#b)}#n;#o;#t;#e;#v;#i;#a(){const e=this.#s.find((e=>e.checked));this.value=e?.value??this.#t?.value??"",this.#v=e??this.#t,this.required&&this.#u();for(const e of this.#s)this.disabled?this.#R(this.disabled,e):this.#R(e.disabled,e);!this.disabled&&this.#m()}get#h(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;return this.#f(e),e}#l(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadio&&e.target.disabled&&this.#v&&!this.#v.disabled)return void this.#v?.focus();const i=e.target;if(i instanceof GlideCoreRadio&&i&&!i.disabled){this.#d(!0,i);for(const e of this.#s)e!==i&&this.#d(!1,e)}}#c(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreRadio]),this.#a()}#b(e){e.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}#r(e){if(!(this.disabled||e.target instanceof GlideCoreRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadio){const i=e.target;switch(e.key){case"ArrowUp":case"ArrowLeft":{e.preventDefault();let t=i.previousElementSibling;for(;(!t||t instanceof GlideCoreRadio&&t.disabled||!(t instanceof GlideCoreRadio))&&t!==i;)if(null===t){const e=this.#s.at(-1);e&&(t=e)}else t=t.previousElementSibling;t&&t instanceof GlideCoreRadio&&!t.disabled&&t!==i&&(this.#d(!1,i),this.#d(!0,t));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();let t=i.nextElementSibling;for(;(!t||t instanceof GlideCoreRadio&&t.disabled||!(t instanceof GlideCoreRadio))&&t!==i;)if(null===t){const e=this.#s.at(0);e&&(t=e)}else t=t.nextElementSibling;t&&t instanceof GlideCoreRadio&&!t.disabled&&t!==i&&(this.#d(!1,i),this.#d(!0,t));break}case" ":if(e.preventDefault(),!i.disabled&&!i.checked){this.#d(!0,i);for(const e of this.#s)e!==i&&this.#d(!1,e)}}}}#p(){const e=this.#s.find((e=>e.checked));this.required&&!e?this.#e.setValidity({valueMissing:!0}," ",this.#n.value):this.#e.setValidity({})}get#s(){return this.#o.value?.assignedElements().filter((e=>e instanceof GlideCoreRadio))??[]}#d(e,i){i.checked=e,i.tabIndex=e?0:-1,e&&(this.#v=i,this.value=i.value,i.focus(),i.dispatchEvent(new Event("change",{bubbles:!0})),i.dispatchEvent(new Event("input",{bubbles:!0})))}#R(e,i){i.disabled=e,e&&(i.tabIndex=-1)}#f(e){for(const i of this.#s)i.invalid=e}#m(){if(this.disabled||this.#s.every((e=>e.disabled)))return;let e=null;const i=this.#s.find((e=>!e.disabled&&e.checked));if(i)e=i;else{const i=this.#s.find((e=>!e.disabled));i&&(e=i)}if(e)for(const i of this.#s)i.tabIndex=i===e?0:-1}#u(){for(const e of this.#s)e.required=this.required}};__decorate([property()],GlideCoreRadioGroup.prototype,"description",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroup.prototype,"disabled",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreRadioGroup.prototype,"hideLabel",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"name",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroup.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"value",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isReportValidityOrSubmit",void 0),GlideCoreRadioGroup=__decorate([customElement("glide-core-radio-group")],GlideCoreRadioGroup);export default GlideCoreRadioGroup;

package/dist/radio-group.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as e}from"lit";export default[e`
+import{css}from"lit";export default[css`
     .component {
       color: var(--glide-core-text-body-1);
       display: inline-flex;
@@ -8,33 +8,29 @@
       font-variant: var(--glide-core-heading-xxxs-font-variant);
       font-weight: var(--glide-core-heading-xxxs-font-weight);
       line-height: 1;
+    }
 
-      & .vertical {
-        appearance: none;
-        border: none;
-        display: flex;
-        flex-direction: column;
-        margin: 0;
-        padding: 0;
+    .radio-container {
+      display: flex;
+      gap: 0.375rem;
+      inline-size: min-content;
+
+      &.invalid {
+        border: 1px solid var(--glide-core-status-error);
+        border-radius: 0.5rem;
+        color: var(--glide-core-status-error);
+        margin-block-end: -0.0625rem;
+        margin-inline-start: -0.0625rem;
+        padding: var(--glide-core-spacing-xxs) 0.375rem;
       }
 
-      & .radio-container {
+      &.vertical {
         display: flex;
-        gap: var(--glide-core-spacing-xs);
-        inline-size: min-content;
-
-        &.invalid {
-          border: 1px solid var(--glide-core-status-error);
-          border-radius: 0.5rem;
-          color: var(--glide-core-status-error);
-          margin-block-end: -0.0625rem;
-          margin-inline-start: -0.0625rem;
-          padding: var(--glide-core-spacing-xxs) 0.375rem;
-        }
+        flex-direction: column;
       }
+    }
 
-      glide-core-label::part(tooltip-and-label-container) {
-        align-items: flex-start;
-      }
+    glide-core-label::part(tooltip-and-label-container) {
+      align-items: flex-start;
     }
-  `];
+  `];

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

@@ -0,0 +1,323 @@
+import './radio-group.js';
+import './radio.js';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreRadio from './radio.js';
+import GlideCoreRadioGroup from './radio-group.js';
+import expectArgumentError from './library/expect-argument-error.js';
+GlideCoreRadio.shadowRootOptions.mode = 'open';
+GlideCoreRadioGroup.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-radio-group')).to.equal(GlideCoreRadioGroup);
+    expect(window.customElements.get('glide-core-radio')).to.equal(GlideCoreRadio);
+});
+it('is accessible', async () => {
+    const element = await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
+      <span slot="tooltip">Tooltip</span>
+      <div slot="description">Description</div>
+    </glide-core-radio-group>
+  `);
+    await expect(element).to.be.accessible();
+});
+it('renders appropriate attributes on glide-core-radio', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two" checked></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios[0]).to.have.attribute('value', 'value-1');
+    expect(radios[0]).to.have.attribute('tabindex', '-1');
+    expect(radios[0]).to.not.have.attribute('checked');
+    expect(radios[0]).to.have.attribute('role', 'radio');
+    expect(radios[0]).to.have.attribute('aria-checked', 'false');
+    expect(radios[0]).to.have.attribute('aria-disabled', 'false');
+    expect(radios[0]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[0]).to.have.attribute('aria-required', 'false');
+    expect(radios[1]).to.have.attribute('value', 'value-2');
+    expect(radios[1]).to.have.attribute('tabindex', '0');
+    expect(radios[1]).to.have.attribute('checked');
+    expect(radios[1]).to.have.attribute('role', 'radio');
+    expect(radios[1]).to.have.attribute('aria-checked', 'true');
+    expect(radios[1]).to.have.attribute('aria-disabled', 'false');
+    expect(radios[1]).to.have.attribute('aria-invalid', 'false');
+    expect(radios[1]).to.have.attribute('aria-required', 'false');
+});
+it('renders a label, radio group, description, and tooltip when given', async () => {
+    const group = await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <span slot="tooltip" data-test="tooltip">Tooltip</span>
+      <div slot="description" data-test="description">Description</div>
+    </glide-core-radio-group>
+  `);
+    const label = group.shadowRoot?.querySelector('[data-test="label"]');
+    const radioGroup = group?.shadowRoot?.querySelector('[role="radiogroup"]');
+    const tooltip = document.querySelector('[data-test="tooltip"]');
+    const description = document?.querySelector('[data-test="description"]');
+    expect(group).to.not.be.null;
+    expect(label).to.not.be.null;
+    expect(radioGroup).to.not.be.null;
+    expect(tooltip).to.not.be.null;
+    expect(description).to.not.be.null;
+});
+it('does not render a required symbol when a "label" is given and "required" is not set', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const group = document.querySelector('glide-core-radio-group');
+    const requiredSymbol = group?.shadowRoot?.querySelector('[data-test="label-required"]');
+    expect(requiredSymbol).to.be.null;
+});
+it('sets "required" attributes on radios when "required" is set on the group', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1" required>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios[0]).to.have.attribute('required');
+    expect(radios[0]).to.have.attribute('aria-required', 'true');
+    expect(radios[1]).to.have.attribute('required');
+    expect(radios[1]).to.have.attribute('aria-required', 'true');
+});
+it('does not set "required" attributes on radios when "required" is not set on the group', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios[0]).to.not.have.attribute('required');
+    expect(radios[0]).to.have.attribute('aria-required', 'false');
+    expect(radios[1]).to.not.have.attribute('required');
+    expect(radios[1]).to.have.attribute('aria-required', 'false');
+});
+it('renders radios as "disabled" when "disabled" is set on the group', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1" disabled>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.have.attribute('disabled');
+    expect(radio).to.have.attribute('aria-disabled', 'true');
+    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.not.null;
+});
+it('does not render radios as "disabled" when "disabled" is not set on the group', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.not.have.attribute('disabled');
+    expect(radio).to.have.attribute('aria-disabled', 'false');
+    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.null;
+});
+it('renders radios as "disabled" when "disabled" is dynamically set and removed on the group', async () => {
+    const component = await fixture(html `
+    <glide-core-radio-group label="label" name="name" value="value-1">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.not.have.attribute('disabled');
+    expect(radio).to.have.attribute('aria-disabled', 'false');
+    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.null;
+    component.disabled = true;
+    await elementUpdated(component);
+    expect(radio).to.have.attribute('disabled');
+    expect(radio).to.have.attribute('aria-disabled', 'true');
+    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.not.null;
+    component.disabled = false;
+    await elementUpdated(component);
+    expect(radio).to.not.have.attribute('disabled');
+    expect(radio).to.have.attribute('aria-disabled', 'false');
+    expect(radio?.shadowRoot?.querySelector('.disabled')).to.be.null;
+});
+it('sets the radio group to an empty value when no radio is "checked"', async () => {
+    const component = await fixture(html `
+    <glide-core-radio-group label="label" name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(component.value).to.equal('');
+    expect(radios.length).to.equal(2);
+    expect(radios[0]).to.not.have.attribute('checked');
+    expect(radios[0]).to.have.attribute('aria-checked', 'false');
+    expect(radios[1]).to.not.have.attribute('checked');
+    expect(radios[1]).to.have.attribute('aria-checked', 'false');
+});
+it('sets the group "value" when a radio is set as "checked"', async () => {
+    await fixture(html `
+    <glide-core-radio-group label="label" name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" checked label="Two"></glide-core-radio>
+    </glide-core-radio-group>
+  `);
+    const group = document.querySelector('glide-core-radio-group');
+    expect(group).to.have.attribute('value', 'value-2');
+});
+it('throws an error when an element other than `glide-core-radio` is a child of the default slot', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `
+      <glide-core-radio-group label="label" name="name">
+        <div>Option 1</div>
+        <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+      </glide-core-radio-group>
+    `);
+    });
+});
+it('throws an error when the group has no children', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `<glide-core-radio-group label="label" name="name">
+      </glide-core-radio-group>`);
+    });
+});
+it('sets the first radio to be tabbable when none are checked', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios.length).to.equal(3);
+    expect(radios[0]).to.have.attribute('tabindex', '0');
+    expect(radios[1]).to.have.attribute('tabindex', '-1');
+    expect(radios[2]).to.have.attribute('tabindex', '-1');
+});
+it('sets the first non-disabled radio as tabbable when none are checked', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" disabled label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+      <glide-core-radio value="value-3" label="Three"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios.length).to.equal(3);
+    expect(radios[0]).to.have.attribute('tabindex', '-1');
+    expect(radios[1]).to.have.attribute('tabindex', '0');
+    expect(radios[2]).to.have.attribute('tabindex', '-1');
+});
+it('no radios are tabbable when the group is "disabled"', async () => {
+    await fixture(html `<glide-core-radio-group name="name" disabled>
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+      <glide-core-radio
+        value="value-3"
+        checked
+        label="Three"
+      ></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios.length).to.equal(3);
+    expect(radios[0]).to.have.attribute('tabindex', '-1');
+    expect(radios[1]).to.have.attribute('tabindex', '-1');
+    expect(radios[2]).to.have.attribute('tabindex', '-1');
+});
+it('disabled radios are not tabbable', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" disabled label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" disabled label="Two"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios.length).to.equal(2);
+    expect(radios[0]).to.have.attribute('tabindex', '-1');
+    expect(radios[1]).to.have.attribute('tabindex', '-1');
+});
+it('sets only the "checked" radio as tabbable', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+      <glide-core-radio value="value-2" label="Two"></glide-core-radio>
+      <glide-core-radio
+        value="value-3"
+        label="Three"
+        checked
+      ></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radios = document.querySelectorAll('glide-core-radio');
+    expect(radios.length).to.equal(3);
+    expect(radios[0]).to.have.attribute('tabindex', '-1');
+    expect(radios[1]).to.have.attribute('tabindex', '-1');
+    expect(radios[2]).to.have.attribute('tabindex', '0');
+});
+it('has reactive radio attribute "aria-checked"', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.not.be.null;
+    expect(radio).to.have.attribute('aria-checked', 'false');
+    radio?.setAttribute('checked', '');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-checked', 'true');
+    radio?.removeAttribute('checked');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-checked', 'false');
+});
+it('has reactive radio attribute "aria-disabled"', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.not.be.null;
+    expect(radio).to.have.attribute('aria-disabled', 'false');
+    radio?.setAttribute('disabled', '');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-disabled', 'true');
+    radio?.removeAttribute('disabled');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-disabled', 'false');
+});
+it('has reactive radio attribute "aria-required"', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.not.be.null;
+    expect(radio).to.have.attribute('aria-required', 'false');
+    radio?.setAttribute('required', '');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-required', 'true');
+    radio?.removeAttribute('required');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-required', 'false');
+});
+it('has reactive radio attribute "aria-invalid"', async () => {
+    await fixture(html `<glide-core-radio-group name="name">
+      <glide-core-radio value="value-1" label="One"></glide-core-radio>
+    </glide-core-radio-group>`);
+    const radio = document.querySelector('glide-core-radio');
+    expect(radio).to.not.be.null;
+    expect(radio).to.have.attribute('aria-invalid', 'false');
+    radio?.setAttribute('invalid', '');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-invalid', 'true');
+    radio?.removeAttribute('invalid');
+    await elementUpdated(radio);
+    expect(radio).to.have.attribute('aria-invalid', 'false');
+});
+it('adds a label to radio when given', async () => {
+    const component = await fixture(html `<glide-core-radio value="value-1" label="One"></glide-core-radio>`);
+    const label = component.shadowRoot.querySelector('.component')?.textContent;
+    expect(label).to.contain('One');
+    expect(component.ariaLabel).to.equal('One');
+});
+it('changes the radio label dynamically as when given', async () => {
+    const component = await fixture(html `<glide-core-radio value="value-1" label="One"></glide-core-radio>`);
+    component.label = 'Two';
+    await elementUpdated(component);
+    const label = component.shadowRoot.querySelector('.component')?.textContent;
+    expect(label).to.contain('Two');
+    expect(component.ariaLabel).to.equal('Two');
+});