@scania/tegel 1.24.0-value-prop.beta.6 → 1.25.0-fix-a11y-checkbox-beta.1

package/dist/esm/tds-button.entry.js

@@ -23,7 +23,9 @@ const TdsButton = class {
         if (!this.text && !hasLabelSlot) {
             this.onlyIcon = true;
         }
-        return (h(Host, { key: '5e4003467875c6ecbfa8111982d90582ad4f81e4', class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''} `, disabled: this.disabled }, h("button", { key: 'c3271e8b3a132aa65633b7363d06d60894cf20a4', type: this.type, disabled: this.disabled, class: {
+        return (h(Host, { key: '0da9ecd33d791c7f38df49a7be8154c2b853b8a9', class: {
+                [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
+            }, disabled: this.disabled }, h("button", { key: 'f36ff769c173013f50d94aa411df2e523150c117', type: this.type, disabled: this.disabled, class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -37,7 +39,7 @@ const TdsButton = class {
                 'icon': hasIconSlot,
                 'only-icon': this.onlyIcon,
                 [`animation-${this.animation}`]: this.animation !== 'none',
-            } }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: 'faf17907cbe022e4ec0ed3662704f60de018ead2', name: "label" }), hasIconSlot && h("slot", { key: '9f9ffcb72c024ed1030a4269f4bd8af29e2901bd', name: "icon" }))));
+            } }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '424b383819a08898c3cd33a086ebe53b79f9e965', name: "label" }), hasIconSlot && h("slot", { key: '77c062dab9e5abbbd687340e4451ead527b3a7af', name: "icon" }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-card.entry.js

@@ -38,11 +38,15 @@ const TdsCard = class {
         this.cardId = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: 'd777b6ef9815b43c55749ff8a03ef5d8cb21cf74', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}`, onClick: () => {
-                if (this.clickable) {
-                    this.handleClick();
-                }
-            } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}` }, this.getCardContent()))));
+        const cardStyle = {
+            card: true,
+            clickable: this.clickable,
+            [this.imagePlacement]: !this.stretch,
+            [`${this.imagePlacement}-stretch`]: this.stretch,
+        };
+        return (h(Host, { key: '03c6bf925c58c0634797f8370c68cc360f54cc0c', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: () => {
+                this.handleClick();
+            } }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-checkbox.entry.js

@@ -55,12 +55,26 @@ const TdsCheckbox = class {
             this.indeterminate = false;
         }
     }
+    componentDidRender() {
+        const label = this.host.getElementsByTagName('label')[0];
+        const div = label.getElementsByTagName('div')[0];
+        const missingText = div.innerHTML.length === 0;
+        if (missingText) {
+            label.innerText = 'Checkbox';
+        }
+    }
     render() {
-        return (h("div", { key: '068b73081ab2b1b24d58fd2afd70f2b0e4308745', class: "tds-checkbox" }, h("input", { key: '97bd225b10dea56b8166ce3d5c2e4569a7dc76f9',
+        const hasLabeledAndDescribedBy = this.host.getAttribute('aria-describedby') && this.host.getAttribute('aria-labelledby');
+        if (!hasLabeledAndDescribedBy) {
+            console.warn('Tegel Checkbox component: aria-describedby or aria-labelledby attributes are missing');
+        }
+        return (h("div", { key: '9e68abb937206959f74dc9c306b5029871296251', class: "tds-checkbox" }, h("input", { key: '67d18f4eab4c4c51b2071cac0f9d71221ff33f99',
             // 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-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-label": hasLabeledAndDescribedBy
+                ? undefined
+                : 'A checkbox that is missing aria-labelledby or aria-describedby attributes', 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: '9cfe0411c9b26d12229de7fdb9421b333da0199c', htmlFor: this.checkboxId }, h("slot", { key: '17d2e45ddf05aa409926f3df82caab7a4f110b72', name: "label" }))));
+            } }), h("label", { key: '1dfd9455205e671f6cce6c5962396a348bb63ac5', htmlFor: this.checkboxId }, h("slot", { key: 'd339d41e1912c3c93f08a51be49559b59fc075dd', name: "label" }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/tds-chip.entry.js

@@ -79,7 +79,7 @@ const TdsChip = class {
             'suffix': hasSuffixSlot,
             'disabled': this.disabled,
         };
-        return (h(Host, { key: 'de7555f8a452acf90f19908db73000ff2f917378' }, h("div", { key: '148eb930c309f1a6f53f8462a37ed6ee680d6703', class: "component" }, h("div", { key: '8020dd1198564e794fec8ec7dbd9dd7b3a9f188f', class: chipClasses }, h("input", Object.assign({ key: 'fe4a9718565e7dfc85700a026e7263adbc8258fb', type: this.type, id: this.chipId }, inputAttributes)), h("label", { key: 'af5687821c68ccada0d62290fd7f652392bb3fd1', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '55b7bc3855b45a3a2aee08f00bb8223564300ec1', name: "prefix" }), hasLabelSlot && h("slot", { key: '20c2024a51109edeb65503c10d8691449f806a6c', name: "label" }), hasSuffixSlot && h("slot", { key: '3a193b078226bef9f8b8ac45d74b9e82b51dcc52', name: "suffix" }))))));
+        return (h(Host, { key: 'f92aed7b75c11da93b841554edf2f07f5c1cccb3' }, h("div", { key: '1999e94f8206769fd8d751abbcfb9a7c40bd8810', class: "component" }, h("div", { key: '1e6a977c4bcd584ba519f1ee0ccd73e467c3abc5', class: chipClasses }, h("input", Object.assign({ key: '454afc046e22139b5e8121edfafa1345676d51bb', type: this.type, id: this.chipId }, inputAttributes)), h("label", { key: '8682130ad1d20966ba072d1a81fe50f683c39143', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: 'e0717c5608b870a813b3c0b86c2ce05d821bc7b2', name: "prefix" }), hasLabelSlot && h("slot", { key: 'e0e81a0e95cedbef3d7bc0f695f82a22356b6bee', name: "label" }), hasSuffixSlot && h("slot", { key: '70b48ca42bed4646fe1ce4f8699833aea3d48094', name: "suffix" }))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-core-header-item_2.entry.js

@@ -9,7 +9,7 @@ const TdsCoreHeaderItem = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'ef3825bce10e5d23e01b4be557014a5c90b8e7de' }, h("div", { key: '134696c5345b16dc15dc1940d7d42066597b3a4e', class: "item" }, h("slot", { key: '9e8fbe10a25cb6005d2ff03ce00adc5c6cdad495' }))));
+        return (h(Host, { key: 'a97f1ad7ef0398e2414f62374e69a738f8af8e18' }, h("div", { key: '3fd840c4cd4a7bd5bf27c3039c246f2faa085d51', class: "item" }, h("slot", { key: '5d521057588befd7509318ba5f053c6204e7344b' }))));
     }
 };
 TdsCoreHeaderItem.style = TdsCoreHeaderItemStyle0;
@@ -52,10 +52,10 @@ const TdsHeaderItem = class {
         this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
     }
     render() {
-        return (h(Host, { key: 'd5f256a30d131817e23f428b87a3604e2a299ad6' }, h("tds-core-header-item", { key: 'd2dc6486839af96bbd10938bf9e03ff50123da4f', class: {
+        return (h(Host, { key: '7317ab5668685390e2671908dd41855715267b1c' }, h("tds-core-header-item", { key: 'befc861a437912245c22413bbf774617fa84b289', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: 'a89a44221fe947e4075e6889ed3e3cf8478f6e96' }))));
+            } }, h("slot", { key: 'f4405b3881dc0d6e4b86f96aa90d0b045c7bf2d8' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-datetime.entry.js

@@ -105,7 +105,7 @@ const TdsDatetime = class {
         if (this.size === 'sm') {
             className += `${className}-sm`;
         }
-        return (h("div", { key: '0b0386d6ca214861e77014eb3c1b1ad5ac5176ea', class: `
+        return (h("div", { key: 'c09955258fa6a87c07efe2c4c327c72eb34688d8', class: `
         ${this.noMinWidth ? 'tds-form-datetime-nomin' : ''}
         ${this.focusInput ? 'tds-form-datetime tds-datetime-focus' : ' tds-form-datetime'}
         ${this.value.length > 0 ? 'tds-datetime-data' : ''}
@@ -115,7 +115,7 @@ const TdsDatetime = class {
         ${this.state === 'error' || this.state === 'success'
                 ? `tds-form-datetime-${this.state}`
                 : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { key: '0ec4ae11802d336afb3480d93c6958b065974518', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '454f2935d7ba7fb0679812fdec1f7a1080eb9722', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '79dd5d7eb7492290857808202d573b1315f43e50', class: "tds-datetime-input-container" }, h("input", { key: '01002d1f987a863aa9289e47b485a3740f3a5786', ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { key: '62bb064b898118016212f7009b8ff7ae08f9be84', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: 'a68bf6f45b79796ea5631225dc487ba27187dd03', size: "20px", name: "calendar" })), h("div", { key: 'd6d2425cae67f297c44f08de7d023013eec27547', class: "datetime-icon icon-time" }, h("tds-icon", { key: '5bdd8c430c232c4b01a612f9260e55d55a9fb44a', size: "20px", name: "clock" }))), h("div", { key: '3bb439913f3054041322de6d0056960a4eb1dd1c', class: "tds-datetime-bar" })), this.helper && (h("div", { key: '3f7245fda7ee2c0d894d5e4fdd90beace078035e', class: "tds-datetime-helper" }, h("div", { key: '82d7b73b3ab1e6dc5d90762416d169d393c69c5d', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: '9ccebec9e7cbce668362884e7efeb3c92bec8e82', name: "error", size: "16px" }), this.helper)))));
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { key: '42e0f48bc1e5c0fe34c492c9c4a4442dcb4982ec', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '9a09a448c5c46073b31c7cd6148ed8bf6334780e', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '78e81a9fbff444f76a2b46013cb9bc02e186ec86', class: "tds-datetime-input-container" }, h("input", { key: '385bb5d6d124951cd14151e6cda72007319f9dba', ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { key: '12e390a5b6fed5c6c2702cccad2f14a5fc20eebe', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '1e8c1a91b23b9bd5f9e44929f6586652d7578df6', size: "20px", name: "calendar" })), h("div", { key: '496f500c9f1b948458d7ab1c5d86a466838e7b6d', class: "datetime-icon icon-time" }, h("tds-icon", { key: 'b5dd412bf9d2286b2443aaf3ed2eb17a9f9045a9', size: "20px", name: "clock" }))), h("div", { key: '666193c97a4aa5435961d25b97d74bd3cc8b07a8', class: "tds-datetime-bar" })), this.helper && (h("div", { key: 'a7860edb4ab20cb633ec8309a991315358b53cd6', class: "tds-datetime-helper" }, h("div", { key: '84efbb36322ace185d66dd4f270a23b69e4bbad7', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'c304cdd2087c473a39304e9f926fee62286f3359', name: "error", size: "16px" }), this.helper)))));
     }
 };
 TdsDatetime.style = TdsDatetimeStyle0;

package/dist/esm/tds-divider.entry.js

@@ -9,7 +9,7 @@ const Divider = class {
         this.orientation = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '52a57f6bab64f6329412bbab154f213864382e98', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: '5ba2a5d20d84748b4b76e7ec24155f29cab69bc5', class: `divider ${this.orientation}` })));
+        return (h(Host, { key: 'a6195d6461fc6727d9e83c4152f446179160963f', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: 'f1cf2f97534adfe809f8ddda734cfdbcecd7989a', class: `divider ${this.orientation}` })));
     }
 };
 Divider.style = TdsDividerStyle0;