@quartzds/core 1.0.0-beta.13 → 1.0.0-beta.130

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: © 2026 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: © 2026 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: © 2026 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: © 2026 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.13",
+  "version": "1.0.0-beta.130",
   "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",
@@ -47,184 +49,25 @@
     "dist/vscode.html-custom-data.json",
     "hydrate/**",
     "loader/**",
-    "styles/**"
+    "styles/**",
+    "CHANGELOG.md"
   ],
-  "scripts": {
-    "build": "run-p \"build:*\"",
-    "build:cem": "cem analyze",
-    "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",
-    "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",
-    "test:e2e": "playwright test",
-    "test:e2e:install": "playwright install --with-deps chromium firefox"
-  },
-  "eslintConfig": {
-    "overrides": [
-      {
-        "files": "src/components/*/*.tsx",
-        "rules": {
-          "class-methods-use-this": [
-            "error",
-            {
-              "exceptMethods": [
-                "componentDidLoad",
-                "componentDidRender",
-                "componentDidUpdate",
-                "componentShouldUpdate",
-                "componentWillLoad",
-                "componentWillRender",
-                "componentWillUpdate",
-                "connectedCallback",
-                "disconnectedCallback",
-                "render"
-              ]
-            }
-          ],
-          "@typescript-eslint/explicit-function-return-type": [
-            "error",
-            {
-              "allowedNames": [
-                "render"
-              ]
-            }
-          ],
-          "@typescript-eslint/explicit-module-boundary-types": [
-            "error",
-            {
-              "allowedNames": [
-                "render"
-              ]
-            }
-          ],
-          "import/prefer-default-export": "off"
-        }
-      },
-      {
-        "files": "*.tsx",
-        "rules": {
-          "@typescript-eslint/no-unused-vars": [
-            "error",
-            {
-              "varsIgnorePattern": "h|Fragment"
-            }
-          ],
-          "react/no-unknown-property": [
-            "error",
-            {
-              "ignore": [
-                "class",
-                "indeterminate",
-                "innerHTML",
-                "spellcheck"
-              ]
-            }
-          ],
-          "unicorn/filename-case": [
-            "error",
-            {
-              "cases": {
-                "kebabCase": true
-              }
-            }
-          ]
-        }
-      },
-      {
-        "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"
-        ],
-        "rules": {
-          "import/no-extraneous-dependencies": [
-            "error",
-            {
-              "devDependencies": true
-            }
-          ]
-        }
-      }
-    ]
-  },
   "dependencies": {
+    "@chenglou/pretext": "^0.0.6",
     "@floating-ui/dom": "^1.0.0",
-    "@quartzds/generic-icons-core": "1.0.0-beta.3",
-    "@stencil/core": "^4.0.0",
+    "@stencil/core": "^4.37.0",
     "@types/node": "*",
     "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.4",
-    "@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.1.0",
-    "@storybook/addon-docs": "7.1.0",
-    "@storybook/addon-essentials": "7.1.0",
-    "@storybook/addon-styling": "1.3.4",
-    "@storybook/builder-webpack5": "7.1.0",
-    "@storybook/mdx2-csf": "1.1.0",
-    "@storybook/web-components": "7.1.0",
-    "@storybook/web-components-webpack5": "7.1.0",
-    "@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.27",
-    "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.1.0",
-    "storybook-dark-mode": "3.0.0",
-    "style-loader": "3.3.3",
-    "tailwindcss": "3.3.3",
-    "typescript": "5.1.6",
-    "webpack": "5.88.2"
+  "peerDependencies": {
+    "typescript": ">=5.1"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   },
   "engines": {
     "node": ">=18.12.0"
-  },
-  "customElements": "./dist/custom-elements.json"
+  }
 }

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;
 }
 
