@crowdstrike/glide-core 0.5.1 → 0.6.0

package/dist/split-container.styles.js

@@ -0,0 +1,134 @@
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    .component {
+      display: inline-flex;
+      gap: 0;
+
+      & .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;
+        }
+
+        &:focus-visible {
+          ${focusOutline};
+        }
+
+        &: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

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

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

@@ -0,0 +1,440 @@
+import './split-button.js';
+import './split-container.js';
+import './split-link.js';
+import { elementUpdated, expect, fixture, html, waitUntil, } from '@open-wc/testing';
+import GlideCoreSplitButton from './split-button.js';
+import GlideCoreSplitContainer from './split-container.js';
+import GlideCoreSplitLink from './split-link.js';
+import expectArgumentError from './library/expect-argument-error.js';
+import sinon from 'sinon';
+GlideCoreSplitContainer.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-split-container')).to.equal(GlideCoreSplitContainer);
+});
+it('is accessible', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+      <glide-core-menu-link label="Two" url="/two"></glide-core-menu-link>
+      <glide-core-menu-button label="Three"></glide-core-menu-button>
+    </glide-core-split-container>
+  `);
+    await expect(component).to.be.accessible();
+});
+it('should render a split button, a divider, and a menu button', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot?.querySelector('[data-test="split-menu-button"]'))
+        .to.be.not.null;
+    expect(component.shadowRoot?.querySelector('[data-test="split-divider"]')).to
+        .be.not.null;
+    const slot = component?.shadowRoot?.querySelector('slot[data-test="primary-action"]');
+    expect(slot).to.be.not.null;
+    const defaultSlotValue = slot.assignedNodes()?.at(0);
+    expect(defaultSlotValue instanceof GlideCoreSplitButton).to.be.true;
+    expect(defaultSlotValue?.textContent).to.equal('Button');
+});
+it('should render a split link, a divider, and a menu button', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label">
+      <glide-core-split-link slot="primary-action">Link</glide-core-split-link>
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot?.querySelector('[data-test="split-menu-button"]'))
+        .to.be.not.null;
+    expect(component.shadowRoot?.querySelector('[data-test="split-divider"]')).to
+        .be.not.null;
+    const slot = component?.shadowRoot?.querySelector('slot[data-test="primary-action"]');
+    expect(slot).to.be.not.null;
+    const defaultSlotValue = slot.assignedNodes()?.at(0);
+    expect(defaultSlotValue instanceof GlideCoreSplitLink).to.be.true;
+    expect(defaultSlotValue?.textContent).to.equal('Link');
+});
+it('does not set the menu to "open" by default', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot?.querySelector('glide-core-menu')).to.not.have.attribute('open');
+});
+it('sets the menu component to "open" when the "open" attribute is set', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label" open>
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot?.querySelector('glide-core-menu')).to.have.attribute('open');
+});
+it('applies appropriate classes and attributes when "size" is set to "small"', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label" size="small">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('size', 'small');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('small')).to.be.true;
+    expect(component.shadowRoot?.querySelector('glide-core-menu')).to.have.attribute('size', 'small');
+});
+it('applies appropriate classes and attributes when "size" is set to "large"', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label" size="large">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('size', 'large');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('large')).to.be.true;
+    expect(component.shadowRoot?.querySelector('glide-core-menu')).to.have.attribute('size', 'large');
+});
+it('applies appropriate classes and attributes by default as "large" when "size" is not set', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('size', 'large');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('large')).to.be.true;
+    expect(component.shadowRoot?.querySelector('glide-core-menu')).to.have.attribute('size', 'large');
+});
+it('applies appropriate classes and attributes when "size" is dynamically changed using the split button', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label" size="large">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('size', 'large');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('large')).to.be.true;
+    expect(component.shadowRoot?.querySelector('glide-core-menu')).to.have.attribute('size', 'large');
+    component.size = 'small';
+    await elementUpdated(component);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('size', 'small');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('small')).to.be.true;
+    expect(component.shadowRoot?.querySelector('glide-core-menu')).to.have.attribute('size', 'small');
+});
+it('applies appropriate classes and attributes when "size" is dynamically changed using the link button', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label" size="large">
+      <glide-core-split-link slot="primary-action" url="/"
+        >Button</glide-core-split-link
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('size', 'large');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('large')).to.be.true;
+    expect(component.shadowRoot?.querySelector('glide-core-menu')).to.have.attribute('size', 'large');
+    component.size = 'small';
+    await elementUpdated(component);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('size', 'small');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('small')).to.be.true;
+    expect(component.shadowRoot?.querySelector('glide-core-menu')).to.have.attribute('size', 'small');
+});
+it('applies appropriate classes and sets the "variant" to "primary" by default', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('variant', 'primary');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('primary')).to.be.true;
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-divider"]')
+        ?.classList.contains('primary')).to.be.true;
+});
+it('applies appropriate classes when "variant" is set to "primary"', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label" variant="primary">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('variant', 'primary');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('primary')).to.be.true;
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-divider"]')
+        ?.classList.contains('primary')).to.be.true;
+});
+it('applies appropriate classes when "variant" is set to "secondary"', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label" variant="secondary">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('variant', 'secondary');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('secondary')).to.be.true;
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-divider"]')
+        ?.classList.contains('secondary')).to.be.true;
+});
+it('applies appropriate classes and attributes when "variant" is dynamically changed using the split button', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label" variant="primary">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('variant', 'primary');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('primary')).to.be.true;
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-divider"]')
+        ?.classList.contains('primary')).to.be.true;
+    component.variant = 'secondary';
+    await elementUpdated(component);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('variant', 'secondary');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('secondary')).to.be.true;
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-divider"]')
+        ?.classList.contains('secondary')).to.be.true;
+});
+it('applies appropriate classes and attributes when "variant" is dynamically changed using the link button', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label" variant="primary">
+      <glide-core-split-link slot="primary-action" url="/"
+        >Button</glide-core-split-link
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('variant', 'primary');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('primary')).to.be.true;
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-divider"]')
+        ?.classList.contains('primary')).to.be.true;
+    component.variant = 'secondary';
+    await elementUpdated(component);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('variant', 'secondary');
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.classList.contains('secondary')).to.be.true;
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="split-divider"]')
+        ?.classList.contains('secondary')).to.be.true;
+});
+it('sets the appropriate classes and attributes when the "disabled" attribute is set', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label" disabled>
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('disabled');
+    expect(component.shadowRoot?.querySelector('[data-test="split-menu-button"]')).to.have.attribute('disabled');
+    expect(component.shadowRoot?.querySelector('[data-test="split-menu-button"]')).to.have.attribute('disabled');
+});
+it('applies appropriate classes and attributes when "disabled" is dynamically changed using the split button', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.not.have.attribute('disabled');
+    expect(component.shadowRoot?.querySelector('[data-test="split-menu-button"]')).to.not.have.attribute('disabled');
+    component.disabled = true;
+    await elementUpdated(component);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('disabled');
+    expect(component.shadowRoot?.querySelector('[data-test="split-menu-button"]')).to.have.attribute('disabled');
+});
+it('applies appropriate classes and attributes when "disabled" is dynamically changed using the link button', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label">
+      <glide-core-split-link slot="primary-action" url="/"
+        >Button</glide-core-split-link
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.not.have.attribute('disabled');
+    expect(component.shadowRoot?.querySelector('[data-test="split-menu-button"]')).to.not.have.attribute('disabled');
+    component.disabled = true;
+    await elementUpdated(component);
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.attribute('disabled');
+    expect(component.shadowRoot?.querySelector('[data-test="split-menu-button"]')).to.have.attribute('disabled');
+});
+it('sets the default "menu-placement" as "bottom-end"', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot?.querySelector('glide-core-menu')).to.have.attribute('placement', 'bottom-end');
+});
+it('sets the "menu-placement" attribute as specified', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label" menu-placement="bottom">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot?.querySelector('glide-core-menu')).to.have.attribute('placement', 'bottom');
+});
+it('focuses the "primary-action" slotted element when the container component is focused', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label" menu-placement="bottom">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    component.focus();
+    expect(component.shadowRoot
+        ?.querySelector('[data-test="primary-action"]')
+        ?.assignedNodes()
+        ?.at(0)).to.have.focus;
+});
+it('throws an error when the default slot is empty', async () => {
+    await expectArgumentError(() => fixture(html `<glide-core-split-container menu-label="label">
+        <glide-core-split-button slot="primary-action"
+          >Button</glide-core-split-button
+        >
+      </glide-core-split-container>`));
+});
+it('throws an error when the default slot is an unsupported type', async () => {
+    await expectArgumentError(() => fixture(html `<glide-core-split-container menu-label="label">
+        <glide-core-split-button slot="primary-action">
+          Button
+        </glide-core-split-button>
+        <div>Option</div>
+      </glide-core-split-container>`));
+    // Menu is rendered asynchronously outside of Split Container's lifecycle
+    // and asserts against its default slot. That assertion, which is expected
+    // to fail in this case, results in an unhandled rejection that gets logged.
+    // `console.error` is stubbed so the logs aren't muddied.
+    const stub = sinon.stub(console, 'error');
+    // Menu asserts against its default slot once on `firstUpdated` and
+    // again on "slotchange". So we wait until the stub has been called
+    // twice before restoring it.
+    await waitUntil(() => stub.calledTwice);
+    stub.restore();
+});

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

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

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

@@ -0,0 +1,20 @@
+import './split-container.js';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreSplitContainer from './split-container.js';
+GlideCoreSplitContainer.shadowRootOptions.mode = 'open';
+it('the menu opens when the menu button is clicked', async () => {
+    const component = await fixture(html `
+    <glide-core-split-container menu-label="label">
+      <glide-core-split-button slot="primary-action"
+        >Button</glide-core-split-button
+      >
+      <glide-core-menu-link label="One" url="/one"></glide-core-menu-link>
+    </glide-core-split-container>
+  `);
+    expect(component.shadowRoot?.querySelector('glide-core-menu')).to.not.have.attribute('open');
+    component.shadowRoot
+        ?.querySelector('[data-test="split-menu-button"]')
+        ?.click();
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('glide-core-menu')).to.have.attribute('open');
+});

package/dist/split-link.d.ts

@@ -0,0 +1,25 @@
+import './menu.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-split-link': GlideCoreSplitLink;
+    }
+}
+/**
+ * @description - A link to be used in the `primary-action` slot of `glide-core-split-container`.
+ *
+ * @slot prefix - An optional icon slot to display before the label.
+ * @slot - A label for the contents of the link.
+ */
+export default class GlideCoreSplitLink extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    url?: string;
+    disabled: boolean;
+    variant: 'primary' | 'secondary';
+    size: 'large' | 'small';
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+    private hasPrefixSlot;
+}

package/dist/split-link.js

@@ -0,0 +1 @@
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./menu.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot,owSlotType}from"./library/ow.js";import styles from"./split-button.styles.js";let GlideCoreSplitLink=class GlideCoreSplitLink extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.variant="primary",this.size="large",this.hasPrefixSlot=!1,this.#e=createRef(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[Text])}render(){return this.disabled?html`<span class="${classMap({component:!0,disabled:!0,[this.variant]:!0,[this.size]:!0,"has-prefix":this.hasPrefixSlot})}" aria-disabled="true" role="link" @keydown="${this.#o}" data-test="split-link"><slot name="prefix" @slotchange="${this.#l}" ${ref(this.#t)} data-test="prefix-slot"></slot><slot @slotchange="${this.#i}" ${ref(this.#e)} data-test="default-slot"></slot></span>`:html`<a href="${ifDefined(this.url)}" class="${classMap({component:!0,[this.variant]:!0,[this.size]:!0,"has-prefix":this.hasPrefixSlot})}" @keydown="${this.#o}" data-test="split-link"><slot name="prefix" @slotchange="${this.#l}" ${ref(this.#t)} data-test="prefix-slot"></slot><slot @slotchange="${this.#i}" ${ref(this.#e)} data-test="default-slot"></slot></a>`}#e;#t;#i(){owSlot(this.#e.value),owSlotType(this.#e.value,[Text])}#o(e){" "===e.key&&this.url?.length&&window.open(this.url)}#l(){const e=this.#t.value?.assignedNodes();this.hasPrefixSlot=!!(e&&e.length>0)}};__decorate([property({reflect:!0})],GlideCoreSplitLink.prototype,"url",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreSplitLink.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreSplitLink.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreSplitLink.prototype,"size",void 0),__decorate([state()],GlideCoreSplitLink.prototype,"hasPrefixSlot",void 0),GlideCoreSplitLink=__decorate([customElement("glide-core-split-link")],GlideCoreSplitLink);export default GlideCoreSplitLink;

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

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