@crowdstrike/glide-core 0.7.0 → 0.9.0

package/package.json

@@ -1,19 +1,18 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
+  "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/CrowdStrike/glide-core.git",
-    "directory": "packages/components"
+    "url": "https://github.com/CrowdStrike/glide-core.git"
   },
-  "type": "module",
   "files": [
     "dist",
+    "!dist/eslint",
     "!dist/icons/storybook.*",
-    "!dist/src",
     "!dist/storybook",
     "!dist/*.test.js",
     "!dist/*.stories.js"
@@ -29,38 +28,42 @@
     "./styles/*": null,
     "./label.js": null,
     "./toasts.toast.js": null,
-    "./library/set-containing-block.js": "./dist/library/set-containing-block.js",
     "./styles/fonts.css": "./dist/styles/fonts.css",
     "./styles/variables.css": "./dist/styles/variables.css"
   },
-  "engines": {
-    "node": ">= 20",
-    "pnpm": ">= 8"
-  },
   "dependencies": {
     "@floating-ui/dom": "^1.6.8",
     "@shoelace-style/localize": "^3.1.2",
-    "composed-offset-position": "^0.0.6",
     "nanoid": "^5.0.7",
     "ow": "^1.1.1"
   },
+  "peerDependencies": {
+    "lit": "^3.1.0"
+  },
   "devDependencies": {
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.1",
     "@crowdstrike/design-tokens": "^2.0.0",
+    "@eslint/eslintrc": "^3.0.2",
     "@eslint/js": "^8.56.0",
     "@open-wc/testing": "^3.2.2",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/addon-links": "^8.2.1",
-    "@storybook/blocks": "^8.2.1",
-    "@storybook/core-events": "^8.2.1",
-    "@storybook/manager-api": "^8.2.1",
-    "@storybook/preview-api": "^8.2.1",
-    "@storybook/theming": "^8.2.1",
-    "@storybook/web-components": "^8.2.1",
-    "@storybook/web-components-vite": "^8.2.1",
+    "@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",
     "@stylistic/eslint-plugin": "^1.7.0",
+    "@types/eslint": "^8.56.7",
     "@types/mocha": "^10.0.6",
     "@types/sinon": "^17.0.3",
+    "@typescript-eslint/rule-tester": "^8.0.1",
+    "@typescript-eslint/types": "^8.0.1",
+    "@typescript-eslint/utils": "^8.0.1",
     "@web/dev-server-esbuild": "^0.3.6",
     "@web/dev-server-rollup": "^0.6.1",
     "@web/test-runner": "^0.18.0",
@@ -73,12 +76,15 @@
     "eslint-plugin-lit": "^1.11.0",
     "eslint-plugin-lit-a11y": "^4.1.2",
     "eslint-plugin-no-only-tests": "^3.1.0",
+    "eslint-plugin-no-skip-tests": "^1.1.0",
     "eslint-plugin-sort-class-members": "^1.20.0",
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
     "eslint-plugin-unicorn": "^50.0.1",
     "globals": "^13.24.0",
     "globby": "^14.0.0",
     "http-server": "^14.1.1",
+    "husky": "^8.0.3",
+    "is-ci": "^3.0.1",
     "lint-staged": "^14.0.1",
     "lit": "^3.1.2",
     "lit-analyzer": "^2.0.3",
@@ -90,7 +96,7 @@
     "prettier": "3.1.0",
     "rimraf": "^5.0.7",
     "sinon": "^17.0.1",
-    "storybook": "^8.2.1",
+    "storybook": "^8.2.7",
     "stylelint": "^16.3.1",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "^6.0.4",
@@ -100,11 +106,12 @@
     "terser": "^5.31.1",
     "ts-lit-plugin": "^2.0.2",
     "typescript": "^5.3.3",
-    "typescript-eslint": "^7.8.0",
-    "@crowdstrike/glide-core-eslint-plugin": "0.0.0"
+    "typescript-eslint": "^8.0.1",
+    "vitest": "^1.4.0"
   },
