@scania/tegel 1.32.0 → 1.32.2-multibrand-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "1.32.0",
+  "version": "1.32.2-multibrand-beta.0",
   "description": "Tegel Design System",
   "type": "module",
   "keywords": [
@@ -26,6 +26,11 @@
       "types": "./dist/types/index.d.ts"
     },
     "./dist/tegel/tegel.css": "./dist/tegel/tegel.css",
+    "./dist-styles/core.css": "./dist-styles/core.css",
+    "./dist-styles/scania-variables.css": "./dist-styles/scania-variables.css",
+    "./dist-styles/scania.css": "./dist-styles/scania.css",
+    "./dist-styles/traton-variables.css": "./dist-styles/traton-variables.css",
+    "./dist-styles/traton.css": "./dist-styles/traton.css",
     "./tds-accordion-item": {
       "import": "./dist/components/tds-accordion-item.js",
       "types": "./dist/components/tds-accordion-item.d.ts"
@@ -358,6 +363,7 @@
   },
   "files": [
     "dist/",
+    "dist-styles/",
     "loader/",
     "scripts/copy-assets.mjs"
   ],
@@ -368,9 +374,10 @@
     "copy-assets": "./scripts/copy-assets.mjs"
   },
   "scripts": {
-    "build": "stencil build && stencil build --docs",
-    "_comment": "Due to stencil bug with types creation, we need to run build two times!",
-    "start": "stencil build --dev --watch --serve",
+    "build:css": "node scripts/build-css.js",
+    "watch:css": "node scripts/build-css.js --watch",
+    "build": "npm run build:css && stencil build && stencil build --docs",
+    "start": "concurrently --raw \"npm:build-stencil:watch\" \"npm:watch:css\" \"npm:start:storybook\"",
     "test": "node docker-test-runner.js",
     "test:axe": "npx playwright test --config 'playwright-axe.config.ts'",
     "update:snapshots": "docker run --rm --network host -v $(pwd):/work/ -w /work/ mcr.microsoft.com/playwright:v1.50.0-jammy /bin/bash -c 'npm install && npx playwright test --update-snapshots && exit'",
@@ -382,7 +389,11 @@
     "start:storybook": "storybook dev -p 6006",
     "build:storybook": "storybook build --quiet",
     "build-stencil:storybook": "npm run build && npm run build:storybook",
-    "start:core": "concurrently --raw 'npm:build-stencil:watch' 'npm:start:storybook'"
+    "start:core": "concurrently --raw 'npm:build-stencil:watch' 'npm:start:storybook'",
+    "build:tegel-light": "npm run compile:scss && npm run update:tegel-light-exports && npm run copy:assets-tegel-light",
+    "compile:scss": "node scripts/compile-tegel-light-components.js",
+    "update:tegel-light-exports": "node scripts/update-tegel-light-exports.js",
+    "copy:assets-tegel-light": "node scripts/copy-tegel-light-assets.js"
   },
   "dependencies": {
     "@popperjs/core": "2.11.8",

package/dist/components/p-1ef7423a.js

@@ -1,107 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
-
-const checkboxCss = ".sc-tds-checkbox-h{align-items:center;position:relative;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.tds-checkbox.sc-tds-checkbox *.sc-tds-checkbox{box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-checkbox-color);padding-left:var(--tds-spacing-element-4);padding-top:var(--tds-spacing-element-4);padding-bottom:var(--tds-spacing-element-4);cursor:pointer;display:flex;align-items:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox::before{content:\"\";position:absolute;width:100%;height:100%;left:0;top:0}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{border:1px solid var(--tds-checkbox-interaction-01);background-color:var(--tds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:focus::before{background-color:var(--tds-checkbox-background-focus);opacity:var(--tds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox{cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox::after{border-color:var(--tds-checkbox-border-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled+label.sc-tds-checkbox,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-grey-600);cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox:hover::before{display:none}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked::after{background-image:var(--tds-checkbox-background-img);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::after{background-image:var(--tds-checkbox-background-img-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate::after{background-image:var(--tds-checkbox-background-img-indeterminate);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate:disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:indeterminate:disabled::after{background-image:var(--tds-checkbox-background-img-indeterminate-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}";
-const TdsCheckboxStyle0 = checkboxCss;
-
-const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.tdsChange = createEvent(this, "tdsChange", 6);
-        this.tdsFocus = createEvent(this, "tdsFocus", 6);
-        this.tdsBlur = createEvent(this, "tdsBlur", 6);
-        this.handleChange = () => {
-            this.checked = !this.checked;
-            this.indeterminate = false;
-            this.tdsChange.emit({
-                checkboxId: this.checkboxId,
-                checked: this.checked,
-                indeterminate: this.indeterminate,
-                value: this.value,
-            });
-        };
-        this.name = undefined;
-        this.checkboxId = generateUniqueId();
-        this.disabled = false;
-        this.required = false;
-        this.checked = false;
-        this.indeterminate = false;
-        this.value = undefined;
-        this.tdsAriaLabel = undefined;
-        this.tdsAriaDescribedby = undefined;
-    }
-    /** Toggles the checked value of the component. */
-    async toggleCheckbox() {
-        this.checked = !this.checked;
-        this.indeterminate = false;
-        return {
-            checkboxId: this.checkboxId,
-            checked: this.checked,
-        };
-    }
-    handleIndeterminateState() {
-        this.inputElement.indeterminate = this.indeterminate;
-    }
-    /** Set the input as focus when clicking the component */
-    handleFocus(event) {
-        this.tdsFocus.emit(event);
-    }
-    /** Set the input as blur when clicking outside the component */
-    handleBlur(event) {
-        this.tdsBlur.emit(event);
-    }
-    /** Listens for a reset event inside a form */
-    handleFormReset(event) {
-        if (this.host.closest('form') === event.target) {
-            this.checked = false;
-            this.indeterminate = false;
-        }
-    }
-    connectedCallback() {
-        if (!this.tdsAriaLabel) {
-            console.warn('Tegel Checkbox component: tdsAriaLabel prop is missing');
-        }
-    }
-    render() {
-        return (h("div", { key: '8f5104073f1be9323bc0125feab7515759ac7679', class: "tds-checkbox" }, h("input", { key: '8536a1eaefb5b7bdf258a4ddca67660becc797a5',
-            // eslint-disable-next-line no-return-assign
-            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
-                this.handleChange();
-            } }), h("label", { key: 'e6e065ce109371607c5412ab38ece22d3ac1d626', htmlFor: this.checkboxId }, h("slot", { key: '4698f97ac58203e3f478321da53cc364157ded78', name: "label" }))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "indeterminate": ["handleIndeterminateState"]
-    }; }
-    static get style() { return TdsCheckboxStyle0; }
-}, [6, "tds-checkbox", {
-        "name": [1],
-        "checkboxId": [1, "checkbox-id"],
-        "disabled": [4],
-        "required": [4],
-        "checked": [1540],
-        "indeterminate": [1028],
-        "value": [1],
-        "tdsAriaLabel": [1, "tds-aria-label"],
-        "tdsAriaDescribedby": [1, "tds-aria-describedby"],
-        "toggleCheckbox": [64]
-    }, [[4, "reset", "handleFormReset"]], {
-        "indeterminate": ["handleIndeterminateState"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["tds-checkbox"];
-    components.forEach(tagName => { switch (tagName) {
-        case "tds-checkbox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, TdsCheckbox);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { TdsCheckbox as T, defineCustomElement as d };