@crowdstrike/glide-core 0.5.1 → 0.6.0

package/dist/split-link.test.basics.js

@@ -0,0 +1,92 @@
+import './split-link.js';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreSplitLink from './split-link.js';
+import expectArgumentError from './library/expect-argument-error.js';
+GlideCoreSplitLink.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-split-link')).to.equal(GlideCoreSplitLink);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `
+    <glide-core-split-link url="/">Link</glide-core-split-link>
+  `);
+    await expect(component).to.be.accessible();
+});
+it('renders a link with href with a label by default', async () => {
+    const component = await fixture(html `
+    <glide-core-split-link url="/">Link</glide-core-split-link>
+  `);
+    const link = component?.shadowRoot?.querySelector('[data-test="split-link"]');
+    expect(link).to.not.be.null;
+    expect(link).to.have.attribute('href', '/');
+    expect(component?.textContent).to.equal('Link');
+});
+it('renders with size "large" and variant "primary" by default', async () => {
+    const component = await fixture(html `
+    <glide-core-split-link url="/">Link</glide-core-split-link>
+  `);
+    const link = component?.shadowRoot?.querySelector('[data-test="split-link"]');
+    expect(link?.classList.contains('large')).to.be.true;
+    expect(link?.classList.contains('primary')).to.be.true;
+});
+it('adds "small" styling when the "size" attribute is "small" ', async () => {
+    const component = await fixture(html `
+    <glide-core-split-link size="small" url="/">Link</glide-core-split-link>
+  `);
+    const link = component?.shadowRoot?.querySelector('[data-test="split-link"]');
+    expect(link?.classList.contains('small')).to.be.true;
+});
+it('adds "secondary" styling when "variant" attribute is "secondary"', async () => {
+    const component = await fixture(html `
+    <glide-core-split-link variant="secondary" url="/"
+      >Link</glide-core-split-link
+    >
+  `);
+    const link = component?.shadowRoot?.querySelector('[data-test="split-link"]');
+    expect(link?.classList.contains('secondary')).to.be.true;
+});
+it('becomes a span when the "disabled" attribute exists', async () => {
+    const component = await fixture(html `
+    <glide-core-split-link disabled url="/">Link</glide-core-split-link>
+  `);
+    const link = component?.shadowRoot?.querySelector('[data-test="split-link"]');
+    expect(link).to.have.attribute('aria-disabled', 'true');
+    expect(link).to.have.attribute('role', 'link');
+});
+it('renders a prefix slot when given', async () => {
+    const component = await fixture(html `
+    <glide-core-split-link url="/"
+      ><div slot="prefix">Prefix</div>
+      Link</glide-core-split-link
+    >
+  `);
+    const link = component?.shadowRoot?.querySelector('[data-test="split-link"]');
+    expect(link).to.not.be.null;
+    expect(component.querySelector('[slot="prefix"]')?.textContent).to.equal('Prefix');
+});
+it('renders with prefix class when dynamically added and removed', async () => {
+    const component = await fixture(html `
+    <glide-core-split-link url="/"
+      ><span slot="prefix">prefix</span>Link</glide-core-split-link
+    >
+  `);
+    expect(document.querySelector('[slot="prefix"]')).to.be.not.null;
+    expect([
+        ...component.shadowRoot.querySelector('[data-test="split-link"]')
+            .classList,
+    ]).to.include('has-prefix');
+    component.querySelector('[slot="prefix"]')?.remove();
+    await elementUpdated(component);
+    expect([
+        ...component.shadowRoot.querySelector('[data-test="split-link"]')
+            .classList,
+    ]).to.not.include('has-prefix');
+});
+it('throws an error when there is no link label', async () => {
+    await expectArgumentError(() => fixture(html `<glide-core-split-link url="/"></glide-core-split-link>`));
+});
+it('throws an error when there is something other than text in the default slot', async () => {
+    await expectArgumentError(() => fixture(html `<glide-core-split-link url="#"
+        ><div>test</div></glide-core-split-link
+      >`));
+});

package/dist/split-link.test.interactions.d.ts

@@ -0,0 +1 @@
+import './split-link.js';

package/dist/split-link.test.interactions.js

@@ -0,0 +1,19 @@
+import './split-link.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreSplitLink from './split-link.js';
+import sinon from 'sinon';
+GlideCoreSplitLink.shadowRootOptions.mode = 'open';
+// This behavior exists to make the link behave like a button.
+it('navigates when the spacebar is pressed', async () => {
+    const windowOpen = window.open;
+    const spy = sinon.spy();
+    window.open = spy;
+    const component = await fixture(html `
+    <glide-core-split-link url="/">Link</glide-core-split-link>
+  `);
+    component.focus();
+    await sendKeys({ press: ' ' });
+    expect(spy.called).to.be.true;
+    window.open = windowOpen;
+});

package/dist/status-indicator.js

@@ -1 +1 @@
-"use strict";var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(n,l,o,i)=>{for(var r=i>1?void 0:i?c(l,o):l,t=n.length-1,d;t>=0;t--)(d=n[t])&&(r=(i?d(l,o,r):d(r))||r);return i&&r&&u(l,o,r),r};import{LitElement as s,html as h,svg as C}from"lit";import{classMap as v}from"lit/directives/class-map.js";import{customElement as p,property as f}from"lit/decorators.js";import L from"./status-indicator.styles.js";let e=class extends s{constructor(){super(...arguments);this.variant="idle"}render(){return h`<svg aria-hidden="true" class="${v({component:!0,failed:this.variant==="failed",idle:this.variant==="idle","in-progress":this.variant==="in-progress",queued:this.variant==="queued",scheduled:this.variant==="scheduled",success:this.variant==="success","warning-critical":this.variant==="warning-critical","warning-high":this.variant==="warning-high","warning-informational":this.variant==="warning-informational","warning-low":this.variant==="warning-low","warning-medium":this.variant==="warning-medium","warning-zero":this.variant==="warning-zero"})}" fill="none" height="16" width="16" viewBox="0 0 24 24">${M[this.variant]}</svg>`}};e.shadowRootOptions={...s.shadowRootOptions,delegatesFocus:!0,mode:"closed"},e.styles=L,a([f({reflect:!0})],e.prototype,"variant",2),e=a([p("glide-core-status-indicator")],e);export{e as default};const M={failed:C`<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.5858 12L8.29289 14.2929C7.90237 14.6834 7.90237 15.3166 8.29289 15.7071C8.68342 16.0976 9.31658 16.0976 9.70711 15.7071L12 13.4142L14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L13.4142 12L15.7071 9.70711C16.0976 9.31658 16.0976 8.68342 15.7071 8.29289C15.3166 7.90237 14.6834 7.90237 14.2929 8.29289L12 10.5858L9.70711 8.29289Z" fill="currentColor">`,idle:C`<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM10.5 9C10.5 8.44772 10.0523 8 9.5 8C8.94772 8 8.5 8.44772 8.5 9V15C8.5 15.5523 8.94772 16 9.5 16C10.0523 16 10.5 15.5523 10.5 15V9ZM15.5 9C15.5 8.44772 15.0523 8 14.5 8C13.9477 8 13.5 8.44772 13.5 9V15C13.5 15.5523 13.9477 16 14.5 16C15.0523 16 15.5 15.5523 15.5 15V9Z" fill="currentColor">`,"in-progress":C`<path d="M3.34025 16.9997C2.0881 14.8298 2.72473 12.0644 4.79795 10.6601L4.80018 10.6578C6.46564 9.53235 8.65775 9.57012 10.2843 10.7523L13.7164 13.2477C15.3418 14.4299 17.5339 14.4676 19.2005 13.3421L19.2027 13.3399C21.2771 11.9356 21.9148 9.16792 20.6604 7.00026M17.002 20.6593C14.8321 21.9114 12.0667 21.2748 10.6623 19.2016L10.6601 19.1994C9.53457 17.5339 9.57234 15.3418 10.7545 13.7152L13.2499 10.2832C14.4321 8.6577 14.4699 6.46559 13.3444 4.79901L13.3399 4.79679C11.9356 2.72468 9.16792 2.08582 7.00026 3.3402M19.0705 4.92901C22.9758 8.83436 22.9758 15.1651 19.0705 19.0705C15.1651 22.9758 8.83436 22.9758 4.92901 19.0705C1.02366 15.1651 1.02366 8.83436 4.92901 4.92901C8.83436 1.02366 15.1651 1.02366 19.0705 4.92901Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">`,queued:C`<path fill-rule="evenodd" clip-rule="evenodd" d="M22.2031 14.5068C22.478 14.5254 22.7488 14.3647 22.8009 14.0941C22.9315 13.4162 23 12.7161 23 12C23 5.92487 18.0751 1 12 1C5.92493 1 1 5.92487 1 12C1 18.0751 5.92493 23 12 23C12.3811 23 12.7577 22.9806 13.1288 22.9428C13.5283 22.902 13.6796 22.4222 13.3955 22.1382L13.3787 22.1213C12.2072 20.9498 12.2072 19.0502 13.3787 17.8787C14.395 16.8623 15.9592 16.7277 17.1208 17.4748C17.3439 17.6182 17.6432 17.6141 17.8308 17.4266L19.8787 15.3787C20.5161 14.7412 21.3691 14.4506 22.2031 14.5068ZM12 5C12.5522 5 13 5.44769 13 6V11.0729C13 11.2623 13.1071 11.4355 13.2764 11.5201L16.4473 13.1056C16.9412 13.3525 17.1414 13.9532 16.8944 14.4472C16.6475 14.9412 16.0468 15.1414 15.5527 14.8944L11.5527 12.8944C11.214 12.725 11 12.3788 11 12V6C11 5.44769 11.4478 5 12 5Z" fill="currentColor"><path d="M22.7072 18.2071C23.0977 17.8166 23.0977 17.1834 22.7072 16.7929C22.3165 16.4023 21.6835 16.4023 21.2928 16.7929L17.5 20.5858L16.2072 19.2929C15.8165 18.9023 15.1835 18.9023 14.7928 19.2929C14.4023 19.6834 14.4023 20.3166 14.7928 20.7071L16.7928 22.7071C17.1835 23.0977 17.8165 23.0977 18.2072 22.7071L22.7072 18.2071Z" fill="currentColor">`,scheduled:C`<path fill-rule="evenodd" clip-rule="evenodd" d="M9 2C9 1.44772 8.55228 1 8 1C7.44772 1 7 1.44772 7 2V3H6C3.79086 3 2 4.79086 2 7V19C2 21.2091 3.79086 23 6 23H18C20.2091 23 22 21.2091 22 19V7C22 4.79086 20.2091 3 18 3H17V2C17 1.44772 16.5523 1 16 1C15.4477 1 15 1.44772 15 2V3H9V2ZM7 5V6C7 6.55228 7.44772 7 8 7C8.55228 7 9 6.55228 9 6V5H15V6C15 6.55228 15.4477 7 16 7C16.5523 7 17 6.55228 17 6V5H18C19.1046 5 20 5.89543 20 7V9H4V7C4 5.89543 4.89543 5 6 5H7ZM16.2072 14.2071C16.5977 13.8166 16.5977 13.1834 16.2072 12.7929C15.8165 12.4023 15.1835 12.4023 14.7928 12.7929L11 16.5858L9.70715 15.2929C9.31653 14.9023 8.68347 14.9023 8.29285 15.2929C7.90234 15.6834 7.90234 16.3166 8.29285 16.7071L10.2928 18.7071C10.6835 19.0977 11.3165 19.0977 11.7072 18.7071L16.2072 14.2071Z" fill="currentColor">`,success:C`<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM16.7071 9.70711C17.0976 9.31658 17.0976 8.68342 16.7071 8.29289C16.3166 7.90237 15.6834 7.90237 15.2929 8.29289L10 13.5858L7.70711 11.2929C7.31658 10.9024 6.68342 10.9024 6.29289 11.2929C5.90237 11.6834 5.90237 12.3166 6.29289 12.7071L9.29289 15.7071C9.68342 16.0976 10.3166 16.0976 10.7071 15.7071L16.7071 9.70711Z" fill="currentColor">`,"warning-critical":C`<path fill-rule="evenodd" clip-rule="evenodd" d="M13 1.26793C12.3812 0.91069 11.6188 0.91069 11 1.26793L3 5.88676C2.3812 6.244 2 6.90428 2 7.61882V16.8564C2 17.5709 2.3812 18.2312 3 18.5884L11 23.2073C11.6188 23.5645 12.3812 23.5645 13 23.2073L21 18.5884C21.6188 18.2312 22 17.5709 22 16.8564V7.61882C22 6.90428 21.6188 6.244 21 5.88676L13 1.26793ZM12 7.6906C12.5523 7.6906 13 8.13829 13 8.6906V12.6906C13 13.2429 12.5523 13.6906 12 13.6906C11.4477 13.6906 11 13.2429 11 12.6906V8.6906C11 8.13829 11.4477 7.6906 12 7.6906ZM13 16.6906C13 17.2429 12.5523 17.6906 12 17.6906C11.4477 17.6906 11 17.2429 11 16.6906C11 16.1383 11.4477 15.6906 12 15.6906C12.5523 15.6906 13 16.1383 13 16.6906Z" fill="currentColor">`,"warning-high":C`<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2H5ZM13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12V8ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" fill="currentColor">`,"warning-informational":C`<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12V8ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" fill="currentColor">`,"warning-low":C`<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12V8ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" fill="currentColor">`,"warning-medium":C`<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8363 3.01444C13.0678 1.66185 11.1186 1.66185 10.3501 3.01444L1.26467 19.0047C0.505278 20.3412 1.47061 22 3.00781 22H21.1786C22.7158 22 23.6811 20.3412 22.9217 19.0047L13.8363 3.01444ZM12 9C12.5523 9 13 9.44772 13 10V14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14V10C11 9.44772 11.4477 9 12 9ZM13 18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18C11 17.4477 11.4477 17 12 17C12.5523 17 13 17.4477 13 18Z" fill="currentColor">`,"warning-zero":C`<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z" fill="currentColor">`};
+var __decorate=this&&this.__decorate||function(e,r,C,t){var i,l=arguments.length,o=l<3?r:null===t?t=Object.getOwnPropertyDescriptor(r,C):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,r,C,t);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(o=(l<3?i(o):l>3?i(r,C,o):i(r,C))||o);return l>3&&o&&Object.defineProperty(r,C,o),o};import{LitElement,html,svg}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./status-indicator.styles.js";let GlideCoreStatusIndicator=class GlideCoreStatusIndicator extends LitElement{constructor(){super(...arguments),this.variant="idle"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}render(){return html`<svg aria-hidden="true" class="${classMap({component:!0,failed:"failed"===this.variant,idle:"idle"===this.variant,"in-progress":"in-progress"===this.variant,queued:"queued"===this.variant,scheduled:"scheduled"===this.variant,success:"success"===this.variant,"warning-critical":"warning-critical"===this.variant,"warning-high":"warning-high"===this.variant,"warning-informational":"warning-informational"===this.variant,"warning-low":"warning-low"===this.variant,"warning-medium":"warning-medium"===this.variant,"warning-zero":"warning-zero"===this.variant})}" fill="none" height="16" width="16" viewBox="0 0 24 24">${ICONS[this.variant]}</svg>`}};__decorate([property({reflect:!0})],GlideCoreStatusIndicator.prototype,"variant",void 0),GlideCoreStatusIndicator=__decorate([customElement("glide-core-status-indicator")],GlideCoreStatusIndicator);export default GlideCoreStatusIndicator;const ICONS={failed:svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.5858 12L8.29289 14.2929C7.90237 14.6834 7.90237 15.3166 8.29289 15.7071C8.68342 16.0976 9.31658 16.0976 9.70711 15.7071L12 13.4142L14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L13.4142 12L15.7071 9.70711C16.0976 9.31658 16.0976 8.68342 15.7071 8.29289C15.3166 7.90237 14.6834 7.90237 14.2929 8.29289L12 10.5858L9.70711 8.29289Z" fill="currentColor">`,idle:svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM10.5 9C10.5 8.44772 10.0523 8 9.5 8C8.94772 8 8.5 8.44772 8.5 9V15C8.5 15.5523 8.94772 16 9.5 16C10.0523 16 10.5 15.5523 10.5 15V9ZM15.5 9C15.5 8.44772 15.0523 8 14.5 8C13.9477 8 13.5 8.44772 13.5 9V15C13.5 15.5523 13.9477 16 14.5 16C15.0523 16 15.5 15.5523 15.5 15V9Z" fill="currentColor">`,"in-progress":svg`<path d="M3.34025 16.9997C2.0881 14.8298 2.72473 12.0644 4.79795 10.6601L4.80018 10.6578C6.46564 9.53235 8.65775 9.57012 10.2843 10.7523L13.7164 13.2477C15.3418 14.4299 17.5339 14.4676 19.2005 13.3421L19.2027 13.3399C21.2771 11.9356 21.9148 9.16792 20.6604 7.00026M17.002 20.6593C14.8321 21.9114 12.0667 21.2748 10.6623 19.2016L10.6601 19.1994C9.53457 17.5339 9.57234 15.3418 10.7545 13.7152L13.2499 10.2832C14.4321 8.6577 14.4699 6.46559 13.3444 4.79901L13.3399 4.79679C11.9356 2.72468 9.16792 2.08582 7.00026 3.3402M19.0705 4.92901C22.9758 8.83436 22.9758 15.1651 19.0705 19.0705C15.1651 22.9758 8.83436 22.9758 4.92901 19.0705C1.02366 15.1651 1.02366 8.83436 4.92901 4.92901C8.83436 1.02366 15.1651 1.02366 19.0705 4.92901Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">`,queued:svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M22.2031 14.5068C22.478 14.5254 22.7488 14.3647 22.8009 14.0941C22.9315 13.4162 23 12.7161 23 12C23 5.92487 18.0751 1 12 1C5.92493 1 1 5.92487 1 12C1 18.0751 5.92493 23 12 23C12.3811 23 12.7577 22.9806 13.1288 22.9428C13.5283 22.902 13.6796 22.4222 13.3955 22.1382L13.3787 22.1213C12.2072 20.9498 12.2072 19.0502 13.3787 17.8787C14.395 16.8623 15.9592 16.7277 17.1208 17.4748C17.3439 17.6182 17.6432 17.6141 17.8308 17.4266L19.8787 15.3787C20.5161 14.7412 21.3691 14.4506 22.2031 14.5068ZM12 5C12.5522 5 13 5.44769 13 6V11.0729C13 11.2623 13.1071 11.4355 13.2764 11.5201L16.4473 13.1056C16.9412 13.3525 17.1414 13.9532 16.8944 14.4472C16.6475 14.9412 16.0468 15.1414 15.5527 14.8944L11.5527 12.8944C11.214 12.725 11 12.3788 11 12V6C11 5.44769 11.4478 5 12 5Z" fill="currentColor"><path d="M22.7072 18.2071C23.0977 17.8166 23.0977 17.1834 22.7072 16.7929C22.3165 16.4023 21.6835 16.4023 21.2928 16.7929L17.5 20.5858L16.2072 19.2929C15.8165 18.9023 15.1835 18.9023 14.7928 19.2929C14.4023 19.6834 14.4023 20.3166 14.7928 20.7071L16.7928 22.7071C17.1835 23.0977 17.8165 23.0977 18.2072 22.7071L22.7072 18.2071Z" fill="currentColor">`,scheduled:svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M9 2C9 1.44772 8.55228 1 8 1C7.44772 1 7 1.44772 7 2V3H6C3.79086 3 2 4.79086 2 7V19C2 21.2091 3.79086 23 6 23H18C20.2091 23 22 21.2091 22 19V7C22 4.79086 20.2091 3 18 3H17V2C17 1.44772 16.5523 1 16 1C15.4477 1 15 1.44772 15 2V3H9V2ZM7 5V6C7 6.55228 7.44772 7 8 7C8.55228 7 9 6.55228 9 6V5H15V6C15 6.55228 15.4477 7 16 7C16.5523 7 17 6.55228 17 6V5H18C19.1046 5 20 5.89543 20 7V9H4V7C4 5.89543 4.89543 5 6 5H7ZM16.2072 14.2071C16.5977 13.8166 16.5977 13.1834 16.2072 12.7929C15.8165 12.4023 15.1835 12.4023 14.7928 12.7929L11 16.5858L9.70715 15.2929C9.31653 14.9023 8.68347 14.9023 8.29285 15.2929C7.90234 15.6834 7.90234 16.3166 8.29285 16.7071L10.2928 18.7071C10.6835 19.0977 11.3165 19.0977 11.7072 18.7071L16.2072 14.2071Z" fill="currentColor">`,success:svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM16.7071 9.70711C17.0976 9.31658 17.0976 8.68342 16.7071 8.29289C16.3166 7.90237 15.6834 7.90237 15.2929 8.29289L10 13.5858L7.70711 11.2929C7.31658 10.9024 6.68342 10.9024 6.29289 11.2929C5.90237 11.6834 5.90237 12.3166 6.29289 12.7071L9.29289 15.7071C9.68342 16.0976 10.3166 16.0976 10.7071 15.7071L16.7071 9.70711Z" fill="currentColor">`,"warning-critical":svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M13 1.26793C12.3812 0.91069 11.6188 0.91069 11 1.26793L3 5.88676C2.3812 6.244 2 6.90428 2 7.61882V16.8564C2 17.5709 2.3812 18.2312 3 18.5884L11 23.2073C11.6188 23.5645 12.3812 23.5645 13 23.2073L21 18.5884C21.6188 18.2312 22 17.5709 22 16.8564V7.61882C22 6.90428 21.6188 6.244 21 5.88676L13 1.26793ZM12 7.6906C12.5523 7.6906 13 8.13829 13 8.6906V12.6906C13 13.2429 12.5523 13.6906 12 13.6906C11.4477 13.6906 11 13.2429 11 12.6906V8.6906C11 8.13829 11.4477 7.6906 12 7.6906ZM13 16.6906C13 17.2429 12.5523 17.6906 12 17.6906C11.4477 17.6906 11 17.2429 11 16.6906C11 16.1383 11.4477 15.6906 12 15.6906C12.5523 15.6906 13 16.1383 13 16.6906Z" fill="currentColor">`,"warning-high":svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V5C22 3.34315 20.6569 2 19 2H5ZM13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12V8ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" fill="currentColor">`,"warning-informational":svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12V8ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" fill="currentColor">`,"warning-low":svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12V8ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" fill="currentColor">`,"warning-medium":svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8363 3.01444C13.0678 1.66185 11.1186 1.66185 10.3501 3.01444L1.26467 19.0047C0.505278 20.3412 1.47061 22 3.00781 22H21.1786C22.7158 22 23.6811 20.3412 22.9217 19.0047L13.8363 3.01444ZM12 9C12.5523 9 13 9.44772 13 10V14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14V10C11 9.44772 11.4477 9 12 9ZM13 18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18C11 17.4477 11.4477 17 12 17C12.5523 17 13 17.4477 13 18Z" fill="currentColor">`,"warning-zero":svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z" fill="currentColor">`};