-  "peerDependencies": {
-    "lit": "^3.1.0"
+  "engines": {
+    "node": ">= 20",
+    "pnpm": ">= 8"
   },
   "scripts": {
     "start": "per-env",
@@ -120,18 +127,22 @@
     "format:production": "prettier . --check && stylelint '**/*.styles.ts' --custom-syntax postcss-lit --no-color",
     "lint": "per-env",
     "lint:development": "npm-run-all --print-name lint:development:*",
-    "lint:development:eslint": "eslint . --fix",
+    "lint:development:eslint": "tsc --outDir ./dist && eslint . --fix",
     "lint:development:lit-analyzer": "lit-analyzer **/*.ts",
     "lint:production": "npm-run-all --parallel --aggregate-output --print-label lint:production:*",
-    "lint:production:eslint": "eslint .",
+    "lint:production:eslint": "tsc --outDir ./dist && eslint .",
     "lint:production:lit-analyzer": "lit-analyzer **/*.ts",
     "typecheck": "tsc --noEmit",
     "test": "per-env",
-    "test:development": "npm-run-all --parallel test:development:* start:production:stylesheets",
+    "test:development": "npm-run-all --parallel test:development:serve test:development:web-test-runner start:production:stylesheets",
     "test:development:serve": "npx http-server dist/coverage/lcov-report --silent",
     "test:development:web-test-runner": "web-test-runner --watch",
+    "test:development:vitest": "vitest --config ./vitest.config.js",
+    "test:development:vitest:comment": "Vitest is excluded from `test:development` because it muddies the console when running alongside Web Test Runner.",
     "test:production": "npm-run-all --parallel test:production:* start:production:stylesheets --aggregate-output --print-label",
     "test:production:web-test-runner": "web-test-runner",
-    "postinstall": "pnpm dlx playwright@1.45.3 install --with-deps"
+    "test:production:vitest": "vitest run --config ./vitest.config.js",
+    "postinstall": "pnpm dlx playwright@1.45.3 install --with-deps",
+    "release": "changeset publish"
   }
 }

package/dist/drawer.test.floating-components.d.ts

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

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

@@ -1,51 +0,0 @@
-import './drawer.js';
-import { expect, fixture, html } from '@open-wc/testing';
-import GlideCoreDrawer from './drawer.js';
-import GlideCoreTreeItemMenu from './tree.item.menu.js';
-GlideCoreDrawer.shadowRootOptions.mode = 'open';
-GlideCoreTreeItemMenu.shadowRootOptions.mode = 'open';
-it('sets containing block for tooltips', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>
-      <div>Some other element</div>
-      <glide-core-tooltip>
-        Tooltip
-        <span slot="target">Target</span>
-      </glide-core-tooltip>
-    </glide-core-drawer>`);
-    const containingBlock = drawer.shadowRoot?.querySelector('aside');
-    drawer.open();
-    const tooltip = drawer.querySelector('glide-core-tooltip');
-    expect(tooltip?.containingBlock === containingBlock).to.be.true;
-});
-it('sets containing block for menus', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>
-      <glide-core-menu>
-        <glide-core-menu-options>
-          <glide-core-menu-link label="One" url="/one"> </glide-core-menu-link>
-        </glide-core-menu-options>
-
-        <div slot="target">Target</div>
-      </glide-core-menu>
-    </glide-core-drawer>`);
-    const containingBlock = drawer.shadowRoot?.querySelector('aside');
-    drawer.open();
-    const menu = drawer.querySelector('glide-core-menu');
-    expect(menu?.containingBlock === containingBlock).to.be.true;
-});
-it('sets containing block for tree item menu', async () => {
-    const drawer = await fixture(html `<glide-core-drawer>
-      <glide-core-tree>
-        <glide-core-tree-item label="yup">
-          <glide-core-tree-item-menu slot="menu">
-            <glide-core-menu-link label="Edit" url="/edit">
-            </glide-core-menu-link>
-          </glide-core-tree-item-menu>
-        </glide-core-tree-item>
-      </glide-core-tree>
-    </glide-core-drawer>`);
-    const containingBlock = drawer.shadowRoot?.querySelector('aside');
-    drawer.open();
-    const treeItemMenu = drawer.querySelector('glide-core-tree-item-menu');
-    const menu = treeItemMenu?.shadowRoot?.querySelector('glide-core-menu');
-    expect(menu?.containingBlock === containingBlock).to.be.true;
-});

package/dist/library/set-containing-block.d.ts

@@ -1,15 +0,0 @@
-interface Arguments {
-    elements: Element[];
-    containingBlock: Element;
-}
-/**
- * Sets the containing block for all child elements that might contain
- * floating-ui components (i.e. tooltips, popovers, or menus),
- * for cases where the containing block element is inside a closed shadow DOM,
- * and therefore wouldn't be able to be detected by floating-ui's getOffsetParent calculations.
- * Necessary when the containing block has something like a backdrop-filter
- * https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
- * https://github.com/floating-ui/floating-ui/issues/2955
- */
-export declare function setContainingBlock({ elements, containingBlock }: Arguments): void;
-export {};

package/dist/library/set-containing-block.js

@@ -1 +0,0 @@
-import GlideCoreMenu from"../menu.js";import GlideCoreTooltip from"../tooltip.js";import GlideCoreTree from"../tree.js";export function setContainingBlock({elements:o,containingBlock:e}){const i=o.filter((o=>o instanceof GlideCoreTooltip||o instanceof GlideCoreMenu||o instanceof GlideCoreTree));for(const o of i)o.setContainingBlock(e)}

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

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