@quartzds/core 1.0.0-beta.1

package/hydrate/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@quartzds/core/hydrate",
+  "description": "qds component hydration app.",
+  "main": "index.js",
+  "types": "index.d.ts"
+}

package/loader/cdn.js

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

package/loader/index.cjs.js

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

package/loader/index.d.ts

@@ -0,0 +1,21 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  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 applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

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

package/loader/index.js

@@ -0,0 +1,8 @@
+/*!
+ * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * 
+ * SPDX-License-Identifier: LGPL-2.1-only
+ */
+(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';

package/loader/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "qds-loader",
+  "private": true,
+  "typings": "./index.d.ts",
+  "module": "./index.js",
+  "main": "./index.cjs.js",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
+  "unpkg": "./cdn.js"
+}

package/package.json

@@ -0,0 +1,231 @@
+{
+  "name": "@quartzds/core",
+  "version": "1.0.0-beta.1",
+  "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",
+  "exports": {
+    ".": {
+      "types": "./components/index.d.ts",
+      "import": "./components/index.js"
+    },
+    "./components/*": "./components/*",
+    "./components/floating-ui.dom.esm.js": null,
+    "./components/helpers.js": null,
+    "./components/icon.js": null,
+    "./components/label.js": null,
+    "./docs.json": {
+      "types": "./dist/docs.d.ts",
+      "default": "./dist/docs.json"
+    },
+    "./hydrate": {
+      "types": "./hydrate/index.d.ts",
+      "require": "./hydrate/index.js"
+    },
+    "./loader": {
+      "types": "./loader/index.d.ts",
+      "import": "./loader/index.es2017.js",
+      "require": "./loader/index.cjs.js"
+    },
+    "./package.json": "./package.json",
+    "./styles/*": "./styles/*"
+  },
+  "module": "./components/index.js",
+  "types": "./components/index.d.ts",
+  "files": [
+    "components/**",
+    "dist/cjs/**",
+    "dist/esm/**",
+    "dist/types/**",
+    "dist/custom-elements.json",
+    "dist/docs.d.ts",
+    "dist/docs.json",
+    "dist/vscode.html-custom-data.json",
+    "hydrate/**",
+    "loader/**",
+    "styles/**"
+  ],
+  "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": "build-storybook",
+    "storybook:dev": "start-storybook -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": {
+    "@floating-ui/dom": "^1.0.0",
+    "@quartzds/generic-icons-core": "^1.0.0-beta.1",
+    "@stencil/core": "^3.0.0",
+    "@types/node": "*",
+    "type-fest": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.21.8",
+    "@babel/plugin-proposal-decorators": "7.21.0",
+    "@babel/plugin-proposal-export-default-from": "7.18.10",
+    "@babel/preset-env": "7.21.5",
+    "@babel/preset-typescript": "7.21.5",
+    "@custom-elements-manifest/analyzer": "0.8.3",
+    "@playwright/test": "1.33.0",
+    "@quartzds/browserslist-config": "1.1.0",
+    "@quartzds/generic-tokens-core": "1.0.0-beta.1",
+    "@quartzds/tailwind-preset": "1.0.0-beta.3",
+    "@stencil/angular-output-target": "0.7.0",
+    "@stencil/postcss": "2.1.0",
+    "@stencil/react-output-target": "0.5.0",
+    "@stencil/vue-output-target": "0.8.5",
+    "@storybook/addon-a11y": "6.5.16",
+    "@storybook/addon-docs": "6.5.16",
+    "@storybook/addon-essentials": "6.5.16",
+    "@storybook/addon-styling": "0.3.2",
+    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/manager-webpack5": "6.5.16",
+    "@storybook/mdx2-csf": "1.1.0",
+    "@storybook/web-components": "6.5.16",
+    "@types/postcss-import": "14.0.0",
+    "babel-loader": "9.1.2",
+    "babel-plugin-macros": "3.1.0",
+    "core-js": "3.30.2",
+    "css-loader": "6.7.4",
+    "lit": "2.7.4",
+    "npm-run-all": "4.1.5",
+    "playwright": "1.33.0",
+    "postcss": "8.4.23",
+    "postcss-import": "15.1.0",
+    "postcss-loader": "7.3.0",
+    "postcss-preset-env": "8.4.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rimraf": "5.0.1",
+    "serve": "14.2.0",
+    "stencil-playwright": "0.2.0",
+    "storybook-dark-mode": "2.1.1",
+    "style-loader": "3.3.3",
+    "tailwindcss": "3.3.2",
+    "typescript": "4.9.5",
+    "webpack": "5.86.0"
+  },
+  "engines": {
+    "node": "^14.20.0 || ^16.13.0 || >=18.10.0"
+  },
+  "customElements": "./dist/custom-elements.json",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/styles/core.css

@@ -0,0 +1,379 @@
+/**
+* SPDX-FileCopyrightText: © 2023 Schneider Electric
+*
+* SPDX-License-Identifier: LGPL-2.1-only
+*/
+
+figure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--qds-figure-gap);
+}
+
+figcaption {
+  color: var(--qds-theme-figure-caption);
+  font: var(--qds-figure-caption);
+}
+
+li,
+p,
+pre {
+  color: var(--qds-theme-text-standard);
+}
+
+li,
+p {
+  font: var(--qds-text-standard);
+}
+
+:is(li, p) strong {
+  font: var(--qds-text-emphasized);
+}
+
+pre {
+  font: var(--qds-code-standard);
+}
+
+pre strong {
+  font: var(--qds-code-emphasized);
+}
+
+:is(li, p, span).qds-subdued {
+  color: var(--qds-theme-text-subdued);
+  font: var(--qds-text-subdued);
+}
+
+:is(
+    .qds-accessory-section,
+    .qds-accessory,
+    .qds-controls-jumbo,
+    .qds-controls-large,
+    .qds-controls-small,
+    .qds-controls,
+    .qds-main-section,
+    .qds-main-subsection,
+    .qds-main,
+    .qds-navigation-section,
+    .qds-navigation-subsection,
+    .qds-navigation,
+    .qds-panel-section,
+    .qds-panel-subsection,
+    .qds-panel,
+    .qds-popup-section,
+    .qds-popup-subsection,
+    .qds-popup
+  )
+  :is(blockquote, figure, input, menu, ol, p, pre, ul) {
+  margin: 0;
+}
+
+.qds-accessory-section,
+.qds-accessory,
+.qds-controls-jumbo,
+.qds-controls-large,
+.qds-controls-small,
+.qds-controls,
+.qds-main-section,
+.qds-main-subsection,
+.qds-main,
+.qds-navigation-section,
+.qds-navigation-subsection,
+.qds-navigation,
+.qds-panel-section,
+.qds-panel-subsection,
+.qds-panel,
+.qds-popup-section,
+.qds-popup-subsection,
+.qds-popup {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+}
+
+:is(
+    .qds-accessory,
+    .qds-main-subsection,
+    .qds-main,
+    .qds-navigation-subsection,
+    .qds-navigation,
+    .qds-panel-subsection,
+    .qds-panel,
+    .qds-popup-subsection,
+    .qds-popup
+  ).qds-subdued {
+  background-color: transparent;
+}
+
+:is(.qds-panel, .qds-navigation, .qds-popup, .qds-accessory).qds-subdued {
+  box-shadow: none;
+}
+
+.qds-main {
+  background-color: var(--qds-theme-main-background);
+  padding-block: var(--qds-main-padding-vertical);
+  padding-inline: var(--qds-main-padding-horizontal);
+}
+
+.qds-main,
+.qds-main .qds-unrelated {
+  gap: var(--qds-main-gap-children-unrelated);
+}
+
+.qds-main.qds-related,
+.qds-main .qds-related {
+  gap: var(--qds-main-gap-children-related);
+}
+
+.qds-main-section {
+  padding-block-start: var(--qds-main-section-padding-top);
+}
+
+.qds-main-section,
+.qds-main-section .qds-unrelated {
+  gap: var(--qds-main-section-gap-children-unrelated);
+}
+
+.qds-main-section.qds-related,
+.qds-main-section .qds-related {
+  gap: var(--qds-main-section-gap-children-related);
+}
+
+.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);
+}
+
+.qds-main-subsection,
+.qds-main-subsection .qds-unrelated {
+  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);
+}
+
+.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);
+}
+
+.qds-navigation,
+.qds-navigation .qds-unrelated {
+  gap: var(--qds-navigation-gap-children-unrelated);
+}
+
+.qds-navigation.qds-related,
+.qds-navigation .qds-related {
+  gap: var(--qds-navigation-gap-children-related);
+}
+
+.qds-navigation-section {
+  padding: var(--qds-navigation-section-padding);
+}
+
+.qds-navigation-section,
+.qds-navigation-section .qds-unrelated {
+  gap: var(--qds-navigation-section-gap-children-unrelated);
+}
+
+.qds-navigation-section.qds-related,
+.qds-navigation-section .qds-related {
+  gap: var(--qds-navigation-section-gap-children-related);
+}
+
+.qds-navigation-subsection {
+  background-color: var(--qds-theme-navigation-subsection-standard-background);
+  border-radius: var(--qds-navigation-subsection-border-radius);
+  padding: var(--qds-navigation-subsection-padding);
+}
+
+.qds-navigation-subsection,
+.qds-navigation-subsection .qds-unrelated {
+  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);
+}
+
+.qds-panel {
+  background-color: var(--qds-theme-panel-background);
+  border-radius: var(--qds-panel-border-radius);
+  box-shadow: var(--qds-theme-panel-elevation);
+  padding: var(--qds-panel-padding);
+}
+
+.qds-panel,
+.qds-panel .qds-unrelated {
+  gap: var(--qds-panel-gap-children-unrelated);
+}
+
+.qds-panel.qds-related,
+.qds-panel .qds-related {
+  gap: var(--qds-panel-gap-children-related);
+}
+
+.qds-panel-section {
+  padding-block-start: var(--qds-panel-section-padding-top);
+}
+
+.qds-panel-section,
+.qds-panel-section .qds-unrelated {
+  gap: var(--qds-panel-section-gap-children-unrelated);
+}
+
+.qds-panel-section.qds-related,
+.qds-panel-section .qds-related {
+  gap: var(--qds-panel-section-gap-children-related);
+}
+
+.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);
+}
+
+.qds-panel-subsection,
+.qds-panel-subsection .qds-unrelated {
+  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);
+}
+
+.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);
+}
+
+.qds-popup,
+.qds-popup .qds-unrelated {
+  gap: var(--qds-popup-gap-children-unrelated);
+}
+
+.qds-popup.qds-related,
+.qds-popup .qds-related {
+  gap: var(--qds-popup-gap-children-related);
+}
+
+.qds-popup-section,
+.qds-popup-section .qds-unrelated {
+  gap: var(--qds-popup-section-gap-children-unrelated);
+}
+
+.qds-popup-section.qds-related,
+.qds-popup-section .qds-related {
+  gap: var(--qds-popup-section-gap-children-related);
+}
+
+.qds-popup-subsection {
+  background-color: var(--qds-theme-popup-subsection-standard-background);
+  border-radius: var(--qds-popup-subsection-border-radius);
+  padding: var(--qds-popup-subsection-padding);
+}
+
+.qds-popup-subsection,
+.qds-popup-subsection .qds-unrelated {
+  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);
+}
+
+.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);
+}
+
+.qds-accessory,
+.qds-accessory .qds-unrelated {
+  gap: var(--qds-accessory-gap-children-unrelated);
+}
+
+.qds-accessory.qds-related,
+.qds-accessory .qds-related {
+  gap: var(--qds-accessory-gap-children-related);
+}
+
+.qds-accessory-section {
+  border-radius: var(--qds-accessory-section-border-radius);
+}
+
+.qds-accessory-section,
+.qds-accessory-section .qds-unrelated {
+  gap: var(--qds-accessory-section-gap-children-unrelated);
+}
+
+.qds-accessory-section.qds-related,
+.qds-accessory-section .qds-related {
+  gap: var(--qds-accessory-section-gap-children-related);
+}
+
+.qds-controls-small,
+.qds-controls-small .qds-unrelated {
+  gap: var(--qds-control-small-gap-siblings-unrelated);
+}
+
+.qds-controls-small.qds-related,
+.qds-controls-small .qds-related {
+  gap: var(--qds-control-small-gap-siblings-related);
+}
+
+.qds-controls,
+.qds-controls .qds-unrelated {
+  gap: var(--qds-control-standard-gap-siblings-unrelated);
+}
+
+.qds-controls.qds-related,
+.qds-controls .qds-related {
+  gap: var(--qds-control-standard-gap-siblings-related);
+}
+
+.qds-controls-large,
+.qds-controls-large .qds-unrelated {
+  gap: var(--qds-control-large-gap-siblings-unrelated);
+}
+
+.qds-controls-large.qds-related,
+.qds-controls-large .qds-related {
+  gap: var(--qds-control-large-gap-siblings-related);
+}
+
+.qds-controls-jumbo,
+.qds-controls-jumbo .qds-unrelated {
+  gap: var(--qds-control-jumbo-gap-siblings-unrelated);
+}
+
+.qds-controls-jumbo.qds-related,
+.qds-controls-jumbo .qds-related {
+  gap: var(--qds-control-jumbo-gap-siblings-related);
+}