@crowdstrike/glide-core 0.9.5 → 0.10.0

package/dist/tree.test.focus.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import './tree.js';
 import { assert, expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
@@ -7,7 +8,7 @@ import GlideCoreTreeItemIconButton from './tree.item.icon-button.js';
 import GlideCoreTreeItemMenu from './tree.item.menu.js';
 GlideCoreTree.shadowRootOptions.mode = 'open';
 it('focuses the first tree item when tree is focused, if there are no selected items', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1">
         <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
@@ -15,27 +16,27 @@ it('focuses the first tree item when tree is focused, if there are no selected i
       <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
     </glide-core-tree>
   `);
-    tree.dispatchEvent(new Event('focusin'));
-    const childItems = tree.slotElements;
+    component.dispatchEvent(new Event('focusin'));
+    const childItems = component.slotElements;
     assert(document.activeElement instanceof GlideCoreTreeItem);
     expect(document.activeElement?.label).to.equal(childItems[0].label);
 });
 it('focuses the selected tree item on `focus()`, if there is one', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1"></glide-core-tree-item>
       <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
-    tree.selectItem(childItems[1]);
-    tree.dispatchEvent(new Event('focusin'));
-    await tree.updateComplete;
+    const childItems = component.slotElements;
+    component.selectItem(childItems[1]);
+    component.dispatchEvent(new Event('focusin'));
+    await component.updateComplete;
     assert(document.activeElement instanceof GlideCoreTreeItem);
     expect(document.activeElement?.label).to.equal(childItems[1].label);
 });
 it('does not focus the selected tree item on `focus()` if collapsed', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1"> </glide-core-tree-item>
       <glide-core-tree-item label="Child Item 2">
@@ -46,13 +47,13 @@ it('does not focus the selected tree item on `focus()` if collapsed', async () =
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
-    tree.dispatchEvent(new Event('focusin'));
-    await tree.updateComplete;
-    expect(document.activeElement === childItems[0]).to.equal(true);
+    const childItems = component.slotElements;
+    component.dispatchEvent(new Event('focusin'));
+    await component.updateComplete;
+    expect(document.activeElement === childItems[0]).to.be.true;
 });
 it('expands a tree item if right arrow is pressed', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1">
         <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
@@ -60,15 +61,15 @@ it('expands a tree item if right arrow is pressed', async () => {
       <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
-    tree.dispatchEvent(new Event('focusin'));
+    const childItems = component.slotElements;
+    component.dispatchEvent(new Event('focusin'));
     await sendKeys({ press: 'ArrowRight' });
-    expect(childItems[0].expanded).to.equal(true);
+    expect(childItems[0].expanded).to.be.true;
     assert(document.activeElement instanceof GlideCoreTreeItem);
     expect(document.activeElement?.label).to.equal(childItems[0].label, 'focus does not move');
 });
 it(`focuses on an expanded tree item's child if right arrow is pressed`, async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1" expanded>
         <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
@@ -76,14 +77,14 @@ it(`focuses on an expanded tree item's child if right arrow is pressed`, async (
       <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
-    tree.dispatchEvent(new Event('focusin'));
+    const childItems = component.slotElements;
+    component.dispatchEvent(new Event('focusin'));
     await sendKeys({ press: 'ArrowRight' });
     assert(document.activeElement instanceof GlideCoreTreeItem);
     expect(document.activeElement?.label).to.equal(childItems[0].slotElements[0].label);
 });
 it('collapses an expanded tree item if left arrow is pressed', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1" expanded>
         <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
@@ -91,15 +92,15 @@ it('collapses an expanded tree item if left arrow is pressed', async () => {
       <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
-    tree.dispatchEvent(new Event('focusin'));
+    const childItems = component.slotElements;
+    component.dispatchEvent(new Event('focusin'));
     await sendKeys({ press: 'ArrowLeft' });
-    expect(childItems[0].expanded).to.equal(false);
+    expect(childItems[0].expanded).to.be.false;
     assert(document.activeElement instanceof GlideCoreTreeItem);
     expect(document.activeElement?.label).to.equal(childItems[0].label, 'focus does not move');
 });
 it(`focuses on a non-collapsible tree item's parent if left arrow is pressed`, async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1" expanded non-collapsible>
         <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
@@ -107,7 +108,7 @@ it(`focuses on a non-collapsible tree item's parent if left arrow is pressed`, a
       <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
+    const childItems = component.slotElements;
     const grandchildItems = childItems[0].slotElements;
     grandchildItems[0].focus();
     await sendKeys({ press: 'ArrowLeft' });
@@ -115,7 +116,7 @@ it(`focuses on a non-collapsible tree item's parent if left arrow is pressed`, a
     expect(document.activeElement?.label).to.equal(childItems[0].label);
 });
 it(`focuses on a collapsed tree item's parent if left arrow is pressed`, async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item expanded label="Child Item 1">
         <glide-core-tree-item label="Grandchild Item 1">
@@ -127,14 +128,14 @@ it(`focuses on a collapsed tree item's parent if left arrow is pressed`, async (
       <glide-core-tree-item label="Child Item 2"></glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
+    const childItems = component.slotElements;
     const grandchildItems = childItems[0].slotElements;
     grandchildItems[0].focus();
     await sendKeys({ press: 'ArrowLeft' });
-    expect(document.activeElement === childItems[0]).to.equal(true);
+    expect(document.activeElement === childItems[0]).to.be.true;
 });
 it('moves down the non-expanded tree items with down arrow', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1" expanded>
         <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
@@ -145,8 +146,8 @@ it('moves down the non-expanded tree items with down arrow', async () => {
       <glide-core-tree-item label="Child Item 3"></glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
-    tree.dispatchEvent(new Event('focusin'));
+    const childItems = component.slotElements;
+    component.dispatchEvent(new Event('focusin'));
     await sendKeys({ press: 'ArrowDown' });
     assert(document.activeElement instanceof GlideCoreTreeItem);
     expect(document.activeElement?.label).to.equal(childItems[0].slotElements[0].label, 'moves to child item if expanded');
@@ -158,7 +159,7 @@ it('moves down the non-expanded tree items with down arrow', async () => {
     expect(document.activeElement?.label).to.equal(childItems[2].label, 'Does not move if at the last item');
 });
 it('moves up the non-expanded tree items with up arrow', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1">
         <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
@@ -168,7 +169,7 @@ it('moves up the non-expanded tree items with up arrow', async () => {
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
+    const childItems = component.slotElements;
     // Start at the last item
     childItems[1].slotElements[0].focus();
     await sendKeys({ press: 'ArrowUp' });
@@ -180,7 +181,7 @@ it('moves up the non-expanded tree items with up arrow', async () => {
     expect(document.activeElement?.label).to.equal(childItems[0].label, 'Does not move if at the first item');
 });
 it('moves to the first item when Home is pressed', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1">
         <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
@@ -190,7 +191,7 @@ it('moves to the first item when Home is pressed', async () => {
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
+    const childItems = component.slotElements;
     // Start at the last item
     childItems[1].slotElements[0].focus();
     await sendKeys({ press: 'Home' });
@@ -198,7 +199,7 @@ it('moves to the first item when Home is pressed', async () => {
     expect(document.activeElement?.label).to.equal(childItems[0].label);
 });
 it('moves to the last item when End is pressed', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1">
         <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
@@ -208,7 +209,7 @@ it('moves to the last item when End is pressed', async () => {
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
+    const childItems = component.slotElements;
     // Start at the first item
     childItems[0].focus();
     await sendKeys({ press: 'End' });
@@ -216,7 +217,7 @@ it('moves to the last item when End is pressed', async () => {
     expect(document.activeElement?.label).to.equal(childItems[1].slotElements[0].label);
 });
 it('selects or expands/collapses node when Enter is pressed', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1"></glide-core-tree-item>
       <glide-core-tree-item label="Child Item 2">
@@ -224,42 +225,42 @@ it('selects or expands/collapses node when Enter is pressed', async () => {
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
+    const childItems = component.slotElements;
     const grandchildItems = childItems?.[1].slotElements;
     // For an item that doesn't have children, selects it
     childItems[0].focus();
     await sendKeys({ press: 'Enter' });
-    expect(childItems[0].selected).to.equal(true);
-    expect(childItems[1].selected).to.equal(false);
-    expect(grandchildItems[0].selected).to.equal(false);
-    expect(childItems[1].expanded).to.equal(false);
+    expect(childItems[0].selected).to.be.true;
+    expect(childItems[1].selected).to.be.false;
+    expect(grandchildItems[0].selected).to.be.false;
+    expect(childItems[1].expanded).to.be.false;
     // For an item that has children, expands it
     childItems[1].focus();
     await sendKeys({ press: 'Enter' });
-    expect(childItems[1].expanded).to.equal(true);
+    expect(childItems[1].expanded).to.be.true;
     // Can select a grandchild item
     grandchildItems[0].focus();
     await sendKeys({ press: 'Enter' });
-    expect(grandchildItems[0].selected).to.equal(true);
+    expect(grandchildItems[0].selected).to.be.true;
 });
 it('selects a non-collapsible parent node when Enter is pressed', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1" expanded non-collapsible>
         <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
+    const childItems = component.slotElements;
     const grandchildItems = childItems?.[0].slotElements;
     grandchildItems[0].focus();
     childItems[0].focus();
     await sendKeys({ press: 'Enter' });
-    expect(grandchildItems[0].selected).to.equal(false);
-    expect(childItems[0].selected).to.equal(true);
+    expect(grandchildItems[0].selected).to.be.false;
+    expect(childItems[0].selected).to.be.true;
 });
 it('does nothing if some other key is pressed', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1">
         <glide-core-tree-item label="Grandchild Item 1"></glide-core-tree-item>
@@ -269,7 +270,7 @@ it('does nothing if some other key is pressed', async () => {
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    const childItems = tree.slotElements;
+    const childItems = component.slotElements;
     // Start at the first item
     childItems[0].focus();
     await sendKeys({ press: 'a' });
@@ -277,7 +278,7 @@ it('does nothing if some other key is pressed', async () => {
     expect(document.activeElement?.label).to.equal(childItems[0].label);
 });
 it('can use the keyboard to navigate to a tree item icon button', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1">
         <glide-core-tree-item-icon-button slot="suffix">
@@ -288,14 +289,14 @@ it('can use the keyboard to navigate to a tree item icon button', async () => {
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    tree.dispatchEvent(new Event('focusin'));
-    const childItems = tree.slotElements;
+    component.dispatchEvent(new Event('focusin'));
+    const childItems = component.slotElements;
     childItems[0].focus();
     await sendKeys({ press: 'Tab' });
     assert(document.activeElement instanceof GlideCoreTreeItemIconButton);
 });
 it('can use the keyboard to navigate to a tree item menu', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1">
         <glide-core-tree-item-menu slot="menu">
@@ -305,14 +306,14 @@ it('can use the keyboard to navigate to a tree item menu', async () => {
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    tree.dispatchEvent(new Event('focusin'));
-    const childItems = tree.slotElements;
+    component.dispatchEvent(new Event('focusin'));
+    const childItems = component.slotElements;
     childItems[0].focus();
     await sendKeys({ press: 'Tab' });
     assert(document.activeElement instanceof GlideCoreTreeItemMenu);
 });
 it('does not focus on a tree item icon button unless that tree item is focused', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1"> </glide-core-tree-item>
       <glide-core-tree-item label="Child Item 2">
@@ -324,21 +325,22 @@ it('does not focus on a tree item icon button unless that tree item is focused',
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    tree.dispatchEvent(new Event('focusin'));
-    const childItems = tree.slotElements;
+    component.dispatchEvent(new Event('focusin'));
+    const childItems = component.slotElements;
     childItems[0].focus();
     await sendKeys({ press: 'Tab' });
-    expect(document.activeElement === document.body).to.equal(true);
+    expect(document.activeElement === document.body).to.be.true;
     childItems[1].focus();
     await sendKeys({ press: 'Tab' });
-    expect(document.activeElement instanceof GlideCoreTreeItemIconButton).to.equal(true);
+    expect(document.activeElement instanceof GlideCoreTreeItemIconButton).to.be
+        .true;
     await sendKeys({ down: 'Shift' });
     await sendKeys({ press: 'Tab' });
     await sendKeys({ up: 'Shift' });
-    expect(document.activeElement === childItems[1]).to.equal(true, 'can keyboard navigate back to the parent Tree Item');
+    expect(document.activeElement === childItems[1]).to.be.true;
 });
 it('does not focus on a tree item menu unless that tree item is focused', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1"> </glide-core-tree-item>
       <glide-core-tree-item label="Child Item 2">
@@ -349,17 +351,17 @@ it('does not focus on a tree item menu unless that tree item is focused', async
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    tree.dispatchEvent(new Event('focusin'));
-    const childItems = tree.slotElements;
+    component.dispatchEvent(new Event('focusin'));
+    const childItems = component.slotElements;
     childItems[0].focus();
     await sendKeys({ press: 'Tab' });
-    expect(document.activeElement === document.body).to.equal(true);
+    expect(document.activeElement === document.body).to.be.true;
     childItems[1].focus();
     await sendKeys({ press: 'Tab' });
-    expect(document.activeElement instanceof GlideCoreTreeItemMenu).to.equal(true);
+    expect(document.activeElement instanceof GlideCoreTreeItemMenu).to.be.true;
 });
 it('does not select a tree item if Enter is pressed while its tree item icon button is focused', async () => {
-    const tree = await fixture(html `
+    const component = await fixture(html `
     <glide-core-tree>
       <glide-core-tree-item label="Child Item 1">
         <glide-core-tree-item-icon-button slot="suffix">
@@ -370,11 +372,12 @@ it('does not select a tree item if Enter is pressed while its tree item icon but
       </glide-core-tree-item>
     </glide-core-tree>
   `);
-    tree.dispatchEvent(new Event('focusin'));
-    const childItems = tree.slotElements;
+    component.dispatchEvent(new Event('focusin'));
+    const childItems = component.slotElements;
     childItems[0].focus();
     await sendKeys({ press: 'Tab' });
-    expect(document.activeElement instanceof GlideCoreTreeItemIconButton).to.equal(true);
+    expect(document.activeElement instanceof GlideCoreTreeItemIconButton).to.be
+        .true;
     await sendKeys({ press: 'Enter' });
-    expect(childItems[0].hasAttribute('selected')).to.equal(false);
+    expect(childItems[0].hasAttribute('selected')).to.be.false;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.9.5",
+  "version": "0.10.0",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -48,15 +48,15 @@
     "@eslint/js": "^8.56.0",
     "@open-wc/testing": "^3.2.2",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@storybook/addon-essentials": "^8.2.7",
-    "@storybook/addon-links": "^8.2.7",
-    "@storybook/blocks": "^8.2.7",
-    "@storybook/core-events": "^8.2.7",
-    "@storybook/manager-api": "^8.2.7",
-    "@storybook/preview-api": "^8.2.7",
-    "@storybook/theming": "^8.2.7",
-    "@storybook/web-components": "^8.2.7",
-    "@storybook/web-components-vite": "^8.2.7",
+    "@storybook/addon-essentials": "^8.3.4",
+    "@storybook/addon-links": "^8.3.4",
+    "@storybook/blocks": "^8.3.4",
+    "@storybook/core-events": "^8.3.4",
+    "@storybook/manager-api": "^8.3.4",
+    "@storybook/preview-api": "^8.3.4",
+    "@storybook/theming": "^8.3.4",
+    "@storybook/web-components": "^8.3.4",
+    "@storybook/web-components-vite": "^8.3.4",
     "@stylistic/eslint-plugin": "^1.7.0",
     "@types/eslint": "^8.56.7",
     "@types/mocha": "^10.0.6",
@@ -70,7 +70,6 @@
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "chalk": "^5.3.0",
-    "cheerio": "^1.0.0",
     "esbuild": "^0.19.12",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -95,7 +94,7 @@
     "prettier": "3.1.0",
     "rimraf": "^5.0.7",
     "sinon": "^17.0.1",
-    "storybook": "^8.2.7",
+    "storybook": "^8.3.4",
     "stylelint": "^16.3.1",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "^6.0.4",
@@ -114,8 +113,7 @@
   },
   "scripts": {
     "start": "per-env",
-    "start:development": "storybook dev --config-dir .storybook --disable-telemetry --port 6006 --ci",
-    "start:development:comment": "Upon running this script, a new tab will **not** automatically open due to the `--ci` flag. This may be a bit unexpected as it is not the default behavior. One must manually navigate to the Storybook URL provided in the terminal.",
+    "start:development": "storybook dev --config-dir .storybook --disable-telemetry --no-open --port 6006",
     "start:production": "rimraf ./dist && npm-run-all --parallel start:production:components start:production:storybook start:production:stylesheets --aggregate-output --print-label",
     "start:production:components": "tsc --outDir ./dist && node ./terser.js",
     "start:production:figma": "pnpm dt export-variables && pnpm dt build-tokens && pnpm dt build-styles",

package/dist/split-container.d.ts

@@ -1,31 +0,0 @@
-import './menu.js';
-import './menu.options.js';
-import { LitElement, type PropertyValueMap } from 'lit';
-import { type Placement } from '@floating-ui/dom';
-declare global {
-    interface HTMLElementTagNameMap {
-        'glide-core-split-container': GlideCoreSplitContainer;
-    }
-}
-/**
- * @description A pair of buttons. One is the primary action. The other controls a menu of alternate actions.
- *
- * @slot - One or more of `<glide-core-menu-link>` or `<glide-core-menu-button>`.
- * @slot primary-action - One of either `<glide-core-split-button>` or `<glide-core-split-link>`.
- *
- */
-export default class GlideCoreSplitContainer extends LitElement {
-    #private;
-    static shadowRootOptions: ShadowRootInit;
-    static styles: import("lit").CSSResult[];
-    menulabel: string;
-    open: boolean;
-    disabled: boolean;
-    placement: Placement;
-    variant: 'primary' | 'secondary';
-    size: 'large' | 'small';
-    firstUpdated(): void;
-    focus(options?: FocusOptions): void;
-    render(): import("lit").TemplateResult<1>;
-    willUpdate(changedProperties: PropertyValueMap<GlideCoreSplitContainer>): void;
-}

package/dist/split-container.js

@@ -1 +0,0 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var l,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(n=(r<3?l(n):r>3?l(t,i,n):l(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreSplitButton from"./split-button.js";import GlideCoreSplitLink from"./split-link.js";import styles from"./split-container.styles.js";let GlideCoreSplitContainer=class GlideCoreSplitContainer extends LitElement{constructor(){super(...arguments),this.menulabel="",this.open=!1,this.disabled=!1,this.placement="bottom-end",this.variant="primary",this.size="large",this.#e=createRef(),this.#t=createRef(),this.#i=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.#o(),this.#l();const e=this.#i.value?.assignedNodes().at(0);(e instanceof GlideCoreSplitButton||e instanceof GlideCoreSplitLink)&&(e.disabled=this.disabled,e.variant=this.variant,e.size=this.size)}focus(e){const t=this.#i.value?.assignedNodes()?.at(0);t instanceof HTMLElement&&t.focus(e)}render(){return html`<div class="${classMap({component:!0,disabled:this.disabled})}"><slot name="primary-action" @slotchange="${this.#r}" ${ref(this.#i)} data-test="primary-action"></slot><span class="${classMap({divider:!0,[this.variant]:!0})}" data-test="split-divider"></span><glide-core-menu ?open="${this.open}" size="${this.size}" placement="${this.placement}"><button slot="target" type="button" class="${classMap({"menu-button":!0,[this.variant]:!0,[this.size]:!0})}" ?disabled="${this.disabled}" aria-label="${this.menulabel}" data-test="split-menu-button" ${ref(this.#t)}><svg width="16" height="16" viewBox="0 0 24 24" fill="none" role="presentation"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button><glide-core-menu-options><slot @slotchange="${this.#n}" ${ref(this.#e)}></slot></glide-core-menu-options></glide-core-menu></div>`}willUpdate(e){const t=this.#i.value?.assignedNodes().at(0);this.hasUpdated&&(t instanceof GlideCoreSplitButton||t instanceof GlideCoreSplitLink)&&(e.has("disabled")&&(t.disabled=this.disabled),e.has("variant")&&(t.variant=this.variant),e.has("size")&&(t.size=this.size))}#e;#t;#i;#n(){this.#o()}#r(){this.#l()}#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}#l(){owSlot(this.#i.value),owSlotType(this.#i.value,[GlideCoreSplitButton,GlideCoreSplitLink])}};__decorate([property({attribute:"menu-label",reflect:!0})],GlideCoreSplitContainer.prototype,"menulabel",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreSplitContainer.prototype,"open",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreSplitContainer.prototype,"disabled",void 0),__decorate([property({attribute:"menu-placement",reflect:!0})],GlideCoreSplitContainer.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreSplitContainer.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreSplitContainer.prototype,"size",void 0),GlideCoreSplitContainer=__decorate([customElement("glide-core-split-container")],GlideCoreSplitContainer);export default GlideCoreSplitContainer;

package/dist/split-container.styles.js

@@ -1,132 +0,0 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(".menu-button:focus-visible")}
-  `,css`
-    .component {
-      display: inline-flex;
-      position: relative;
-
-      & .divider {
-        inline-size: 1px;
-
-        &.primary {
-          background-color: var(--glide-core-border-base-light);
-        }
-
-        &.secondary {
-          background-color: var(--glide-core-border-primary);
-        }
-      }
-
-      &:not(.disabled):hover {
-        & .divider {
-          background-color: transparent;
-        }
-      }
-
-      &.disabled,
-      &.disabled:hover {
-        cursor: not-allowed;
-
-        & .divider {
-          background-color: var(--glide-core-border-base-light);
-        }
-      }
-
-      & .menu-button {
-        align-items: center;
-        border-color: transparent;
-        border-radius: 0 0.75rem 0.75rem 0;
-        border-style: solid;
-        border-width: 1px 1px 1px 0;
-        cursor: pointer;
-        display: inline-flex;
-        font-family: var(--glide-core-heading-xxs-font-family);
-        font-style: var(--glide-core-heading-xxs-font-style);
-        font-weight: var(--glide-core-heading-xxs-font-weight);
-        gap: 0.625rem;
-        justify-content: center;
-        padding-block: var(--glide-core-spacing-xs);
-        padding-inline: var(--glide-core-spacing-xs);
-        text-decoration: none;
-        transition-duration: 150ms;
-        transition-property: color, background-color, border-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        user-select: none;
-
-        &:focus {
-          outline: none;
-        }
-
-        &:disabled {
-          cursor: default;
-          opacity: 1;
-          pointer-events: none;
-        }
-
-        &.primary {
-          background-color: var(--glide-core-surface-primary);
-          border-color: transparent;
-          color: var(--glide-core-text-selected);
-
-          &:disabled {
-            background-color: var(--glide-core-surface-disabled);
-            border-color: transparent;
-            color: var(--glide-core-text-tertiary-disabled);
-          }
-
-          &:not(:disabled):active {
-            background-color: var(--glide-core-surface-selected-hover);
-            border-color: transparent;
-            color: var(--glide-core-text-selected);
-          }
-
-          &:not(:active):hover:not(:disabled) {
-            background-color: var(--glide-core-surface-hover);
-            border-color: transparent;
-            box-shadow: var(--glide-core-glow-sm);
-            color: var(--glide-core-text-primary);
-          }
-        }
-
-        &.secondary {
-          background-color: transparent;
-          border-color: var(--glide-core-border-primary);
-          color: var(--glide-core-text-primary);
-
-          &:disabled {
-            background-color: var(--glide-core-surface-disabled);
-            border-color: transparent;
-            color: var(--glide-core-text-tertiary-disabled);
-          }
-
-          &:not(:disabled):active {
-            background-color: var(--glide-core-surface-selected-hover);
-            border-color: transparent;
-            color: var(--glide-core-text-selected);
-          }
-
-          &:not(:active):hover:not(:disabled) {
-            background-color: var(--glide-core-surface-hover);
-            border-color: transparent;
-            box-shadow: var(--glide-core-glow-sm);
-            color: var(--glide-core-text-primary);
-          }
-        }
-
-        &.small {
-          block-size: 1.75rem;
-          box-sizing: border-box;
-          font-size: var(--glide-core-body-xs-font-size);
-          line-height: 1rem;
-          min-inline-size: fit-content;
-        }
-
-        &.large {
-          block-size: 2.125rem;
-          box-sizing: border-box;
-          font-size: var(--glide-core-body-xxs-font-size);
-          line-height: 1.5rem;
-        }
-      }
-    }
-  `];

package/dist/split-container.test.basics.d.ts

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