@@ -141,7 +192,10 @@ pre strong {
 .qds-main-subsection {
   background-color: var(--qds-theme-main-subsection-standard-background);
   border-radius: var(--qds-main-subsection-border-radius);
-  padding: var(--qds-main-subsection-padding);
+  padding: var(--qds-main-subsection-padding-top)
+    var(--qds-main-subsection-padding-end)
+    var(--qds-main-subsection-padding-bottom)
+    var(--qds-main-subsection-padding-start);
 }
 
 .qds-main-subsection,
@@ -149,10 +203,6 @@ pre strong {
   gap: var(--qds-main-subsection-gap-children-unrelated);
 }
 
-.qds-main-subsection.qds-emphasized {
-  box-shadow: var(--qds-theme-main-subsection-emphasized);
-}
-
 .qds-main-subsection.qds-related,
 .qds-main-subsection .qds-related {
   gap: var(--qds-main-subsection-gap-children-related);
@@ -161,8 +211,9 @@ pre strong {
 .qds-navigation {
   background-color: var(--qds-theme-navigation-background);
   border-radius: var(--qds-navigation-border-radius);
-  box-shadow: var(--qds-theme-navigation-elevation);
-  padding: var(--qds-navigation-padding);
+  box-shadow: var(--qds-navigation-elevation);
+  padding-block: var(--qds-navigation-padding-vertical);
+  padding-inline: var(--qds-navigation-padding-horizontal);
 }
 
 .qds-navigation,
@@ -200,10 +251,6 @@ pre strong {
   gap: var(--qds-navigation-subsection-gap-children-unrelated);
 }
 
-.qds-navigation-subsection.qds-emphasized {
-  box-shadow: var(--qds-theme-navigation-subsection-emphasized);
-}
-
 .qds-navigation-subsection.qds-related,
 .qds-navigation-subsection .qds-related {
   gap: var(--qds-navigation-subsection-gap-children-related);
@@ -243,7 +290,10 @@ pre strong {
 .qds-panel-subsection {
   background-color: var(--qds-theme-panel-subsection-standard-background);
   border-radius: var(--qds-panel-subsection-border-radius);
-  padding: var(--qds-panel-subsection-padding);
+  padding: var(--qds-panel-subsection-padding-top)
+    var(--qds-panel-subsection-padding-end)
+    var(--qds-panel-subsection-padding-bottom)
+    var(--qds-panel-subsection-padding-start);
 }
 
 .qds-panel-subsection,
@@ -251,10 +301,6 @@ pre strong {
   gap: var(--qds-panel-subsection-gap-children-unrelated);
 }
 
-.qds-panel-subsection.qds-emphasized {
-  box-shadow: var(--qds-theme-panel-subsection-emphasized);
-}
-
 .qds-panel-subsection.qds-related,
 .qds-panel-subsection .qds-related {
   gap: var(--qds-panel-subsection-gap-children-related);
@@ -263,8 +309,11 @@ pre strong {
 .qds-popup {
   background-color: var(--qds-theme-popup-background);
   border-radius: var(--qds-popup-border-radius);
-  box-shadow: var(--qds-theme-popup-elevation);
-  padding: var(--qds-popup-padding);
+  box-shadow: var(--qds-popup-elevation);
+  padding: var(--qds-popup-subsection-padding-top)
+    var(--qds-popup-subsection-padding-end)
+    var(--qds-popup-subsection-padding-bottom)
+    var(--qds-popup-subsection-padding-start);
 }
 
 .qds-popup,
@@ -298,10 +347,6 @@ pre strong {
   gap: var(--qds-popup-subsection-gap-children-unrelated);
 }
 
-.qds-popup-subsection.qds-emphasized {
-  box-shadow: var(--qds-theme-popup-subsection-emphasized);
-}
-
 .qds-popup-subsection.qds-related,
 .qds-popup-subsection .qds-related {
   gap: var(--qds-popup-subsection-gap-children-related);
@@ -310,8 +355,9 @@ pre strong {
 .qds-accessory {
   background-color: var(--qds-theme-accessory-background);
   border-radius: var(--qds-accessory-border-radius);
-  box-shadow: var(--qds-theme-accessory-elevation);
-  padding: var(--qds-accessory-padding);
+  box-shadow: var(--qds-accessory-elevation);
+  padding: var(--qds-accessory-padding-top) var(--qds-accessory-padding-end)
+    var(--qds-accessory-padding-bottom) var(--qds-accessory-padding-start);
 }
 
 .qds-accessory,
@@ -377,3 +423,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-form-input-border-radius-top-right: 0px;
+  --qds-form-input-border-radius-bottom-right: 0px;
+  --qds-form-input-border-width-inline-end: 0px;
+}
+
+.qds-control-group-inline > :not(:first-child, :last-child) {
+  --qds-form-input-border-radius-top-left: 0px;
+  --qds-form-input-border-radius-top-right: 0px;
+  --qds-form-input-border-radius-bottom-right: 0px;
+  --qds-form-input-border-radius-bottom-left: 0px;
+  --qds-form-input-border-width-inline-end: 0px;
+}
+
+.qds-control-group-inline > :last-child:not(:only-child) {
+  --qds-form-input-border-radius-top-left: 0px;
+  --qds-form-input-border-radius-bottom-left: 0px;
+}
+
+.qds-control-group-block {
+  display: flex;
+  flex-direction: column;
+}
+
+.qds-control-group-block > :first-child:not(:only-child) {
+  --qds-form-input-border-radius-bottom-left: 0px;
+  --qds-form-input-border-radius-bottom-right: 0px;
+  --qds-form-input-border-width-block-end: 0px;
+}
+
+.qds-control-group-block > :not(:first-child, :last-child) {
+  --qds-form-input-border-radius-top-left: 0px;
+  --qds-form-input-border-radius-top-right: 0px;
+  --qds-form-input-border-radius-bottom-right: 0px;
+  --qds-form-input-border-radius-bottom-left: 0px;
+  --qds-form-input-border-width-block-end: 0px;
+}
+
+.qds-control-group-block > :last-child:not(:only-child) {
+  --qds-form-input-border-radius-top-left: 0px;
+  --qds-form-input-border-radius-top-right: 0px;
+}