package/dist/status-indicator.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as r}from"lit";export default[r`
+import{css}from"lit";export default[css`
     :host {
       display: contents;
     }
@@ -55,4 +55,4 @@
     .warning-zero {
       color: var(--glide-core-status-success);
     }
-  `];
+  `];

package/dist/status-indicator.test.basics.js

@@ -0,0 +1,102 @@
+import './status-indicator.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreStatusIndicator from './status-indicator.js';
+GlideCoreStatusIndicator.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-status-indicator')).to.equal(GlideCoreStatusIndicator);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-status-indicator></glide-core-status-indicator>`);
+    await expect(component).to.be.accessible();
+});
+it('renders a failed variant', async () => {
+    const component = await fixture(html `<glide-core-status-indicator
+      variant="failed"
+    ></glide-core-status-indicator>`);
+    expect(component.getAttribute('variant')).to.equal('failed');
+    expect(component.variant).to.equal('failed');
+});
+it('renders an idle variant', async () => {
+    const component = await fixture(html `<glide-core-status-indicator
+      variant="idle"
+    ></glide-core-status-indicator>`);
+    expect(component.getAttribute('variant')).to.equal('idle');
+    expect(component.variant).to.equal('idle');
+});
+it('renders an in-progress variant', async () => {
+    const component = await fixture(html `<glide-core-status-indicator
+      variant="in-progress"
+    ></glide-core-status-indicator>`);
+    expect(component.getAttribute('variant')).to.equal('in-progress');
+    expect(component.variant).to.equal('in-progress');
+});
+it('renders an queued variant', async () => {
+    const component = await fixture(html `<glide-core-status-indicator
+      variant="queued"
+    ></glide-core-status-indicator>`);
+    expect(component.getAttribute('variant')).to.equal('queued');
+    expect(component.variant).to.equal('queued');
+});
+it('renders an scheduled variant', async () => {
+    const component = await fixture(html `<glide-core-status-indicator
+      variant="scheduled"
+    ></glide-core-status-indicator>`);
+    expect(component.getAttribute('variant')).to.equal('scheduled');
+    expect(component.variant).to.equal('scheduled');
+});
+it('renders an success variant', async () => {
+    const component = await fixture(html `<glide-core-status-indicator
+      variant="success"
+    ></glide-core-status-indicator>`);
+    expect(component.getAttribute('variant')).to.equal('success');
+    expect(component.variant).to.equal('success');
+});
+it('renders an warning-critical variant', async () => {
+    const component = await fixture(html `<glide-core-status-indicator
+      variant="warning-critical"
+    ></glide-core-status-indicator>`);
+    expect(component.getAttribute('variant')).to.equal('warning-critical');
+    expect(component.variant).to.equal('warning-critical');
+});
+it('renders an warning-high variant', async () => {
+    const component = await fixture(html `<glide-core-status-indicator
+      variant="warning-high"
+    ></glide-core-status-indicator>`);
+    expect(component.getAttribute('variant')).to.equal('warning-high');
+    expect(component.variant).to.equal('warning-high');
+});
+it('renders an warning-informational variant', async () => {
+    const component = await fixture(html `<glide-core-status-indicator
+      variant="warning-informational"
+    ></glide-core-status-indicator>`);
+    expect(component.getAttribute('variant')).to.equal('warning-informational');
+    expect(component.variant).to.equal('warning-informational');
+});
+it('renders an warning-low variant', async () => {
+    const component = await fixture(html `<glide-core-status-indicator
+      variant="warning-low"
+    ></glide-core-status-indicator>`);
+    expect(component.getAttribute('variant')).to.equal('warning-low');
+    expect(component.variant).to.equal('warning-low');
+});
+it('renders an warning-medium variant', async () => {
+    const component = await fixture(html `<glide-core-status-indicator
+      variant="warning-medium"
+    ></glide-core-status-indicator>`);
+    expect(component.getAttribute('variant')).to.equal('warning-medium');
+    expect(component.variant).to.equal('warning-medium');
+});
+it('renders an warning-zero variant', async () => {
+    const component = await fixture(html `<glide-core-status-indicator
+      variant="warning-zero"
+    ></glide-core-status-indicator>`);
+    expect(component.getAttribute('variant')).to.equal('warning-zero');
+    expect(component.variant).to.equal('warning-zero');
+});
+it('sets the size of the element based on the "--size" CSS variable', async () => {
+    const component = await fixture(html `<glide-core-status-indicator
+      style="--size: 750px"
+    ></glide-core-status-indicator>`);
+    expect(component.shadowRoot?.querySelector('svg')?.clientHeight).to.equal(750);
+    expect(component.shadowRoot?.querySelector('svg')?.clientWidth).to.equal(750);
+});

