@scania/tegel 1.26.0 → 1.27.0-allow-numbers-and-zero-values-beta.0

package/dist/collection/components/tooltip/tooltip.js

@@ -40,6 +40,12 @@ export class TdsTooltip {
         this.placement = 'bottom';
         this.offsetSkidding = 0;
         this.offsetDistance = 8;
+        this.tdsAriaDescribedby = undefined;
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.show) {
+            this.show = false;
+        }
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
@@ -52,16 +58,20 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: '963a6dc4a3816d01ca9a1efc76ba06b98faba9f0' }, h("tds-popover-core", Object.assign({ key: '6bc8ffb25e5d31c2c3d9dda9867104990ae8ff18' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '366a9ef9c61be66f0bd4559df61959e66df7ccde', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'a3e941deb73b41565f82bfcd972e88f3b3a9a4cc' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'tds-tooltip-show': this.show,
-            }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false, onInternalTdsShow: () => {
+            }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false,
+            // @ts-ignore
+            onInternalTdsShow: () => {
                 this.show = true;
-            }, onInternalTdsClose: () => {
+            },
+            // @ts-ignore
+            onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '5df9224787bb470653278d121ceed41ea48b957a' }))));
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '33b71eda3f8d5e3c5f711edac7ed7974b09843a8' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }
@@ -263,8 +273,34 @@ export class TdsTooltip {
                 "attribute": "offset-distance",
                 "reflect": false,
                 "defaultValue": "8"
+            },
+            "tdsAriaDescribedby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the aria-describedby attribute"
+                },
+                "attribute": "tds-aria-describedby",
+                "reflect": false
             }
         };
     }
     static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/utils/axeHelpers.js

@@ -1,3 +1,3 @@
 import AxeBuilder from "@axe-core/playwright";
-const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region'];
+const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region', 'color-contrast'];
 export const tegelAnalyze = async (page) => new AxeBuilder({ page }).disableRules(disabledRules).analyze();

package/dist/components/{p-c65351ab.js → p-14ab9663.js}

@@ -28,6 +28,8 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
         this.checked = false;
         this.indeterminate = false;
         this.value = undefined;
