@quartzds/core 1.0.0-beta.9 → 1.0.0-beta.90

package/hydrate/package.json

@@ -2,5 +2,11 @@
   "name": "@quartzds/core/hydrate",
   "description": "qds component hydration app.",
   "main": "index.js",
-  "types": "index.d.ts"
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  }
 }

package/loader/cdn.js

@@ -1,7 +1,6 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
-module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -1,7 +1,6 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
-module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -8,7 +8,10 @@ export interface CustomElementsDefineOptions {
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
-export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
 export declare function applyPolyfills(): Promise<void>;
 
 /**

package/loader/index.es2017.js

@@ -1,7 +1,6 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
-export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm/loader.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -1,8 +1,7 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
-export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm/loader.js';
+export * from '../dist/esm/loader.js';

package/package.json

@@ -1,30 +1,31 @@
 {
   "name": "@quartzds/core",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0-beta.90",
   "description": "Quartz design system web components",
   "homepage": "https://github.com/quartzds/core-foundations/tree/main/packages/core",
   "bugs": {
     "url": "https://github.com/quartzds/core-foundations/issues"
   },
   "repository": "https://github.com/quartzds/core-foundations",
-  "license": "LGPL-2.1-only",
+  "license": "Apache-2.0",
   "exports": {
     ".": {
       "types": "./components/index.d.ts",
-      "import": "./components/index.js"
+      "default": "./components/index.js"
+    },
+    "./components": {
+      "types": "./components/index.d.ts",
+      "default": "./components/index.js"
     },
     "./components/*": "./components/*",
-    "./components/floating-ui.dom.esm.js": null,
-    "./components/helpers.js": null,
-    "./components/icon.js": null,
-    "./components/label.js": null,
+    "./components/p-*": null,
     "./docs.json": {
       "types": "./dist/docs.d.ts",
       "default": "./dist/docs.json"
     },
     "./hydrate": {
       "types": "./hydrate/index.d.ts",
-      "require": "./hydrate/index.js"
+      "default": "./hydrate/index.js"
     },
     "./loader": {
       "types": "./loader/index.d.ts",
@@ -32,7 +33,8 @@
       "require": "./loader/index.cjs.js"
     },
     "./package.json": "./package.json",
-    "./styles/*": "./styles/*"
+    "./styles/*": "./styles/*",
+    "./CHANGELOG.md": "./CHANGELOG.md"
   },
   "module": "./components/index.js",
   "types": "./components/index.d.ts",
@@ -50,20 +52,17 @@
     "styles/**"
   ],
   "scripts": {
-    "build": "run-p \"build:*\"",
-    "build:cem": "cem analyze",
+    "build": "run-p -s \"build:*\"",
     "build:stencil": "stencil build --docs",
-    "build:tailwind": "tailwind -c .storybook/tailwind.config.ts -o dist/tailwind.css",
-    "clean": "rimraf components/ dist/ hydrate/ loader/ node_modules/ playwright-report/ styles/ storybook-static/ test-results/",
-    "dev": "run-p \"dev:*\" \"storybook:dev\"",
-    "dev:cem": "cem analyze --watch",
+    "build:cem": "cem analyze",
+    "clean": "rimraf .turbo/ .stencil/ components/ dist/ hydrate/ loader/ node_modules/ playwright-report/ styles/ test-results/ www/",
+    "dev": "run-p -s \"dev:*\"",
     "dev:stencil": "stencil build --docs --watch",
-    "dev:tailwind": "tailwind -c .storybook/tailwind.config.ts -o dist/tailwind.css --watch",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
+    "dev:cem": "cem analyze --watch",
     "test:e2e": "playwright test",
     "test:e2e:install": "playwright install --with-deps chromium firefox"
   },
+  "browserslist": "extends @quartzds/browserslist-config",
   "eslintConfig": {
     "overrides": [
       {
@@ -121,6 +120,7 @@
                 "class",
                 "indeterminate",
                 "innerHTML",
+                "onSlotchange",
                 "spellcheck"
               ]
             }
@@ -136,27 +136,7 @@
         }
       },
       {
-        "files": "src/components/*/*.stories.ts",
-        "rules": {
-          "@typescript-eslint/await-thenable": "off",
-          "@typescript-eslint/no-confusing-void-expression": "off",
-          "storybook/csf-component": "off",
-          "storybook/no-title-property-in-meta": "off",
-          "unicorn/prevent-abbreviations": [
-            "error",
-            {
-              "allowList": {
-                "args": true
-              }
-            }
-          ]
-        }
-      },
-      {
-        "files": [
-          "*.e2e.ts",
-          "create-story.ts"
-        ],
+        "files": "*.e2e.ts",
         "rules": {
           "import/no-extraneous-dependencies": [
             "error",
@@ -170,61 +150,45 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.0.0",
-    "@quartzds/generic-icons-core": "^1.0.0-beta.1",
-    "@stencil/core": "^4.0.0",
+    "@stencil/core": "^4.27.0",
     "@types/node": "*",
-    "type-fest": "^3.0.0"
+    "type-fest": "^4.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.22.9",
-    "@babel/plugin-proposal-decorators": "7.22.7",
-    "@babel/plugin-proposal-export-default-from": "7.22.5",
-    "@babel/preset-env": "7.22.9",
-    "@babel/preset-typescript": "7.22.5",
-    "@custom-elements-manifest/analyzer": "0.8.3",
-    "@jest/globals": "29.6.1",
-    "@playwright/test": "1.36.1",
-    "@quartzds/browserslist-config": "1.1.1",
-    "@quartzds/generic-tokens-core": "1.0.0-beta.1",
-    "@quartzds/tailwind-preset": "1.0.0-beta.5",
-    "@stencil-community/postcss": "2.1.0",
-    "@stencil/angular-output-target": "0.7.1",
-    "@stencil/react-output-target": "0.5.3",
-    "@stencil/vue-output-target": "0.8.6",
-    "@storybook/addon-a11y": "7.0.26",
-    "@storybook/addon-docs": "7.0.26",
-    "@storybook/addon-essentials": "7.0.26",
-    "@storybook/addon-styling": "1.3.4",
-    "@storybook/builder-webpack5": "7.0.26",
-    "@storybook/mdx2-csf": "1.1.0",
-    "@storybook/web-components": "7.0.26",
-    "@storybook/web-components-webpack5": "7.0.26",
-    "@types/postcss-import": "14.0.0",
-    "@types/react": "18.2.14",
-    "babel-loader": "9.1.3",
-    "babel-plugin-macros": "3.1.0",
-    "core-js": "3.31.1",
-    "css-loader": "6.8.1",
-    "lit": "2.7.6",
-    "npm-run-all": "4.1.5",
-    "postcss": "8.4.26",
-    "postcss-import": "15.1.0",
-    "postcss-loader": "7.3.3",
-    "postcss-preset-env": "9.0.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "rimraf": "5.0.1",
-    "serve": "14.2.0",
-    "stencil-playwright": "0.2.0",
-    "storybook": "7.0.26",
-    "storybook-dark-mode": "3.0.0",
-    "style-loader": "3.3.3",
-    "tailwindcss": "3.3.2",
-    "typescript": "5.1.6",
-    "webpack": "5.88.1"
+    "@custom-elements-manifest/analyzer": "0.10.3",
+    "@jest/globals": "29.7.0",
+    "@playwright/test": "1.48.0",
+    "@quartzds/browserslist-config": "2.0.0-beta.3",
+    "@quartzds/generic-icons-core": "1.0.0-beta.12",
+    "@quartzds/generic-tokens": "1.0.0-beta.8",
+    "@stencil-community/postcss": "2.2.0",
+    "@stencil/angular-output-target": "0.10.2",
+    "@stencil/playwright": "0.2.1",
+    "@stencil/react-output-target": "0.7.4",
+    "@stencil/vue-output-target": "0.8.9",
+    "@types/postcss-import": "14.0.3",
+    "cssnano": "7.0.6",
+    "cssnano-preset-advanced": "7.0.6",
+    "npm-run-all2": "6.2.3",
+    "postcss": "8.4.47",
+    "postcss-import": "16.1.0",
+    "postcss-preset-env": "9.6.0",
+    "rimraf": "5.0.10",
+    "typescript": "5.6.3"
+  },
+  "peerDependencies": {
+    "typescript": ">=5.1"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   },
   "engines": {
     "node": ">=18.12.0"
   },
-  "customElements": "./dist/custom-elements.json"
+  "customElements": "./dist/custom-elements.json",
+  "storybook": {
+    "url": "https://main--6361be96430f623570308ec6.chromatic.com/"
+  }
 }

package/styles/core.css

@@ -1,44 +1,87 @@
 /**
-* SPDX-FileCopyrightText: © 2023 Schneider Electric
+* SPDX-FileCopyrightText: © 2024 Schneider Electric
 *
-* SPDX-License-Identifier: LGPL-2.1-only
+* SPDX-License-Identifier: Apache-2.0
 */
 
-figure {
+[dir='rtl'] {
+  --qds-direction-factor: -1;
+}
+
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  figure {
   display: flex;
   flex-direction: column;
   gap: var(--qds-figure-gap);
 }
 
-figcaption {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  figcaption {
   color: var(--qds-theme-figure-caption);
   font: var(--qds-figure-caption);
 }
 
-li,
-p,
-pre {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(li, p, pre) {
   color: var(--qds-theme-text-standard);
 }
 
-li,
-p {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(li, p) {
   font: var(--qds-text-standard);
 }
 
-:is(li, p) strong {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(li, p)
+  strong {
   font: var(--qds-text-emphasized);
 }
 
-pre {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  pre {
   font: var(--qds-code-standard);
 }
 
-pre strong {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  pre
+  strong {
   font: var(--qds-code-emphasized);
 }
 
-:is(li, p, span).qds-subdued {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(menu, ol, ul) {
+  padding-inline-start: var(--qds-list-item-standard-padding-indent-step);
+}
+
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(li, p, span).qds-subdued {
   color: var(--qds-theme-text-subdued);
   font: var(--qds-text-subdued);
 }
@@ -91,6 +134,10 @@ pre strong {
 }
 
 :is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(
     .qds-accessory,
     .qds-main-subsection,
     .qds-main,
@@ -104,7 +151,11 @@ pre strong {
   background-color: transparent;
 }
 
-:is(.qds-panel, .qds-navigation, .qds-popup, .qds-accessory).qds-subdued {
+:is(
+    [class^='qds-']:not([class^='qds-platform-'], [class^='qds-theme-']),
+    [class*=' qds-']:not([class*=' qds-platform-'], [class*=' qds-theme-'])
+  )
+  :is(.qds-panel, .qds-navigation, .qds-popup, .qds-accessory).qds-subdued {
   box-shadow: none;
 }
 
@@ -377,3 +428,75 @@ pre strong {
 .qds-controls-jumbo .qds-related {
   gap: var(--qds-control-jumbo-gap-siblings-related);
 }
+
+.qds-interactive {
+  cursor: pointer;
+  user-select: none;
+}
+
+:is(
+    .qds-main-subsection,
+    .qds-navigation-subsection,
+    .qds-panel-subsection,
+    .qds-popup-subsection
+  ).qds-interactive:hover {
+  background-color: var(--qds-theme-interactive-background-hover);
+  text-decoration: none;
+}
+
+:is(
+    .qds-main-subsection,
+    .qds-navigation-subsection,
+    .qds-panel-subsection,
+    .qds-popup-subsection
+  ).qds-interactive:active {
+  background-color: var(--qds-theme-interactive-background-selected);
+  text-decoration: none;
+}
+
+.qds-control-group-inline {
+  display: flex;
+}
+
+.qds-control-group-inline > :first-child:not(:only-child) {
+  --qds-control-border-radius-top-right: 0px;
+  --qds-control-border-radius-bottom-right: 0px;
+  --qds-control-border-width-inline-end: 0px;
+}
+
+.qds-control-group-inline > :not(:first-child, :last-child) {
+  --qds-control-border-radius-top-left: 0px;
+  --qds-control-border-radius-top-right: 0px;
+  --qds-control-border-radius-bottom-right: 0px;
+  --qds-control-border-radius-bottom-left: 0px;
+  --qds-control-border-width-inline-end: 0px;
+}
+
+.qds-control-group-inline > :last-child:not(:only-child) {
+  --qds-control-border-radius-top-left: 0px;
+  --qds-control-border-radius-bottom-left: 0px;
+}
+
+.qds-control-group-block {
+  display: flex;
+  flex-direction: column;
+}
+
+.qds-control-group-block > :first-child:not(:only-child) {
+  --qds-control-border-radius-bottom-left: 0px;
+  --qds-control-border-radius-bottom-right: 0px;
+  --qds-control-border-width-block-end: 0px;
+}
+
+.qds-control-group-block > :not(:first-child, :last-child) {
+  --qds-control-border-radius-top-left: 0px;
+  --qds-control-border-radius-top-right: 0px;
+  --qds-control-border-radius-bottom-right: 0px;
+  --qds-control-border-radius-bottom-left: 0px;
+  --qds-control-border-width-block-end: 0px;
+}
+
+.qds-control-group-block > :last-child:not(:only-child) {
+  --qds-control-border-radius-top-left: 0px;
+  --qds-control-border-radius-top-right: 0px;
+}