package/dist/styles/focus-outline.js

@@ -1,4 +1 @@
-"use strict";import{unsafeCSS as o}from"lit";export default o(`
-  outline: 3px auto Highlight; /* Firefox */
-  outline: 3px auto -webkit-focus-ring-color; /* Chrome and Safari */
-`);
+import{unsafeCSS}from"lit";export default unsafeCSS("\n  outline: 2px solid var(--glide-core-border-focus);\n  outline-offset: 1px;\n");

package/dist/styles/variables.css

@@ -1 +1 @@
-:root,:host{color-scheme:normal;--glide-core-border-radius-md: .5rem;--glide-core-border-radius-none: 0rem;--glide-core-border-radius-round: 3.125rem;--glide-core-border-radius-sm: .25rem;--glide-core-border-radius-xs: .125rem;--glide-core-border-width-lg: .25rem;--glide-core-border-width-md: .125rem;--glide-core-border-width-none: 0rem;--glide-core-border-width-sm: .0625rem;--glide-core-spacing-lg: 1.5rem;--glide-core-spacing-md: 1rem;--glide-core-spacing-sm: .75rem;--glide-core-spacing-xl: 2rem;--glide-core-spacing-xs: .5rem;--glide-core-spacing-xxl: 3rem;--glide-core-spacing-xxs: .25rem;--glide-core-spacing-xxxl: 4rem;--glide-core-spacing-xxxs: .125rem;--glide-core-spacing-zero: 0rem}:root,:host,.theme-light{color-scheme:light;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #d7e7ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #c9c9c9;--glide-core-border-base-dark: #6d6d6d;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #e3e3e3;--glide-core-border-base-lighter: #f0f0f0;--glide-core-border-base-lightest: #ffffff;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #054fb9;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #212121;--glide-core-icon-default2: #212121;--glide-core-icon-display: #212121;--glide-core-icon-hover: #8babf1;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #0461cf;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #ffffff;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #db2d24;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #f0f0f0;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #00000066;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-light: #ffffff8c;--glide-core-surface-base-lighter: #ffffffbf;--glide-core-surface-base-lightest: #ffffffcc;--glide-core-surface-base-xlightest: #ffffffe5;--glide-core-surface-disabled: #f0f0f0;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #d7e7ff;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #ffffff;--glide-core-surface-page: #ffffff;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #1d7afc26;--glide-core-surface-secondary: #eef5ff;--glide-core-surface-secondary-disabled: #eef5ff;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #212121;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #424242;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #424242;--glide-core-text-header-2: #6d6d6d;--glide-core-text-link: #0461cf;--glide-core-text-link-2: #0461cf;--glide-core-text-primary: #054fb9;--glide-core-text-primary-hover: #0461cf;--glide-core-text-secondary: #0073e6;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #ffffff;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #151515;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #212121;--glide-core-text-tertiary-disabled: #8a8a8a}:host,.theme-dark{color-scheme:dark;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #eef5ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #6d6d6d;--glide-core-border-base-dark: #c9c9c9;--glide-core-border-base-darker: #e3e3e3;--glide-core-border-base-light: #424242;--glide-core-border-base-lighter: #212121;--glide-core-border-base-lightest: #424242;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #ffffff;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #d7e7ff;--glide-core-icon-default: #ffffff;--glide-core-icon-default2: #212121;--glide-core-icon-display: #ffffff;--glide-core-icon-hover: #eef5ff;--glide-core-icon-primary: #ffffff;--glide-core-icon-primary-hover: #d7e7ff;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #424242;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #ff3b30;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #424242;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #ffffff8c;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-light: #0000008c;--glide-core-surface-base-lighter: #000000bf;--glide-core-surface-base-lightest: #000000cc;--glide-core-surface-base-xlightest: #000000e5;--glide-core-surface-disabled: #e3e3e3;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #0461cf;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #151515;--glide-core-surface-page: #212121;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #6d6d6d;--glide-core-surface-secondary: #f0f0f0;--glide-core-surface-secondary-disabled: #f0f0f0;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #c9c9c9;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #ffffff;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #00000012;--glide-core-text-body-1: #ffffff;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #ffffff;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #ffffff;--glide-core-text-header-2: #d7e7ff;--glide-core-text-link: #8babf1;--glide-core-text-link-2: #d0e8f2;--glide-core-text-primary: #ffffff;--glide-core-text-primary-hover: #d7e7ff;--glide-core-text-secondary: #8babf1;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #424242;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #ffffff;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #ffffff;--glide-core-text-tertiary-disabled: #8a8a8a}:root{--glide-core-body-md-font-family: var(--glide-core-font-sans);--glide-core-body-md-font-size: 1rem;--glide-core-body-md-font-style: normal;--glide-core-body-md-font-weight: 400;--glide-core-body-md-line-height: normal;--glide-core-body-sm-font-family: var(--glide-core-font-sans);--glide-core-body-sm-font-size: .875rem;--glide-core-body-sm-font-variant: normal;--glide-core-body-sm-font-weight: 400;--glide-core-body-sm-line-height: 1.3;--glide-core-body-xs-font-family: var(--glide-core-font-sans);--glide-core-body-xs-font-size: .75rem;--glide-core-body-xs-font-variant: normal;--glide-core-body-xs-font-weight: 400;--glide-core-body-xs-line-height: 1.3;--glide-core-color-dark-blue: #054fb9;--glide-core-color-white: #ffffff;--glide-core-font-sans: "Nunito";--glide-core-font-weight-bold: 700;--glide-core-font-weight-semi-bold: 600;--glide-core-glow-sm: 0px 0px 2px 0px #2c97eee5;--glide-core-heading-xs-font-size: 1.25rem;--glide-core-heading-xs-font-weight: var(--glide-core-font-weight-semi-bold);--glide-core-heading-xxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxs-font-size: 1rem;--glide-core-heading-xxs-font-style: normal;--glide-core-heading-xxs-font-variant: normal;--glide-core-heading-xxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxxs-font-size: .875rem;--glide-core-heading-xxxs-font-style: normal;--glide-core-heading-xxxs-font-variant: normal;--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-line-height: 1.7;--glide-core-shadow-lg: 0px 4px 14px 0px #00000040;--glide-core-shadow-sm: 0px 2.275px 8.342px 0px rgba(181, 181, 181, .25);--glide-core-shadow-xl: 0px 4px 60px 0px #adadad}
+:root,:host{color-scheme:normal;--glide-core-border-radius-md: .5rem;--glide-core-border-radius-none: 0rem;--glide-core-border-radius-round: 3.125rem;--glide-core-border-radius-sm: .25rem;--glide-core-border-radius-xs: .125rem;--glide-core-border-width-lg: .25rem;--glide-core-border-width-md: .125rem;--glide-core-border-width-none: 0rem;--glide-core-border-width-sm: .0625rem;--glide-core-spacing-lg: 1.5rem;--glide-core-spacing-md: 1rem;--glide-core-spacing-sm: .75rem;--glide-core-spacing-xl: 2rem;--glide-core-spacing-xs: .5rem;--glide-core-spacing-xxl: 3rem;--glide-core-spacing-xxs: .25rem;--glide-core-spacing-xxxl: 4rem;--glide-core-spacing-xxxs: .125rem;--glide-core-spacing-zero: 0rem}:root,:host,.theme-light{color-scheme:light;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #d7e7ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #c9c9c9;--glide-core-border-base-dark: #6d6d6d;--glide-core-border-base-darker: #424242;--glide-core-border-base-light: #e3e3e3;--glide-core-border-base-lighter: #f0f0f0;--glide-core-border-base-lightest: #ffffff;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #054fb9;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #212121;--glide-core-icon-default2: #212121;--glide-core-icon-display: #212121;--glide-core-icon-display-light: #6d6d6d;--glide-core-icon-hover: #8babf1;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #0461cf;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #ffffff;--glide-core-icon-tertiary-disabled: #8a8a8a;--glide-core-status-error: #db2d24;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #f0f0f0;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #00000066;--glide-core-surface-base-gray-light: #00000012;--glide-core-surface-base-light: #ffffff8c;--glide-core-surface-base-lighter: #ffffffbf;--glide-core-surface-base-lightest: #ffffffcc;--glide-core-surface-base-xlightest: #ffffffe5;--glide-core-surface-disabled: #f0f0f0;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #d7e7ff;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #ffffff;--glide-core-surface-page: #ffffff;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #1d7afc26;--glide-core-surface-secondary: #eef5ff;--glide-core-surface-secondary-disabled: #eef5ff;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #8a8a8a;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #e3e3e3;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff03;--glide-core-text-body-1: #212121;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #424242;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #424242;--glide-core-text-header-2: #6d6d6d;--glide-core-text-link: #0461cf;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #0461cf;--glide-core-text-placeholder: #6d6d6d;--glide-core-text-primary: #054fb9;--glide-core-text-primary-hover: #0461cf;--glide-core-text-secondary: #0073e6;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #ffffff;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #151515;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #212121;--glide-core-text-tertiary-disabled: #8a8a8a}:host,.theme-dark{color-scheme:dark;--glide-core-border-action: #0073e6;--glide-core-border-action-disabled: #eef5ff;--glide-core-border-action-hover: #eef5ff;--glide-core-border-base: #6d6d6d;--glide-core-border-base-dark: #c9c9c9;--glide-core-border-base-darker: #e3e3e3;--glide-core-border-base-light: #212121;--glide-core-border-base-lighter: #212121;--glide-core-border-base-lightest: #424242;--glide-core-border-disabled: #8a8a8a;--glide-core-border-focus: #0073e6;--glide-core-border-focus-light: #eef5ff;--glide-core-border-primary: #ffffff;--glide-core-border-primary-hover: #0461cf;--glide-core-icon-active: #0073e6;--glide-core-icon-default: #ffffff;--glide-core-icon-default2: #212121;--glide-core-icon-display: #ffffff;--glide-core-icon-display-light: #f0f0f0;--glide-core-icon-hover: #eef5ff;--glide-core-icon-primary: #054fb9;--glide-core-icon-primary-hover: #d7e7ff;--glide-core-icon-secondary-disabled: #d7e7ff;--glide-core-icon-selected: #ffffff;--glide-core-icon-selected-disabled: #eef5ff;--glide-core-icon-selected2: #424242;--glide-core-icon-tertiary-disabled: #6d6d6d;--glide-core-status-error: #ff3b30;--glide-core-status-expired: #ff3b30;--glide-core-status-failed: #ff3b30;--glide-core-status-in-progress: #ffcc00;--glide-core-status-queued: #5ac8fa;--glide-core-status-scheduled: #af52de;--glide-core-status-success: #34c759;--glide-core-status-unknown: #6d6d6d;--glide-core-status-warning-critical: #ff3b30;--glide-core-status-warning-high: #ff9500;--glide-core-status-warning-informational: #0073e6;--glide-core-status-warning-low: #607d8b;--glide-core-status-warning-medium: #ffcc00;--glide-core-surface-active: #ffffff;--glide-core-surface-attention: #fffbeb;--glide-core-surface-base: #424242;--glide-core-surface-base-dark: #212121;--glide-core-surface-base-gray: #0000001a;--glide-core-surface-base-gray-dark: #ffffff8c;--glide-core-surface-base-gray-light: #00000066;--glide-core-surface-base-light: #0000008c;--glide-core-surface-base-lighter: #000000bf;--glide-core-surface-base-lightest: #000000cc;--glide-core-surface-base-xlightest: #000000e5;--glide-core-surface-disabled: #424242;--glide-core-surface-dot-step: #8babf1;--glide-core-surface-error: #fff0ef;--glide-core-surface-focus: #0073e6;--glide-core-surface-hover: #0461cf;--glide-core-surface-informational: #eef5ff;--glide-core-surface-modal: #151515;--glide-core-surface-page: #212121;--glide-core-surface-primary: #0073e6;--glide-core-surface-primary-disabled: #6d6d6d;--glide-core-surface-secondary: #f0f0f0;--glide-core-surface-secondary-disabled: #f0f0f0;--glide-core-surface-selected: #0073e6;--glide-core-surface-selected-disabled: #c9c9c9;--glide-core-surface-selected-hover: #054fb9;--glide-core-surface-success: #f1fdf4;--glide-core-surface-unselected-disabled: #ffffff;--glide-core-surface-warning: #fff6e9;--glide-core-surface-white-1percent: #ffffff;--glide-core-text-body-1: #ffffff;--glide-core-text-body-2: #212121;--glide-core-text-body-light: #ffffff;--glide-core-text-body-lighter: #c9c9c9;--glide-core-text-disabled: #f0f0f0;--glide-core-text-header-1: #ffffff;--glide-core-text-header-2: #d7e7ff;--glide-core-text-link: #8babf1;--glide-core-text-link-dark-surface: #8babf1;--glide-core-text-link-table: #d0e8f2;--glide-core-text-placeholder: #d7e7ff;--glide-core-text-primary: #ffffff;--glide-core-text-primary-hover: #d7e7ff;--glide-core-text-secondary: #8babf1;--glide-core-text-secondary-disabled: #d7e7ff;--glide-core-text-selected: #ffffff;--glide-core-text-selected-2: #424242;--glide-core-text-syntax-blue: #0000ff;--glide-core-text-syntax-dark: #ffffff;--glide-core-text-syntax-green: #116644;--glide-core-text-syntax-purple: #770088;--glide-core-text-syntax-red-dark: #95150e;--glide-core-text-syntax-red-light: #ee4400;--glide-core-text-tertiary: #ffffff;--glide-core-text-tertiary-disabled: #6d6d6d}:root{--glide-core-body-md-font-family: var(--glide-core-font-sans);--glide-core-body-md-font-size: 1rem;--glide-core-body-md-font-style: normal;--glide-core-body-md-font-weight: 400;--glide-core-body-md-line-height: normal;--glide-core-body-sm-font-family: var(--glide-core-font-sans);--glide-core-body-sm-font-size: .875rem;--glide-core-body-sm-font-variant: normal;--glide-core-body-sm-font-weight: 400;--glide-core-body-sm-line-height: 1.3;--glide-core-body-xs-font-family: var(--glide-core-font-sans);--glide-core-body-xs-font-size: .75rem;--glide-core-body-xs-font-variant: normal;--glide-core-body-xs-font-weight: 400;--glide-core-body-xs-line-height: 1.3;--glide-core-color-dark-blue: #054fb9;--glide-core-color-white: #ffffff;--glide-core-font-sans: "Nunito";--glide-core-font-weight-bold: 700;--glide-core-font-weight-semi-bold: 600;--glide-core-glow-sm: 0px 0px 2px 0px #2c97eee5;--glide-core-heading-xs-font-size: 1.25rem;--glide-core-heading-xs-font-weight: var(--glide-core-font-weight-semi-bold);--glide-core-heading-xxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxs-font-size: 1rem;--glide-core-heading-xxs-font-style: normal;--glide-core-heading-xxs-font-variant: normal;--glide-core-heading-xxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-font-family: var(--glide-core-font-sans);--glide-core-heading-xxxs-font-size: .875rem;--glide-core-heading-xxxs-font-style: normal;--glide-core-heading-xxxs-font-variant: normal;--glide-core-heading-xxxs-font-weight: var(--glide-core-font-weight-bold);--glide-core-heading-xxxs-line-height: 1.7;--glide-core-shadow-lg: 0px 4px 14px 0px #00000040;--glide-core-shadow-sm: 0px 2.275px 8.342px 0px rgba(181, 181, 181, .25);--glide-core-shadow-xl: 0px 4px 60px 0px #adadad}

package/dist/styles/visually-hidden.js

@@ -1,11 +1 @@
-"use strict";import{unsafeCSS as e}from"lit";export default e(`
-    border-width: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-`);
+import{unsafeCSS}from"lit";export default unsafeCSS("\n    border-width: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n");

package/dist/tab.group.js

@@ -1 +1 @@
-"use strict";var C=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var h=(i,a,t,s)=>{for(var e=s>1?void 0:s?O(a,t):a,m=i.length-1,r;m>=0;m--)(r=i[m])&&(e=(s?r(a,t,e):r(e))||e);return s&&e&&C(a,t,e),e};var S=(i,a,t)=>{if(!a.has(i))throw TypeError("Cannot "+t)};var n=(i,a,t)=>(S(i,a,"read from private field"),t?t.call(i):a.get(i)),l=(i,a,t)=>{if(a.has(i))throw TypeError("Cannot add the same private member more than once");a instanceof WeakSet?a.add(i):a.set(i,t)};var c=(i,a,t)=>(S(i,a,"access private method"),t);var d,b,u,w,A,N,T,P,f,y,v,k,g,L;import"./icon-button.js";import{LitElement as R,html as U}from"lit";import{classMap as $}from"lit/directives/class-map.js";import{createRef as H,ref as M}from"lit/directives/ref.js";import{customElement as K,property as q,queryAssignedElements as x,state as I}from"lit/decorators.js";import{owSlotType as E}from"./library/ow.js";import p from"./tab.js";import D from"./tab.panel.js";import j from"./tab.group.styles.js";let o=class extends R{constructor(){super(...arguments);l(this,A);l(this,T);l(this,f);l(this,v);l(this,g);this.variant="primary";l(this,d,H());l(this,b,H());l(this,u,t=>{const e=t.target.closest("glide-core-tab");e&&e instanceof p&&!e.disabled&&c(this,g,L).call(this,e)});l(this,w,t=>{const e=t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof p&&!e.disabled&&(c(this,g,L).call(this,e),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const m=this.tabElements.find(r=>r.matches(":focus"));if(m?.tagName.toLowerCase()==="glide-core-tab"){let r=this.tabElements.indexOf(m);switch(t.key){case"Home":{r=0;break}case"End":{r=this.tabElements.length-1;break}case(this.variant==="vertical"?"ArrowUp":"ArrowLeft"):{r--;break}case(this.variant==="vertical"?"ArrowDown":"ArrowRight"):{r++;break}}r<0&&(r=this.tabElements.length-1),r>this.tabElements.length-1&&(r=0),this.tabElements[r].focus({preventScroll:!0}),t.preventDefault()}}})}firstUpdated(){E(n(this,b).value,[p]),E(n(this,d).value,[D]),c(this,v,k).call(this),c(this,f,y).call(this)}render(){return U`<div class="${$({component:!0,vertical:this.variant==="vertical"})}" @click="${n(this,u)}" @keydown="${n(this,w)}"><div role="tablist" class="${$({"tab-group":!0,[this.variant]:!0})}"><slot name="nav" @slotchange="${c(this,T,P)}" ${M(n(this,b))}></slot></div><slot @slotchange="${c(this,A,N)}" ${M(n(this,d))}></slot></div>`}updated(){c(this,v,k).call(this)}};d=new WeakMap,b=new WeakMap,u=new WeakMap,w=new WeakMap,A=new WeakSet,N=function(){E(n(this,d).value,[D])},T=new WeakSet,P=function(){E(n(this,b).value,[p])},f=new WeakSet,y=function(){for(const[t,s]of this.tabElements.entries()){let e;!this.activeTab&&t===0?(this.activeTab=s,e=!0):e=this.activeTab===s,s.active=e}for(const t of this.panelElements){const s=this.activeTab?.getAttribute("panel"),e=t.getAttribute("name");t.isActive=e===s}},v=new WeakSet,k=function(){for(const t of this.tabElements){t.variant=this.variant;for(const s of this.panelElements)t.setAttribute("aria-controls",s.getAttribute("id")),s.setAttribute("aria-labelledby",t.getAttribute("id"))}},g=new WeakSet,L=function(t){this.activeTab=t,c(this,f,y).call(this),this.dispatchEvent(new CustomEvent("tab-show",{bubbles:!0,detail:{panel:t.panel}}))},o.shadowRootOptions={...R.shadowRootOptions,mode:"closed"},o.styles=j,h([q({reflect:!0})],o.prototype,"variant",2),h([I()],o.prototype,"activeTab",2),h([x()],o.prototype,"panelElements",2),h([x({slot:"nav"})],o.prototype,"tabElements",2),o=h([K("glide-core-tab-group")],o);export{o as default};
+var __decorate=this&&this.__decorate||function(e,t,o,a){var s,i=arguments.length,r=i<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,o):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,a);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(r=(i<3?s(r):i>3?s(t,o,r):s(t,o))||r);return i>3&&r&&Object.defineProperty(t,o,r),r};import"./icon-button.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,queryAssignedElements,state}from"lit/decorators.js";import{owSlotType}from"./library/ow.js";import GlideCoreTab from"./tab.js";import GlideCoreTabPanel from"./tab.panel.js";import styles from"./tab.group.styles.js";let GlideCoreTabGroup=class GlideCoreTabGroup extends LitElement{constructor(){super(...arguments),this.variant="primary",this.#e=createRef(),this.#t=createRef(),this.#o=e=>{const t=e.target.closest("glide-core-tab");t&&t instanceof GlideCoreTab&&!t.disabled&&this.#a(t)},this.#s=e=>{const t=e.target.closest("glide-core-tab");if(["Enter"," "].includes(e.key)&&t&&t instanceof GlideCoreTab&&!t.disabled&&(this.#a(t),e.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)){const t=this.tabElements.find((e=>e.matches(":focus")));if("glide-core-tab"===t?.tagName.toLowerCase()){let o=this.tabElements.indexOf(t);switch(e.key){case"Home":o=0;break;case"End":o=this.tabElements.length-1;break;case"vertical"===this.variant?"ArrowUp":"ArrowLeft":o--;break;case"vertical"===this.variant?"ArrowDown":"ArrowRight":o++}o<0&&(o=this.tabElements.length-1),o>this.tabElements.length-1&&(o=0),this.tabElements[o].focus({preventScroll:!0}),e.preventDefault()}}}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlotType(this.#t.value,[GlideCoreTab]),owSlotType(this.#e.value,[GlideCoreTabPanel]),this.#i(),this.#r()}render(){return html`<div class="${classMap({component:!0,vertical:"vertical"===this.variant})}" @click="${this.#o}" @keydown="${this.#s}"><div role="tablist" class="${classMap({"tab-group":!0,[this.variant]:!0})}"><slot name="nav" @slotchange="${this.#l}" ${ref(this.#t)}></slot></div><slot @slotchange="${this.#n}" ${ref(this.#e)}></slot></div>`}updated(){this.#i()}#e;#t;#o;#s;#n(){owSlotType(this.#e.value,[GlideCoreTabPanel])}#l(){owSlotType(this.#t.value,[GlideCoreTab])}#r(){for(const[e,t]of this.tabElements.entries()){let o;this.activeTab||0!==e?o=this.activeTab===t:(this.activeTab=t,o=!0),t.active=o}for(const e of this.panelElements){const t=this.activeTab?.getAttribute("panel"),o=e.getAttribute("name");e.isActive=o===t}}#i(){for(const e of this.tabElements){e.variant=this.variant;for(const t of this.panelElements)e.setAttribute("aria-controls",t.getAttribute("id")),t.setAttribute("aria-labelledby",e.getAttribute("id"))}}#a(e){this.activeTab=e,this.#r(),this.dispatchEvent(new CustomEvent("tab-show",{bubbles:!0,detail:{panel:e.panel}}))}};__decorate([property({reflect:!0})],GlideCoreTabGroup.prototype,"variant",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"activeTab",void 0),__decorate([queryAssignedElements()],GlideCoreTabGroup.prototype,"panelElements",void 0),__decorate([queryAssignedElements({slot:"nav"})],GlideCoreTabGroup.prototype,"tabElements",void 0),GlideCoreTabGroup=__decorate([customElement("glide-core-tab-group")],GlideCoreTabGroup);export default GlideCoreTabGroup;

package/dist/tab.group.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as r}from"lit";export default[r`
+import{css}from"lit";export default[css`
     .component {
       display: flex;
       flex-direction: column;
@@ -24,4 +24,4 @@
         flex-direction: column;
       }
     }
-  `];
+  `];

package/dist/tab.group.test.basics.js

@@ -0,0 +1,185 @@
+import './tab.group.js';
+import './tab.js';
+import './tab.panel.js';
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import GlideCoreTabGroup from './tab.group.js';
+import GlideCoreTabPanel from './tab.panel.js';
+import expectArgumentError from './library/expect-argument-error.js';
+GlideCoreTabGroup.shadowRootOptions.mode = 'open';
+GlideCoreTabPanel.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-tab-group')).to.equal(GlideCoreTabGroup);
+    expect(window.customElements.get('glide-core-tab-panel')).to.equal(GlideCoreTabPanel);
+});
+it('renders correct markup and sets correct attributes for the default case', async () => {
+    const tabGroup = await fixture(html `
+    <glide-core-tab-group>
+      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
+      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
+    </glide-core-tab-group>
+  `);
+    await expect(tabGroup).to.be.accessible();
+    const [firstTab] = tabGroup.tabElements;
+    expect(tabGroup.activeTab).to.equal(firstTab, 'activeTab defaults to first tab');
+    expect(tabGroup.variant).to.equal('primary');
+    expect([...tabGroup.shadowRoot.firstElementChild.classList]).to.deep.equal([
+        'component',
+    ]);
+    expect([
+        ...tabGroup.shadowRoot.querySelector('.tab-group').classList,
+    ]).to.deep.equal(['tab-group', 'primary']);
+    const slot = tabGroup.shadowRoot.querySelector('slot:not([name="nav"])');
+    expect(slot).to.exist;
+    expect(slot.assignedElements.length).to.equal(0);
+});
+it('renders a secondary variant', async () => {
+    const element = await fixture(html `
+    <glide-core-tab-group variant="secondary">
+      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
+      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
+    </glide-core-tab-group>
+  `);
+    expect([
+        ...element.shadowRoot.querySelector('.tab-group').classList,
+    ]).to.deep.equal(['tab-group', 'secondary']);
+});
+it('renders a vertical variant', async () => {
+    const element = await fixture(html `
+    <glide-core-tab-group variant="vertical">
+      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
+      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
+    </glide-core-tab-group>
+  `);
+    expect([
+        ...element.shadowRoot.querySelector('.tab-group').classList,
+    ]).to.deep.equal(['tab-group', 'vertical']);
+});
+it('can switch tabs', async () => {
+    const tabGroup = await fixture(html `
+    <glide-core-tab-group>
+      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
+      <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
+      <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
+      <glide-core-tab slot="nav" panel="4" disabled>Disabled</glide-core-tab>
+
+      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
+      <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
+      <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
+      <glide-core-tab-panel name="4">Content for Tab 4</glide-core-tab-panel>
+    </glide-core-tab-group>
+  `);
+    const listener = oneEvent(tabGroup, 'tab-show');
+    const [firstTab, secondTab, thirdTab, disabledTab] = tabGroup.tabElements;
+    const [firstPanel, secondPanel, thirdPanel] = tabGroup.panelElements;
+    expect(firstTab.active).to.equal(true, 'first tab defaults to active');
+    expect(secondTab.active).to.equal(false, 'other tabs default to not active');
+    expect(isPanelHidden(firstPanel)).to.equal(false, 'first panel is not hidden by default');
+    expect(isPanelHidden(secondPanel)).to.equal(true, 'nonactive panel is hidden by default');
+    secondTab.click();
+    const triggeredEvent = await listener;
+    await expect(firstTab.active).to.equal(false, 'after clicking a different tab, previous tab is no longer active');
+    expect(secondTab.active).to.equal(true, 'clicked tab becomes active');
+    expect(isPanelHidden(firstPanel)).to.equal(true, 'after clicking a different tab, previous panel is hidden');
+    expect(isPanelHidden(secondPanel)).to.equal(false, `clicked tab's panel is no longer hidden`);
+    expect(triggeredEvent.type).to.equal('tab-show', 'correct tab event fires');
+    expect(triggeredEvent.bubbles).to.be.true;
+    expect(triggeredEvent.detail.panel).to.equal('2', 'Can get the panel name from the tab click event');
+    secondTab.focus();
+    await sendKeys({ press: 'Tab' });
+    // Should be focused on third tab. Press Enter on it
+    await sendKeys({ press: 'Enter' });
+    const secondTriggeredEvent = await listener;
+    expect(secondTab.active).to.equal(false, 'after pressing Enter on a different tab, previous tab is no longer active');
+    expect(thirdTab.active).to.equal(true, 'new tab becomes active');
+    expect(isPanelHidden(secondPanel)).to.equal(true, 'after pressing Enter on a different tab, previous panel is hidden');
+    expect(isPanelHidden(thirdPanel)).to.equal(false, `new tab's panel is no longer hidden`);
+    expect(secondTriggeredEvent.type).to.equal('tab-show', 'correct tab event fires for keydown');
+    expect(secondTriggeredEvent.bubbles).to.be.true;
+    expect(secondTriggeredEvent.detail.panel).to.equal('2', 'Can get the panel name from the tab show event');
+    disabledTab.click();
+    expect(disabledTab.active).to.equal(false, 'clicking on a disabled tab does not make it active');
+});
+it('can use left/right, home and end keys to focus on tabs', async () => {
+    const tabGroup = await fixture(html `
+    <glide-core-tab-group>
+      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
+      <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
+      <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
+
+      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
+      <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
+      <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
+    </glide-core-tab-group>
+  `);
+    const [firstTab, secondTab, thirdTab] = tabGroup.tabElements;
+    firstTab.focus();
+    await sendKeys({ press: 'ArrowRight' });
+    await sendKeys({ press: 'Enter' });
+    expect(secondTab.active).to.equal(true, 'right works');
+    await sendKeys({ press: 'ArrowLeft' });
+    await sendKeys({ press: 'Enter' });
+    expect(firstTab.active).to.equal(true, 'left works');
+    await sendKeys({ press: 'ArrowLeft' });
+    await sendKeys({ press: 'Enter' });
+    expect(thirdTab.active).to.equal(true, 'left from first goes to last');
+    await sendKeys({ press: 'ArrowRight' });
+    await sendKeys({ press: 'Enter' });
+    expect(firstTab.active).to.equal(true, 'right from last goes to first');
+    await sendKeys({ press: 'Home' });
+    await sendKeys({ press: 'Enter' });
+    expect(firstTab.active).to.equal(true);
+    await sendKeys({ press: 'End' });
+    await sendKeys({ press: 'Enter' });
+    expect(thirdTab.active).to.equal(true);
+});
+it('can use up/down keys to focus on vertical tabs', async () => {
+    const tabGroup = await fixture(html `
+    <glide-core-tab-group variant="vertical">
+      <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
+      <glide-core-tab slot="nav" panel="2">Tab 2</glide-core-tab>
+      <glide-core-tab slot="nav" panel="3">Tab 3</glide-core-tab>
+
+      <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
+      <glide-core-tab-panel name="2">Content for Tab 2</glide-core-tab-panel>
+      <glide-core-tab-panel name="3">Content for Tab 3</glide-core-tab-panel>
+    </glide-core-tab-group>
+  `);
+    const [firstTab, secondTab, thirdTab] = tabGroup.tabElements;
+    firstTab.focus();
+    await sendKeys({ press: 'ArrowDown' });
+    await sendKeys({ press: 'Enter' });
+    expect(secondTab.active).to.equal(true, 'down works');
+    await sendKeys({ press: 'ArrowUp' });
+    await sendKeys({ press: 'Enter' });
+    expect(firstTab.active).to.equal(true, 'up works');
+    await sendKeys({ press: 'ArrowUp' });
+    await sendKeys({ press: 'Enter' });
+    expect(thirdTab.active).to.equal(true, 'up from first goes to last');
+    await sendKeys({ press: 'ArrowDown' });
+    await sendKeys({ press: 'Enter' });
+    expect(firstTab.active).to.equal(true, 'down from last goes to first');
+});
+it('throws an error when an element other than `glide-core-tab` is a child of the `nav` slot', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `
+      <glide-core-tab-group variant="vertical">
+        <div slot="nav">Tab 1</div>
+        <glide-core-tab-panel name="1">Content for Tab 1</glide-core-tab-panel>
+      </glide-core-tab-group>
+    `);
+    });
+});
+it('throws an error when an element other than `glide-core-tab-panel` is a child of the default slot', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `
+      <glide-core-tab-group variant="vertical">
+        <glide-core-tab slot="nav" panel="1">Tab 1</glide-core-tab>
+        <div>Default Content</div>
+      </glide-core-tab-group>
+    `);
+    });
+});
+function isPanelHidden(panel) {
+    return panel.shadowRoot?.firstElementChild?.classList.contains('hidden');
+}

package/dist/tab.js

@@ -1 +1 @@
-"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var i=(l,r,s,a)=>{for(var e=a>1?void 0:a?u(r,s):r,c=l.length-1,d;c>=0;c--)(d=l[c])&&(e=(a?d(r,s,e):d(e))||e);return a&&e&&p(r,s,e),e};import{LitElement as n,html as h}from"lit";import{classMap as m}from"lit/directives/class-map.js";import{customElement as v,property as o}from"lit/decorators.js";import f from"./tab.styles.js";let t=class extends n{constructor(){super(...arguments);this.panel="";this.active=!1;this.variant="primary";this.disabled=!1}firstUpdated(){this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id=`glide-core-tab-${t.instanceCount++}`)}render(){return h`<div class="${m({component:!0,primary:this.variant==="primary",secondary:this.variant==="secondary",vertical:this.variant==="vertical",active:this.active,disabled:this.disabled})}"><slot name="icon"></slot><div class="default-slot"><slot></slot></div></div>`}updated(s){s.has("active")&&this.setAttribute("aria-selected",this.active?"true":"false"),s.has("disabled")&&(this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1")):(this.removeAttribute("aria-disabled"),this.setAttribute("tabindex","0")))}};t.instanceCount=0,t.shadowRootOptions={...n.shadowRootOptions,mode:"closed"},t.styles=f,i([o({reflect:!0})],t.prototype,"panel",2),i([o({type:Boolean,reflect:!0})],t.prototype,"active",2),i([o({reflect:!0})],t.prototype,"variant",2),i([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),t=i([v("glide-core-tab")],t);export{t as default};
+var GlideCoreTab_1,__decorate=this&&this.__decorate||function(t,e,i,r){var a,s=arguments.length,o=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,r);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(o=(s<3?a(o):s>3?a(e,i,o):a(e,i))||o);return s>3&&o&&Object.defineProperty(e,i,o),o};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./tab.styles.js";let GlideCoreTab=class GlideCoreTab extends LitElement{constructor(){super(...arguments),this.panel="",this.active=!1,this.variant="primary",this.disabled=!1}static{GlideCoreTab_1=this}static{this.instanceCount=0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.setAttribute("role","tab"),this.hasAttribute("id")||(this.id="glide-core-tab-"+GlideCoreTab_1.instanceCount++)}render(){return html`<div class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,vertical:"vertical"===this.variant,active:this.active,disabled:this.disabled})}"><span class="container"><slot name="icon"></slot><div class="default-slot"><slot></slot></div></span></div>`}updated(t){t.has("active")&&this.setAttribute("aria-selected",this.active?"true":"false"),t.has("disabled")&&(this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1")):(this.removeAttribute("aria-disabled"),this.setAttribute("tabindex","0")))}};__decorate([property({reflect:!0})],GlideCoreTab.prototype,"panel",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"active",void 0),__decorate([property({reflect:!0})],GlideCoreTab.prototype,"variant",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreTab.prototype,"disabled",void 0),GlideCoreTab=GlideCoreTab_1=__decorate([customElement("glide-core-tab")],GlideCoreTab);export default GlideCoreTab;

package/dist/tab.panel.js

@@ -1 +1 @@
-"use strict";var h=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var o=(d,i,e,r)=>{for(var s=r>1?void 0:r?a(i,e):i,p=d.length-1,c;p>=0;p--)(c=d[p])&&(s=(r?c(i,e,s):c(s))||s);return r&&s&&h(i,e,s),s};import{LitElement as m,html as n}from"lit";import{classMap as f}from"lit/directives/class-map.js";import{customElement as v,property as u}from"lit/decorators.js";import y from"./tab.panel.styles.js";let t=class extends m{constructor(){super(...arguments);this.name="";this.isActive=!0}firstUpdated(){this.setAttribute("role","tabpanel"),this.hasAttribute("id")||(this.id=`glide-core-tab-panel-${t.instanceCount++}`)}render(){return n`<div class="${f({component:!0,hidden:!this.isActive})}"><slot></slot></div>`}updated(e){super.updated(e),e.has("isActive")&&this.setAttribute("aria-hidden",this.isActive?"false":"true")}};t.instanceCount=0,t.shadowRootOptions={...m.shadowRootOptions,mode:"closed"},t.styles=y,o([u({reflect:!0})],t.prototype,"name",2),o([u({type:Boolean})],t.prototype,"isActive",2),t=o([v("glide-core-tab-panel")],t);export{t as default};
+var GlideCoreTabPanel_1,__decorate=this&&this.__decorate||function(e,t,i,o){var a,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(r=(s<3?a(r):s>3?a(t,i,r):a(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import styles from"./tab.panel.styles.js";let GlideCoreTabPanel=class GlideCoreTabPanel extends LitElement{constructor(){super(...arguments),this.name="",this.isActive=!0}static{GlideCoreTabPanel_1=this}static{this.instanceCount=0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.setAttribute("role","tabpanel"),this.hasAttribute("id")||(this.id="glide-core-tab-panel-"+GlideCoreTabPanel_1.instanceCount++)}render(){return html`<div class="${classMap({component:!0,hidden:!this.isActive})}"><slot></slot></div>`}updated(e){super.updated(e),e.has("isActive")&&this.setAttribute("aria-hidden",this.isActive?"false":"true")}};__decorate([property({reflect:!0})],GlideCoreTabPanel.prototype,"name",void 0),__decorate([property({type:Boolean})],GlideCoreTabPanel.prototype,"isActive",void 0),GlideCoreTabPanel=GlideCoreTabPanel_1=__decorate([customElement("glide-core-tab-panel")],GlideCoreTabPanel);export default GlideCoreTabPanel;

package/dist/tab.panel.styles.js

@@ -1,9 +1,9 @@
-"use strict";import{css as o}from"lit";import e from"./styles/visually-hidden.js";export default[o`
+import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
     .component {
       font-family: var(--glide-core-font-sans);
     }
 
     .hidden {
-      ${e};
+      ${visuallyHidden};
     }
-  `];
+  `];