+        this.tdsAriaLabel = undefined;
+        this.tdsAriaDescribedby = undefined;
     }
     /** Toggles the checked value of the component. */
     async toggleCheckbox() {
@@ -56,12 +58,17 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
             this.indeterminate = false;
         }
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Checkbox component: tdsAriaLabel prop is missing');
+        }
+    }
     render() {
-        return (h("div", { key: '7362e4e69df24e5615f9f23fe8bc9b72b29cf525', class: "tds-checkbox" }, h("input", { key: '43f2b6070677645ad7bc9c47e2bd65df43735eff',
+        return (h("div", { key: '26c1c30edd11f3d1dc76beffa496b93841a7dac5', class: "tds-checkbox" }, h("input", { key: 'ebb9d474d9f726248f7a0c9079c5474431d18104',
             // eslint-disable-next-line no-return-assign
-            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), 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: () => {
+            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: 'caaa642c85a0d2913441c0e7baa3ca28e9b3a7a8', htmlFor: this.checkboxId }, h("slot", { key: '12d411bbcd3baa9ed43cec5d4d25a1ad4c982ce5', name: "label" }))));
+            } }), h("label", { key: '68e89bdc35cc5f37756cdbde5f563bf64e334310', htmlFor: this.checkboxId }, h("slot", { key: 'f5122194e84705f82c8f148feadfc2787577c346', name: "label" }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -76,6 +83,8 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
         "checked": [1540],
         "indeterminate": [1028],
         "value": [1],
+        "tdsAriaLabel": [1, "tds-aria-label"],
+        "tdsAriaDescribedby": [1, "tds-aria-describedby"],
         "toggleCheckbox": [64]
     }, [[4, "reset", "handleFormReset"]], {
         "indeterminate": ["handleIndeterminateState"]

package/dist/components/p-17338bcb.js

@@ -0,0 +1,115 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { i as inheritAttributes } from './p-3fe9cbbf.js';
+import { d as defineCustomElement$1 } from './p-e71e3b2e.js';
+
+const tooltipCss = ".sc-tds-tooltip-h{position:absolute}.tds-tooltip.sc-tds-tooltip{box-sizing:border-box;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-tooltip-color);background-color:var(--tds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;white-space:normal;max-width:192px;z-index:900;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.tds-tooltip.sc-tds-tooltip *.sc-tds-tooltip{box-sizing:border-box}.tds-tooltip.tds-tooltip-top-left.sc-tds-tooltip{border-radius:0 4px 4px}.tds-tooltip.tds-tooltip-top-right.sc-tds-tooltip{border-radius:4px 0 4px 4px}.tds-tooltip.tds-tooltip-bottom-right.sc-tds-tooltip{border-radius:4px 4px 0}.tds-tooltip.tds-tooltip-bottom-left.sc-tds-tooltip{border-radius:4px 4px 4px 0}.tds-tooltip-show.sc-tds-tooltip{opacity:1;visibility:visible}";
+const TdsTooltipStyle0 = tooltipCss;
+
+const TdsTooltip = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.popperjsExtraModifiers = [
+            {
+                name: 'positionCalc',
+                enabled: true,
+                phase: 'main',
+                fn: ({ state }) => {
+                    if (state.placement === 'bottom-start' || state.placement === 'right-start') {
+                        this.border = 'top-left';
+                    }
+                    else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
+                        this.border = 'top-right';
+                    }
+                    else if (state.placement === 'top-end' || state.placement === 'left-end') {
+                        this.border = 'bottom-right';
+                    }
+                    else if (state.placement === 'top-start' || state.placement === 'right-end') {
+                        this.border = 'bottom-left';
+                    }
+                    else if (state.placement === 'bottom' || state.placement === 'top') {
+                        this.border = 'default';
+                    }
+                },
+            },
+        ];
+        this.inheritedAttributes = [];
+        this.text = '';
+        this.selector = undefined;
+        this.referenceEl = undefined;
+        this.defaultShow = false;
+        this.mouseOverTooltip = false;
+        this.trigger = 'hover';
+        this.show = null;
+        this.placement = 'bottom';
+        this.offsetSkidding = 0;
+        this.offsetDistance = 8;
+        this.tdsAriaDescribedby = undefined;
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.show) {
+            this.show = false;
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
+    }
+    determineTrigger() {
+        if (this.trigger === 'hover') {
+            return this.mouseOverTooltip ? 'hover-popover' : 'hover';
+        }
+        return this.trigger;
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '366a9ef9c61be66f0bd4559df61959e66df7ccde', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'a3e941deb73b41565f82bfcd972e88f3b3a9a4cc' }, this.inheritedAttributes, { class: {
+                'tds-tooltip': true,
+                [`tds-tooltip-${this.border}`]: true,
+                [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
+                'tds-tooltip-show': this.show,
+            }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false,
+            // @ts-ignore
+            onInternalTdsShow: () => {
+                this.show = true;
+            },
+            // @ts-ignore
+            onInternalTdsClose: () => {
+                this.show = false;
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '33b71eda3f8d5e3c5f711edac7ed7974b09843a8' }))));
+    }
+    get host() { return this; }
+    static get style() { return TdsTooltipStyle0; }
+}, [6, "tds-tooltip", {
+        "text": [1],
+        "selector": [1],
+        "referenceEl": [16],
+        "defaultShow": [4, "default-show"],
+        "mouseOverTooltip": [4, "mouse-over-tooltip"],
+        "trigger": [1],
+        "show": [1028],
+        "placement": [1],
+        "offsetSkidding": [2, "offset-skidding"],
+        "offsetDistance": [2, "offset-distance"],
+        "tdsAriaDescribedby": [1, "tds-aria-describedby"]
+    }, [[8, "keydown", "handleKeyDown"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-tooltip", "tds-popover-core"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsTooltip);
+            }
+            break;
+        case "tds-popover-core":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { TdsTooltip as T, defineCustomElement as d };

package/dist/components/{p-2a43e410.js → p-2d93a742.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { a as convertToString } from './p-b1d21573.js';
-import { d as defineCustomElement$2 } from './p-c65351ab.js';
-import { d as defineCustomElement$1 } from './p-a2b7bdef.js';
+import { c as convertToString } from './p-a1181b1f.js';
+import { d as defineCustomElement$2 } from './p-14ab9663.js';
+import { d as defineCustomElement$1 } from './p-4487c541.js';
 
 const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button.xs{padding:7px 0 8px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option .multiselect tds-checkbox.xs{padding:7px 16px 8px}:host .dropdown-option:hover{background-color:var(--tds-dropdown-option-background-hover);cursor:pointer}:host .dropdown-option:hover.disabled{background-color:var(--tds-dropdown-option-background);cursor:not-allowed}:host([hidden]){display:none}";
 const TdsDropdownOptionStyle0 = dropdownOptionCss;
@@ -89,7 +89,7 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: 'af1229553e89c02aca1d7c11bbc80acd25ce44b5', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'c93eb33d1864028690ab981c0f676f03993265c4', class: `dropdown-option 
+        return (h(Host, { key: 'f471d5238869b3a522b36d99d7549c1229cd83a2' }, h("div", { key: 'da9edccba96999b0ee40f8c599325774593de814', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -101,7 +101,7 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
                 this.handleMultiselect(event);
             }, disabled: this.disabled, checked: this.selected, class: {
                 [this.size]: true,
-            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
+            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, onClick: () => {
                 this.handleSingleSelect();
             }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
     }