@scania/tegel 1.26.0-value-prop-fix.beta.0 → 1.27.0

package/dist/collection/components/link/link.js

@@ -9,14 +9,28 @@ export class TdsLink {
         this.standalone = false;
     }
     connectedCallback() {
-        this.host.children[0].classList.add('tds-link-component');
+        const links = this.host.querySelectorAll('a');
+        if (links.length > 1) {
+            console.warn('tds-link is only intended to wrap one <a> tag');
+        }
+        const link = links[0];
+        if (link) {
+            if (this.disabled) {
+                link.setAttribute('tabindex', '-1');
+                link.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                link.removeAttribute('tabindex');
+                link.removeAttribute('aria-disabled');
+            }
+        }
     }
     render() {
-        return (h("span", { key: '3fa509835f66a3128ee487b34b47c0efb9e73d82', class: {
+        return (h("span", { key: '1183de952c2fd6cb1193e9e0dec419f37bf07dee', class: {
                 'disabled': this.disabled,
                 'no-underline': !this.underline,
                 'standalone': this.standalone,
-            } }, h("slot", { key: 'd83160f7b9b04e0e0cd9bd9184a45ac8ac504744' })));
+            } }, h("slot", { key: 'e019a83d2335cd0a7d682e79a6bf0148452c3e71' })));
     }
     static get is() { return "tds-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message/message.css

@@ -1,3 +1,17 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
+:host {
+  /* Default values */
+  --tds-message-background: var(--background-elevation-layer-03);
+  /* Variant values */
+}
+:host .tds-mode-variant-primary {
+  --tds-message-background: var(--background-elevation-layer-03);
+}
+:host .tds-mode-variant-secondary {
+  --tds-message-background: var(--background-elevation-layer-02);
+}
 :host .wrapper {
   display: flex;
   padding: 16px;
@@ -5,43 +19,45 @@
   border-radius: 4px;
 }
 :host .wrapper.information {
-  border-left: 4px solid var(--tds-information);
+  border-left: 4px solid var(--system-info-default);
 }
 :host .wrapper.information tds-icon {
-  color: var(--tds-information);
+  color: var(--system-info-default);
 }
 :host .wrapper.success {
-  border-left: 4px solid var(--tds-positive);
+  border-left: 4px solid var(--system-success-default);
 }
 :host .wrapper.success tds-icon {
-  color: var(--tds-positive);
+  color: var(--system-success-default);
 }
 :host .wrapper.error {
-  background-color: var(--tds-message-type-error-background);
-  border-left: 4px solid var(--tds-negative);
+  background-color: var(--system-danger-subtle);
+  border-left: 4px solid var(--system-danger-default);
 }
 :host .wrapper.error tds-icon {
-  color: var(--tds-negative);
+  color: var(--system-danger-default);
 }
 :host .wrapper.warning {
-  border-left: 4px solid var(--tds-warning);
+  border-left: 4px solid var(--system-warning-default);
 }
 :host .wrapper.warning tds-icon {
-  color: var(--tds-warning);
+  color: var(--system-warning-default);
 }
 :host .wrapper.minimal {
   border: none;
-  display: flex;
-  align-items: center;
   padding: 0;
   background-color: transparent;
 }
 :host .wrapper.minimal .header {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
 }
 :host .wrapper.minimal.error .header {
-  color: var(--tds-negative);
+  color: var(--system-danger-default);
 }
 :host tds-icon {
   padding-right: 16px;
@@ -50,21 +66,23 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  color: var(--tds-message-color);
+  color: var(--foreground-text-strong);
   padding: 2px 0;
 }
 :host .content .header {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
 }
 :host .content .extended-message {
-  color: var(--tds-message-color);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-}
-:host .tds-mode-variant-primary {
-  --tds-message-background: var(--tds-message-background-primary);
-}
-:host .tds-mode-variant-secondary {
-  --tds-message-background: var(--tds-message-background-secondary);
+  color: var(--foreground-text-strong);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
 }

package/dist/collection/components/message/message.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import generateUniqueId from "../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the extended message. Not visible on minimal messages.
  */
@@ -23,14 +24,25 @@ export class TdsMessage {
         this.variant = 'information';
         this.noIcon = false;
         this.minimal = false;
+        this.tdsAlertDialog = 'dialog';
+        this.tdsAriaLabel = undefined;
+    }
+    getAriaLabel() {
+        if (this.header) {
+            return undefined;
+        }
+        const variantLabel = `${this.variant} message`;
+        return this.tdsAriaLabel || variantLabel;
     }
     render() {
-        return (h(Host, { key: 'efeee188e97e2562fa55dcd8217277cc69f80010' }, h("div", { key: '9d0f0fb52a4dfeb6912d141f8ee124d45c8ad382', class: {
+        const headerId = this.header ? `tds-message-header-${generateUniqueId()}` : undefined;
+        const contentId = !this.minimal ? `tds-message-content-${generateUniqueId()}` : undefined;
+        return (h(Host, { key: 'b28d7e5de5b3cb612e78f83650fa5c0621107dda', role: this.tdsAlertDialog, "aria-labelledby": headerId, "aria-describedby": contentId, "aria-label": this.getAriaLabel() }, h("div", { key: 'a3d7470a99af752df3516009d39f7e1c4bbed096', class: {
                 wrapper: true,
                 [this.variant]: true,
                 minimal: this.minimal,
                 [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            } }, !this.noIcon && h("tds-icon", { key: 'd5fac1d2e80a7082520e5d8286f8cc3b158108fc', name: this.getIconName(), size: "20px" }), h("div", { key: 'e476f032fb5b14f219406f520690ce06b5677096', class: `content` }, this.header && h("div", { key: 'f9e23723c651c0c4ebf0a4da389779f87367739f', class: "header" }, this.header), !this.minimal && (h("div", { key: '3aa181cccd7fecbeea251245c54c53990956b271', class: "extended-message" }, h("slot", { key: 'ba233143933785b13fdeeee0f4154d4ce481dfe6' })))))));
+            } }, !this.noIcon && (h("tds-icon", { key: '5ce066cccec225e2707e660f73396f24197d024d', "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'ec0101d39dd0354b163219b732fd9dfa9cd66e60', class: `content` }, this.header && (h("div", { key: '434be3923b805cc8bd77d232a8cdbf847f9793c8', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: '14f5ead963e55d7e3bad6abc69e97ba9f994316f', class: "extended-message", id: contentId }, h("slot", { key: '37c61ef3a396e37a7cb130951d44af9454163699' })))))));
     }
     static get is() { return "tds-message"; }
     static get encapsulation() { return "shadow"; }
@@ -134,6 +146,41 @@ export class TdsMessage {
                 "attribute": "minimal",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tdsAlertDialog": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'alertdialog' | 'dialog'",
+                    "resolved": "\"alertdialog\" | \"dialog\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Role of the message component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages."
+                },
+                "attribute": "tds-alert-dialog",
+                "reflect": false,
+                "defaultValue": "'dialog'"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides an accessible name for the message component when no header is present. This ensures proper screen reader support for dialog/alertdialog roles."
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }