@crowdstrike/glide-core 0.12.0 → 0.12.2

package/dist/menu.options.test.events.js

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import './menu.button.js';
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import GlideCoreMenu from './menu.js';
+import GlideCoreMenuOptions from './menu.options.js';
+GlideCoreMenu.shadowRootOptions.mode = 'open';
+it('dispatches a "private-slot-change" event', async () => {
+    const component = await fixture(html `<glide-core-menu-options>
+      <glide-core-menu-button label="One"></glide-core-menu-button>
+    </glide-core-menu-options>`);
+    setTimeout(() => {
+        const option = document.createElement('glide-core-menu-button');
+        option.label = 'Label';
+        component.append(option);
+    });
+    const event = await oneEvent(component, 'private-slot-change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+});

package/dist/menu.test.interactions.d.ts

@@ -1,2 +1,3 @@
+import './menu.button.js';
 import './menu.link.js';
 import './menu.options.js';

package/dist/menu.test.interactions.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import './menu.button.js';
 import './menu.link.js';
 import './menu.options.js';
 import { LitElement } from 'lit';
@@ -1016,6 +1017,43 @@ it('does not wrap on ArrowDown', async () => {
     await sendKeys({ up: 'Meta' });
     expect(options[1].privateActive).to.be.true;
 });
+it('sets the first option as active when optionless and an option is dynamically added', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+      <glide-core-menu-options> </glide-core-menu-options>
+    </glide-core-menu>
+  `);
+    const option = document.createElement('glide-core-menu-button');
+    option.label = 'Label';
+    component.querySelector('glide-core-menu-options')?.append(option);
+    await elementUpdated(component);
+    expect(option?.privateActive).to.be.true;
+});
+it('retains its active option when an option is dynamically added', async () => {
+    const component = await fixture(html `
+    <glide-core-menu>
+      <button slot="target">Target</button>
+
+      <glide-core-menu-options>
+        <glide-core-menu-button label="One"></glide-core-menu-button>
+        <glide-core-menu-button label="Two"></glide-core-menu-button>
+      </glide-core-menu-options>
+    </glide-core-menu>
+  `);
+    component
+        .querySelectorAll('glide-core-menu-button')[1]
+        ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    await elementUpdated(component);
+    const button = document.createElement('glide-core-menu-button');
+    button.label = 'Three';
+    component.querySelector('glide-core-menu-options')?.append(button);
+    await elementUpdated(component);
+    const options = component.querySelectorAll('glide-core-menu-button');
+    expect(options[0]?.privateActive).to.be.false;
+    expect(options[1]?.privateActive).to.be.true;
+    expect(options[2]?.privateActive).to.be.false;
+});
 it('has `set offset()` coverage', async () => {
     const component = await fixture(html `
     <glide-core-menu>

package/dist/tab.group.d.ts

@@ -8,7 +8,14 @@ declare global {
     }
 }
 /**
- * @slot - One ore more of `<glide-core-tab-panel>`.
+ * @cssprop [--panel-padding-inline-end]
+ * @cssprop [--panel-padding-inline-start]
+ * @cssprop [--tabs-padding-block-end]
+ * @cssprop [--tabs-padding-block-start]
+ * @cssprop [--tabs-padding-inline-end]
+ * @cssprop [--tabs-padding-inline-start]
+ *
+ * @slot - One or more of `<glide-core-tab-panel>`.
  * @slot nav - One or more of `<glide-core-tab>`.
  */
 export default class GlideCoreTabGroup extends LitElement {

package/dist/tab.group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,s,o){var i,l=arguments.length,a=l<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,s,o);else for(var r=t.length-1;r>=0;r--)(i=t[r])&&(a=(l<3?i(a):l>3?i(e,s,a):i(e,s))||a);return l>3&&a&&Object.defineProperty(e,s,a),a};import"./icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";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{when}from"lit/directives/when.js";import GlideCoreTab from"./tab.js";import GlideCoreTabPanel from"./tab.panel.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tab.group.styles.js";let GlideCoreTabGroup=class GlideCoreTabGroup extends LitElement{constructor(){super(...arguments),this.sticky=!1,this.isAfterFirstUpdated=!1,this.isDisableOverflowStartButton=!1,this.isDisableOverflowEndButton=!1,this.isShowOverflowButtons=!1,this.#t=createRef(),this.#e=null,this.#s=100,this.#o=createRef(),this.#i=new LocalizeController(this),this.#l=createRef(),this.#a=1,this.#r=createRef(),this.#n=createRef(),this.#c=null,this.#h=null,this.#b=null,this.#u=null,this.#d=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get activeTab(){return this.#e}set activeTab(t){this.#c=this.#e,this.#e=t}disconnectedCallback(){this.#h?.disconnect(),this.#h=null}firstUpdated(){owSlotType(this.#l.value,[GlideCoreTab]),owSlotType(this.#o.value,[GlideCoreTabPanel]),this.#f()}render(){return html`<div class="component" @click="${this.#v}" @keydown="${this.#m}" ${ref(this.#t)}><div class="${classMap({"tab-container":!0,sticky:this.sticky})}">${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#d.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowStartButton})}" @click="${this.#p}" tabindex="-1" aria-label="${this.#i.term("previousTab")}" data-test="overflow-start-button" ${ref(this.#n)} ?disabled="${this.isDisableOverflowStartButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}<div role="tablist" class="${classMap({"tab-group":!0,animated:this.isAfterFirstUpdated})}" ${ref(this.#d)} @scroll="${this.#w}" @focusout="${this.#T}" tabindex="-1"><slot name="nav" @slotchange="${this.#E}" ${ref(this.#l)}></slot></div>${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#d.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowEndButton})}" @click="${this.#R}" tabindex="-1" aria-label="${this.#i.term("nextTab")}" data-test="overflow-end-button" ${ref(this.#r)} ?disabled="${this.isDisableOverflowEndButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div><slot @slotchange="${this.#g}" ${ref(this.#o)}></slot></div>`}updated(){this.#y()}#t;#e;#s;#o;#i;#l;#a;#r;#n;#c;#h;#b;#u;#d;#v(t){const e=t.target.closest("glide-core-tab");e&&e instanceof GlideCoreTab&&!e.disabled&&this.#S(e)}#R(){this.#O("right")}#p(){this.#O("left")}#g(){owSlotType(this.#o.value,[GlideCoreTabPanel])}#T(){for(const[,t]of this.tabElements.entries())t.tabIndex=t===this.activeTab?0:-1}#m(t){const e=t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof GlideCoreTab&&!e.disabled&&(this.#S(e),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.tabElements.find((t=>t.matches(":focus")));if("glide-core-tab"===e?.tagName.toLowerCase()){let s=this.tabElements.indexOf(e);switch(t.key){case"Home":s=0;break;case"End":s=this.tabElements.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.tabElements.length-1),s>this.tabElements.length-1&&(s=0),this.tabElements[s].focus({preventScroll:!1});for(const[,t]of this.tabElements.entries())t.tabIndex=this.tabElements[s]===t?0:-1;this.#B(),t.preventDefault()}}}#E(){owSlotType(this.#l.value,[GlideCoreTab]),this.#y(),this.#C(),this.#B()}#w(){this.#u&&clearTimeout(this.#u),this.#u=setTimeout((()=>{this.#B()}),this.#s)}#O(t){const e="right"===t?1:-1;ow(this.#d.value,ow.object.instanceOf(HTMLElement));const s=e*this.#d.value?.clientWidth*.5;this.#d.value?.scrollBy({left:s,top:0})}#C(){for(const[t,e]of this.tabElements.entries())this.activeTab||0!==t?(e.active=this.activeTab===e,e.tabIndex=this.activeTab===e?0:-1):(this.activeTab=e,this.activeTab.active=!0,this.activeTab.tabIndex=0);for(const t of this.panelElements){const e=this.activeTab?.getAttribute("panel"),s=t.getAttribute("name");t.isActive=s===e,t.tabIndex=s===e?0:-1}if(this.activeTab!==this.#c&&this.activeTab&&this.tabElements.length>0&&this.#t.value){const t=Number.parseInt(window.getComputedStyle(this.activeTab).getPropertyValue("padding-inline-start")),e=this.activeTab===this.tabElements.at(0)?t:this.activeTab.offsetLeft-this.tabElements[0].offsetLeft;this.#t.value.style.setProperty("--active-tab-indicator-translate",`${e}px`);const s=this.activeTab===this.tabElements.at(0)||this.activeTab===this.tabElements.at(-1)?t:0,{width:o}=this.activeTab.getBoundingClientRect();this.#t.value.style.setProperty("--active-tab-indicator-width",o-s+"px"),this.isAfterFirstUpdated=!0}}#L(){const t=this.#d.value,e=t?.getBoundingClientRect();if(ow(t,ow.object.instanceOf(HTMLElement)),e){const{width:s}=e,o=t.scrollLeft+s,i=t.scrollWidth;this.isDisableOverflowEndButton=i-o<=this.#a}}#B(){const t=this.#d.value,e=t?.getBoundingClientRect();if(t&&e){const{width:s}=e;this.isShowOverflowButtons=t.scrollWidth-s>this.#a}this.#G(),this.#L()}#G(){ow(this.#d.value,ow.object.instanceOf(HTMLElement)),this.isDisableOverflowStartButton=this.#d.value.scrollLeft<=0}#f(){this.#h=new ResizeObserver((t=>{t?.at(0)?.target===this.#d.value&&(this.#b&&clearTimeout(this.#b),this.#b=setTimeout((()=>{this.#B()}),this.#s))})),ow(this.#d.value,ow.object.instanceOf(HTMLElement)),this.#h.observe(this.#d.value)}#y(){for(const t of this.tabElements){const e=this.panelElements.filter((e=>e.name===t.panel))?.at(0);e?.getAttribute("id")&&(t.setAttribute("aria-controls",e.getAttribute("id")),e.setAttribute("aria-labelledby",t.getAttribute("id")))}}#S(t){this.activeTab=t,this.#C(),this.dispatchEvent(new CustomEvent("tab-show",{bubbles:!0,detail:{panel:t.panel}}))}};__decorate([property({type:Boolean,reflect:!0})],GlideCoreTabGroup.prototype,"sticky",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"activeTab",null),__decorate([state()],GlideCoreTabGroup.prototype,"isAfterFirstUpdated",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isShowOverflowButtons",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;
+var __decorate=this&&this.__decorate||function(t,e,s,o){var i,l=arguments.length,a=l<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,s,o);else for(var r=t.length-1;r>=0;r--)(i=t[r])&&(a=(l<3?i(a):l>3?i(e,s,a):i(e,s))||a);return l>3&&a&&Object.defineProperty(e,s,a),a};import"./icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";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{when}from"lit/directives/when.js";import GlideCoreTab from"./tab.js";import GlideCoreTabPanel from"./tab.panel.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./tab.group.styles.js";let GlideCoreTabGroup=class GlideCoreTabGroup extends LitElement{constructor(){super(...arguments),this.sticky=!1,this.isAfterFirstUpdated=!1,this.isDisableOverflowStartButton=!1,this.isDisableOverflowEndButton=!1,this.isShowOverflowButtons=!1,this.#t=createRef(),this.#e=null,this.#s=100,this.#o=createRef(),this.#i=new LocalizeController(this),this.#l=createRef(),this.#a=1,this.#r=createRef(),this.#n=createRef(),this.#c=null,this.#h=null,this.#b=null,this.#u=null,this.#d=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get activeTab(){return this.#e}set activeTab(t){this.#c=this.#e,this.#e=t}disconnectedCallback(){this.#h?.disconnect(),this.#h=null}firstUpdated(){owSlotType(this.#l.value,[GlideCoreTab]),owSlotType(this.#o.value,[GlideCoreTabPanel]),this.#f()}render(){return html`<div class="component" @click="${this.#v}" @keydown="${this.#m}" ${ref(this.#t)}><div class="${classMap({"tab-container":!0,sticky:this.sticky})}" data-test="tab-container">${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#d.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowStartButton})}" @click="${this.#p}" tabindex="-1" aria-label="${this.#i.term("previousTab")}" data-test="overflow-start-button" ${ref(this.#n)} ?disabled="${this.isDisableOverflowStartButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}<div role="tablist" class="${classMap({"tab-group":!0,animated:this.isAfterFirstUpdated})}" ${ref(this.#d)} @scroll="${this.#w}" @focusout="${this.#T}" tabindex="-1"><slot name="nav" @slotchange="${this.#E}" ${ref(this.#l)}></slot></div>${when(this.isShowOverflowButtons,(()=>html`<button style="height: ${this.#d.value?.clientHeight}px" class="${classMap({overflow:!0,disabled:this.isDisableOverflowEndButton})}" @click="${this.#R}" tabindex="-1" aria-label="${this.#i.term("nextTab")}" data-test="overflow-end-button" ${ref(this.#r)} ?disabled="${this.isDisableOverflowEndButton}"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div><slot @slotchange="${this.#g}" ${ref(this.#o)}></slot></div>`}updated(){this.#y()}#t;#e;#s;#o;#i;#l;#a;#r;#n;#c;#h;#b;#u;#d;#v(t){const e=t.target.closest("glide-core-tab");e&&e instanceof GlideCoreTab&&!e.disabled&&this.#S(e)}#R(){this.#O("right")}#p(){this.#O("left")}#g(){owSlotType(this.#o.value,[GlideCoreTabPanel])}#T(){for(const[,t]of this.tabElements.entries())t.tabIndex=t===this.activeTab?0:-1}#m(t){const e=t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e&&e instanceof GlideCoreTab&&!e.disabled&&(this.#S(e),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.tabElements.find((t=>t.matches(":focus")));if("glide-core-tab"===e?.tagName.toLowerCase()){let s=this.tabElements.indexOf(e);switch(t.key){case"Home":s=0;break;case"End":s=this.tabElements.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.tabElements.length-1),s>this.tabElements.length-1&&(s=0),this.tabElements[s].focus({preventScroll:!1});for(const[,t]of this.tabElements.entries())t.tabIndex=this.tabElements[s]===t?0:-1;this.#B(),t.preventDefault()}}}#E(){owSlotType(this.#l.value,[GlideCoreTab]),this.#y(),this.#C(),this.#B()}#w(){this.#u&&clearTimeout(this.#u),this.#u=setTimeout((()=>{this.#B()}),this.#s)}#O(t){const e="right"===t?1:-1;ow(this.#d.value,ow.object.instanceOf(HTMLElement));const s=e*this.#d.value?.clientWidth*.5;this.#d.value?.scrollBy({left:s,top:0})}#C(){for(const[t,e]of this.tabElements.entries())this.activeTab||0!==t?(e.active=this.activeTab===e,e.tabIndex=this.activeTab===e?0:-1):(this.activeTab=e,this.activeTab.active=!0,this.activeTab.tabIndex=0);for(const t of this.panelElements){const e=this.activeTab?.getAttribute("panel"),s=t.getAttribute("name");t.isActive=s===e,t.tabIndex=s===e?0:-1}if(this.activeTab!==this.#c&&this.activeTab&&this.tabElements.length>0&&this.#t.value){const t=Number.parseInt(window.getComputedStyle(this.activeTab).getPropertyValue("padding-inline-start")),e=this.activeTab===this.tabElements.at(0)?t:this.activeTab.offsetLeft-this.tabElements[0].offsetLeft;this.#t.value.style.setProperty("--active-tab-indicator-translate",`${e}px`);const s=this.activeTab===this.tabElements.at(0)||this.activeTab===this.tabElements.at(-1)?t:0,{width:o}=this.activeTab.getBoundingClientRect();this.#t.value.style.setProperty("--active-tab-indicator-width",o-s+"px"),this.isAfterFirstUpdated=!0}}#L(){const t=this.#d.value,e=t?.getBoundingClientRect();if(ow(t,ow.object.instanceOf(HTMLElement)),e){const{width:s}=e,o=t.scrollLeft+s,i=t.scrollWidth;this.isDisableOverflowEndButton=i-o<=this.#a}}#B(){const t=this.#d.value,e=t?.getBoundingClientRect();if(t&&e){const{width:s}=e;this.isShowOverflowButtons=t.scrollWidth-s>this.#a}this.#G(),this.#L()}#G(){ow(this.#d.value,ow.object.instanceOf(HTMLElement)),this.isDisableOverflowStartButton=this.#d.value.scrollLeft<=0}#f(){this.#h=new ResizeObserver((t=>{t?.at(0)?.target===this.#d.value&&(this.#b&&clearTimeout(this.#b),this.#b=setTimeout((()=>{this.#B()}),this.#s))})),ow(this.#d.value,ow.object.instanceOf(HTMLElement)),this.#h.observe(this.#d.value)}#y(){for(const t of this.tabElements){const e=this.panelElements.filter((e=>e.name===t.panel))?.at(0);e?.getAttribute("id")&&(t.setAttribute("aria-controls",e.getAttribute("id")),e.setAttribute("aria-labelledby",t.getAttribute("id")))}}#S(t){this.activeTab=t,this.#C(),this.dispatchEvent(new CustomEvent("tab-show",{bubbles:!0,detail:{panel:t.panel}}))}};__decorate([property({type:Boolean,reflect:!0})],GlideCoreTabGroup.prototype,"sticky",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"activeTab",null),__decorate([state()],GlideCoreTabGroup.prototype,"isAfterFirstUpdated",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],GlideCoreTabGroup.prototype,"isShowOverflowButtons",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

@@ -5,13 +5,23 @@ import{css}from"lit";export default[css`
       flex-direction: column;
 
       & .tab-container {
-        background-color: var(--glide-core-surface-page);
         border-block-end: 1px solid var(--glide-core-border-base-lighter);
         box-sizing: border-box;
         display: flex;
+        padding-block-end: var(--tabs-padding-block-end);
+
+        /* Better to be explicit with start and end than using the shorthand property */
+        /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+        padding-block-start: var(--tabs-padding-block-start);
+        padding-inline-end: var(--tabs-padding-inline-end);
+
+        /* Better to be explicit with start and end than using the shorthand property */
+        /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+        padding-inline-start: var(--tabs-padding-inline-start);
       }
 
       & .sticky {
+        background-color: var(--glide-core-surface-page);
         inset-block-start: 0;
         position: sticky;
       }

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

@@ -2,7 +2,7 @@
 import './tab.group.js';
 import './tab.js';
 import './tab.panel.js';
-import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
+import { assert, expect, fixture, html, oneEvent, waitUntil, } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreTabGroup from './tab.group.js';
 import GlideCoreTabPanel from './tab.panel.js';
@@ -130,6 +130,82 @@ it('can use left/right, home and end keys to focus on tabs', async () => {
     await sendKeys({ press: 'Enter' });
     expect(thirdTab.active).to.be.true;
 });
+it('sets padding-inline-start of the Tab Group via `--tabs-padding-inline-start`', async () => {
+    const component = await fixture(html `
+    <glide-core-tab-group style="--tabs-padding-inline-start: 100px;">
+      <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>
+  `);
+    const tabContainer = component?.shadowRoot?.querySelector('[data-test="tab-container"]');
+    assert(tabContainer);
+    expect(window.getComputedStyle(tabContainer).paddingInline).to.equal('100px 0px');
+});
+it('sets padding-inline-end of the Tab Group via `--tabs-padding-inline-end`', async () => {
+    const component = await fixture(html `
+    <glide-core-tab-group style="--tabs-padding-inline-end: 100px;">
+      <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>
+  `);
+    const tabContainer = component?.shadowRoot?.querySelector('[data-test="tab-container"]');
+    assert(tabContainer);
+    expect(window.getComputedStyle(tabContainer).paddingInline).to.equal('0px 100px');
+});
+it('sets padding-block-start of the Tab Group via `--tabs-padding-block-start`', async () => {
+    const component = await fixture(html `
+    <glide-core-tab-group style="--tabs-padding-block-start: 100px;">
+      <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>
+  `);
+    const tabContainer = component?.shadowRoot?.querySelector('[data-test="tab-container"]');
+    assert(tabContainer);
+    expect(window.getComputedStyle(tabContainer).paddingBlock).to.equal('100px 0px');
+});
+it('sets padding-block-end of the Tab Group via `--tabs-padding-block-end`', async () => {
+    const component = await fixture(html `
+    <glide-core-tab-group style="--tabs-padding-block-end: 100px;">
+      <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>
+  `);
+    const tabContainer = component?.shadowRoot?.querySelector('[data-test="tab-container"]');
+    assert(tabContainer);
+    expect(window.getComputedStyle(tabContainer).paddingBlock).to.equal('0px 100px');
+});
+it('sets padding-inline-start of the Tab Panel via `--panel-padding-inline-start`', async () => {
+    const component = await fixture(html `
+    <glide-core-tab-group style="--panel-padding-inline-start: 100px;">
+      <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>
+  `);
+    const tabPanel = component
+        ?.querySelector('glide-core-tab-panel')
+        ?.shadowRoot?.querySelector('[data-test="tab-panel"]');
+    assert(tabPanel);
+    expect(window.getComputedStyle(tabPanel).paddingInline).to.equal('100px 0px');
+});
+it('sets padding-inline-end of the Tab Panel via `--panel-padding-inline-end`', async () => {
+    const component = await fixture(html `
+    <glide-core-tab-group style="--panel-padding-inline-end: 100px;">
+      <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>
+  `);
+    const tabPanel = component
+        ?.querySelector('glide-core-tab-panel')
+        ?.shadowRoot?.querySelector('[data-test="tab-panel"]');
+    assert(tabPanel);
+    expect(window.getComputedStyle(tabPanel).paddingInline).to.equal('0px 100px');
+});
 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 `

package/dist/tab.panel.js

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

package/dist/tab.panel.styles.js

@@ -9,5 +9,23 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     .component {
       font-family: var(--glide-core-font-sans);
       outline: none;
+
+      /*
+        Prefixing the CSS custom property with "panel" will
+        ensure we are robust. Imagine cases where consumers
+        have set "--padding-inline-start" or "--padding-inline-end"
+        already and now we require these variables to adjust
+        padding within our panels. Adding the prefix of "panel"
+        should ensure uniqueness to our component.
+
+        A second reason we prefix this is so that consumers
+        can set these properties on the parent Tab Group
+        and it will apply to all child panels for convenience.
+      */
+      padding-inline-end: var(--panel-padding-inline-end);
+
+      /* Better to be explicit with start and end than using the shorthand property */
+      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+      padding-inline-start: var(--panel-padding-inline-start);
     }
   `];

package/dist/tag.d.ts

@@ -15,9 +15,11 @@ export default class GlideCoreTag extends LitElement {
     static styles: import("lit").CSSResult[];
     disabled: boolean;
     label?: string;
+    privateEditable: boolean;
     removable: boolean;
     size: 'small' | 'medium' | 'large';
     click(): void;
     firstUpdated(): void;
+    focus(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/tag.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var l,s=arguments.length,r=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(r=(s<3?l(r):s>3?l(t,o,r):l(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";import styles from"./tag.styles.js";let GlideCoreTag=class GlideCoreTag extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.removable=!1,this.size="medium",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#i=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}render(){return html`<div class="${classMap({component:!0,added:!0,disabled:this.disabled,[this.size]:!0})}" data-test="component" ${ref(this.#t)}><slot class="${classMap({"icon-slot":!0,[this.size]:!0})}" name="icon" ${ref(this.#o)}></slot>${this.label} ${when(this.removable,(()=>html`<button aria-label="${this.#i.term("removeTag",this.label)}" class="${classMap({button:!0,[this.size]:!0,disabled:this.disabled})}" data-test="button" type="button" @click="${this.#l}" ?disabled="${this.disabled}" ${ref(this.#e)}><svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div>`}#e;#t;#o;#i;#l(){setTimeout((()=>{this.remove()}),200),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0}))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"size",void 0),GlideCoreTag=__decorate([customElement("glide-core-tag")],GlideCoreTag);export default GlideCoreTag;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var s,l=arguments.length,a=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,i);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(a=(l<3?s(a):l>3?s(t,o,a):s(t,o))||a);return l>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{when}from"lit/directives/when.js";import pencilIcon from"./icons/pencil.js";import styles from"./tag.styles.js";let GlideCoreTag=class GlideCoreTag extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.privateEditable=!1,this.removable=!1,this.size="medium",this.#e=createRef(),this.#t=!1,this.#o=new LocalizeController(this),this.#i=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#i.value?.click()}firstUpdated(){this.#e.value?.addEventListener("animationend",(()=>{this.#e.value?.classList.remove("added")}),{once:!0})}focus(){this.#i.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,disabled:this.disabled,[this.size]:!0})}" data-test="component" ${ref(this.#e)}><slot class="${classMap({"icon-slot":!0,[this.size]:!0})}" name="icon"></slot>${this.label} ${when(this.privateEditable,(()=>html`<button aria-label="${this.#o.term("editTag",this.label)}" class="${classMap({"edit-button":!0,[this.size]:!0,disabled:this.disabled})}" data-test="edit-button" ?disabled="${this.disabled}" type="button" @click="${this.#s}" @keydown="${this.#l}">${pencilIcon}</button>`))} ${when(this.removable,(()=>html`<button aria-label="${this.#o.term("removeTag",this.label)}" class="${classMap({"removal-button":!0,[this.size]:!0,disabled:this.disabled})}" data-test="removal-button" type="button" ?disabled="${this.disabled}" @click="${this.#a}" @keydown="${this.#r}" ${ref(this.#i)}><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div>`}#e;#t;#o;#i;#s(){this.#t?this.#t=!1:this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}))}#l(e){["Enter"," "].includes(e.key)&&(this.#t=!0,this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0})))}#a(){this.#t?this.#t=!1:(setTimeout((()=>{this.remove()}),200),this.#e.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#r(e){["Enter"," "].includes(e.key)&&(this.#t=!0,setTimeout((()=>{this.remove()}),200),this.#e.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"label",void 0),__decorate([property({attribute:"private-editable",reflect:!0,type:Boolean})],GlideCoreTag.prototype,"privateEditable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTag.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreTag.prototype,"size",void 0),GlideCoreTag=__decorate([customElement("glide-core-tag")],GlideCoreTag);export default GlideCoreTag;

package/dist/tag.styles.js

@@ -1,5 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline("button:focus-visible")}
+    ${focusOutline(".edit-button:focus-visible")}
+    ${focusOutline(".removal-button:focus-visible")}
   `,css`
     .component {
       align-items: center;
@@ -65,19 +66,16 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
-    .button {
+    .removal-button {
       align-items: center;
       background-color: transparent;
-      block-size: var(--glide-core-spacing-sm);
       border: none;
       border-radius: 0.0625rem;
       color: var(--glide-core-icon-display);
       cursor: pointer;
       display: flex;
-      inline-size: var(--glide-core-spacing-sm);
       justify-content: center;
       margin: 0;
-      margin-inline-start: 0.375rem;
       padding: 0;
       transition: color 200ms ease-in-out;
 
@@ -87,6 +85,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         margin-inline-start: var(--glide-core-spacing-xs);
       }
 
+      &.medium {
+        block-size: var(--glide-core-spacing-sm);
+        inline-size: var(--glide-core-spacing-sm);
+        margin-inline-start: 0.375rem;
+      }
+
       &.small {
         block-size: 0.625rem;
         inline-size: 0.6215rem;
@@ -138,4 +142,41 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         justify-content: center;
       }
     }
+
+    .edit-button {
+      background-color: transparent;
+      border: none;
+      border-radius: 0.0625rem;
+      display: flex;
+      padding: 0;
+
+      &.large {
+        margin-inline-start: var(--glide-core-spacing-xs);
+      }
+
+      &.medium {
+        --size: 0.75rem;
+
+        margin-inline-start: 0.375rem;
+      }
+
+      &.small {
+        --size: 0.625rem;
+
+        margin-inline-start: var(--glide-core-spacing-xxs);
+      }
+
+      &.disabled {
+        color: var(--glide-core-icon-tertiary-disabled);
+        cursor: not-allowed;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:hover:not(.disabled) {
+        color: var(--glide-core-icon-primary-hover);
+      }
+    }
   `];

package/dist/tag.test.basics.js

@@ -22,7 +22,7 @@ it('has defaults', async () => {
 });
 it('can be removed', async () => {
     const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="removal-button"]');
     expect(button?.checkVisibility()).to.be.true;
     expect(button?.getAttribute('aria-label')).to.equal('Remove tag: Label');
 });

package/dist/tag.test.events.js

@@ -1,20 +1,93 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tag.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
 import GlideCoreTag from './tag.js';
 import sinon from 'sinon';
 GlideCoreTag.shadowRootOptions.mode = 'open';
-it('dispatches one "remove" event', async () => {
+it('dispatches one "remove" event on click', async () => {
     const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
+    setTimeout(() => {
+        component.shadowRoot
+            ?.querySelector('[data-test="removal-button"]')
+            ?.click();
+    });
     const spy = sinon.spy();
     component.addEventListener('remove', spy);
+    const event = await oneEvent(component, 'remove');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one "remove" event on Enter ', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
+    component.shadowRoot
+        ?.querySelector('[data-test="removal-button"]')
+        ?.focus();
+    sendKeys({ press: 'Enter' });
+    const spy = sinon.spy();
+    component.addEventListener('remove', spy);
+    const event = await oneEvent(component, 'remove');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one "remove" event on Space ', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
+    component.shadowRoot
+        ?.querySelector('[data-test="removal-button"]')
+        ?.focus();
+    sendKeys({ press: ' ' });
+    const spy = sinon.spy();
+    component.addEventListener('remove', spy);
+    const event = await oneEvent(component, 'remove');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one "edit" event on click', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" private-editable></glide-core-tag>`);
     setTimeout(() => {
         component.shadowRoot
-            ?.querySelector('[data-test="button"]')
+            ?.querySelector('[data-test="edit-button"]')
             ?.click();
     });
-    const event = await oneEvent(component, 'remove');
+    const spy = sinon.spy();
+    component.addEventListener('edit', spy);
+    const event = await oneEvent(component, 'edit');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one "edit" event on Enter ', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" private-editable></glide-core-tag>`);
+    component.shadowRoot
+        ?.querySelector('[data-test="edit-button"]')
+        ?.focus();
+    sendKeys({ press: 'Enter' });
+    const spy = sinon.spy();
+    component.addEventListener('edit', spy);
+    const event = await oneEvent(component, 'edit');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
+    expect(spy.callCount).to.equal(1);
+});
+it('dispatches one "edit" event on Space ', async () => {
+    const component = await fixture(html `<glide-core-tag label="Label" private-editable></glide-core-tag>`);
+    component.shadowRoot
+        ?.querySelector('[data-test="edit-button"]')
+        ?.focus();
+    sendKeys({ press: ' ' });
+    const spy = sinon.spy();
+    component.addEventListener('edit', spy);
+    const event = await oneEvent(component, 'edit');
     expect(event instanceof Event).to.be.true;
     expect(event.bubbles).to.be.true;
+    expect(event.composed).to.be.true;
     expect(spy.callCount).to.equal(1);
 });

package/dist/tag.test.focus.js

@@ -5,6 +5,6 @@ GlideCoreTag.shadowRootOptions.mode = 'open';
 it('calling `focus()` focuses the button', async () => {
     const component = await fixture(html `<glide-core-tag label="Label" removable></glide-core-tag>`);
     component.focus();
-    const button = component.shadowRoot?.querySelector('[data-test="button"]');
+    const button = component.shadowRoot?.querySelector('[data-test="removal-button"]');
     expect(component.shadowRoot?.activeElement).to.equal(button);
 });

package/dist/translations/en.js

@@ -1 +1 @@
-const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",moreInformation:"More information",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",announcedCharacterCount:(e,o)=>`Character count ${e} of ${o}`,displayedCharacterCount:(e,o)=>`${e}/${o}`,clearEntry:e=>`Clear ${e} entry`,removeTag:e=>`Remove tag: ${e}`,actionsFor:e=>`Actions for ${e}`};export default translation;
+const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",moreInformation:"More information",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",announcedCharacterCount:(t,o)=>`Character count ${t} of ${o}`,displayedCharacterCount:(t,o)=>`${t}/${o}`,clearEntry:t=>`Clear ${t} entry`,editOption:t=>`Edit option: ${t}`,editTag:t=>`Edit tag: ${t}`,removeTag:t=>`Remove tag: ${t}`,actionsFor:t=>`Actions for ${t}`};export default translation;

package/dist/translations/fr.d.ts

@@ -1,5 +1,5 @@
 import type { Translation } from '../library/localize.js';
-export declare const PENDING_STRINGS: readonly [];
+export declare const PENDING_STRINGS: readonly ["editOption", "editTag"];
 type PendingTranslation = (typeof PENDING_STRINGS)[number];
 declare const translation: Omit<Translation, PendingTranslation>;
 export default translation;

package/dist/translations/fr.js

@@ -1 +1 @@
-export const PENDING_STRINGS=[];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",moreInformation:"Plus d’informations",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(e,r)=>`Nombre de caractères ${e} de ${r}`,displayedCharacterCount:(e,r)=>`${e}/${r}`,clearEntry:e=>`Effacer l'entrée ${e}`,removeTag:e=>`Supprimer la balise : ${e}`,actionsFor:e=>`Actions pour ${e}`};export default translation;
+export const PENDING_STRINGS=["editOption","editTag"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",moreInformation:"Plus d’informations",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(e,t)=>`Nombre de caractères ${e} de ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Effacer l'entrée ${e}`,removeTag:e=>`Supprimer la balise : ${e}`,actionsFor:e=>`Actions pour ${e}`};export default translation;

package/dist/translations/ja.d.ts

@@ -1,5 +1,5 @@
 import type { Translation } from '../library/localize.js';
-export declare const PENDING_STRINGS: readonly [];
+export declare const PENDING_STRINGS: readonly ["editOption", "editTag"];
 type PendingTranslation = (typeof PENDING_STRINGS)[number];
 declare const translation: Omit<Translation, PendingTranslation>;
 export default translation;

package/dist/translations/ja.js

@@ -1 +1 @@
-export const PENDING_STRINGS=[];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",moreInformation:"詳細情報",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(n,t)=>`${t} 文字数の${n}`,displayedCharacterCount:(n,t)=>`${n}/${t}`,clearEntry:n=>`${n}エントリのクリア`,removeTag:n=>`タグを削除: ${n}`,actionsFor:n=>`${n}のアクション`};export default translation;
+export const PENDING_STRINGS=["editOption","editTag"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",moreInformation:"詳細情報",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",announcedCharacterCount:(t,e)=>`${e} 文字数の${t}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`${t}エントリのクリア`,removeTag:t=>`タグを削除: ${t}`,actionsFor:t=>`${t}のアクション`};export default translation;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",