@scania/tegel 1.55.0-var-batch-8-beta → 1.56.0

package/dist/collection/components/icon/icon.js

@@ -1,4 +1,13 @@
 import { h, Host } from "@stencil/core";
+// Feature-detect the CSS `d` property once per module load. Where it is
+// supported (Chromium, Firefox, Safari 18+) the path renders reactively from
+// the brand-scoped --tds-icon-<name>-d variable via the CSS `d` property, so
+// none of the imperative getComputedStyle / MutationObserver fallback runs —
+// those engines pay no per-icon runtime cost. Only engines without it (older
+// Safari/WebKit) fall back to resolving the `d` attribute in JS.
+const SUPPORTS_CSS_D = typeof CSS !== 'undefined' &&
+    typeof CSS.supports === 'function' &&
+    CSS.supports('d', 'path("M0 0Z")');
 export class Icon {
     constructor() {
         /** Pass the name of the icon.
@@ -8,28 +17,75 @@ export class Icon {
         this.size = '16px';
         /** Set aria-hidden attribute on svg */
         this.tdsAriaHidden = false;
+        this.pathD = '';
     }
-    componentDidLoad() {
-        this.warnIfMissing();
+    componentWillLoad() {
+        if (SUPPORTS_CSS_D)
+            return;
+        this.resolvePath();
+    }
+    connectedCallback() {
+        // The CSS `d` property handles brand-aware rendering reactively where
+        // supported, so the JS fallback below only runs on engines without it.
+        if (SUPPORTS_CSS_D)
+            return;
+        // When the icon is nested in another component's shadow tree, its load
+        // lifecycle runs while the subtree is still detached, so the synchronous
+        // getComputedStyle read in resolvePath yields nothing. Retry on the next
+        // frame once the subtree is attached and the CSS variables resolve.
+        this.resolvePath();
+        if (!this.pathD) {
+            requestAnimationFrame(() => this.resolvePath());
+        }
+        this.observeBrandChanges();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.brandObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.brandObserver = undefined;
     }
     nameChanged() {
-        this.warnIfMissing();
+        if (SUPPORTS_CSS_D)
+            return;
+        this.resolvePath();
     }
-    warnIfMissing() {
-        const styles = getComputedStyle(this.host);
-        const exists = styles.getPropertyValue(`--tds-icon-${this.name}-exists`).trim();
-        if (exists)
+    observeBrandChanges() {
+        // The JS `d` attribute fallback is read imperatively via getComputedStyle,
+        // so it must re-resolve when the brand changes at runtime. The brand is
+        // selected by a `.scania`/`.traton` class on the document root, so watch
+        // the root's class attribute and re-resolve on change.
+        if (this.brandObserver)
             return;
-        const brand = styles.getPropertyValue('--tds-brand-name').trim().replace(/['"]/g, '');
-        console.warn(`[tds-icon] "${this.name}" is not available in brand "${brand || 'unknown'}"; rendering placeholder.`);
+        this.brandObserver = new MutationObserver(() => this.resolvePath());
+        this.brandObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    resolvePath() {
+        // Path data lives on the brand-scoped CSS variable --tds-icon-<name>-d
+        // (see tokens/scss/component/icon.scss), shaped as `path('M...')`. Resolve
+        // it to an SVG `d` attribute here as the fallback for engines without CSS
+        // `d` support. An unknown icon name — brands have different icon sets, so a
+        // name may not exist in the active brand — simply yields no match and
+        // renders an empty path.
+        const raw = getComputedStyle(this.host).getPropertyValue(`--tds-icon-${this.name}-d`).trim();
+        const match = raw.match(/^path\(\s*(['"])([\s\S]*)\1\s*\)$/);
+        this.pathD = match ? match[2] : '';
     }
     render() {
-        // Path data is supplied by the brand-scoped CSS variable
-        // --tds-icon-<name>-d (see tokens/scss/component/icon.scss).
-        // The cascade picks scania vs. traton based on the nearest .scania/.traton
-        // ancestor, so no JS brand detection is needed.
+        // Brand-aware path data is supplied two ways so it works everywhere:
+        //   1. The CSS `d` property bound to the brand-scoped --tds-icon-<name>-d
+        //      variable. The CSS cascade resolves and updates this reactively when
+        //      the .scania/.traton brand class changes — no JS, no timing races.
+        //      Supported in Chromium, Firefox and Safari 18+.
+        //   2. The `d` attribute resolved imperatively (this.pathD), as a fallback
+        //      for engines that ignore the CSS `d` property (older Safari/WebKit).
+        // Where the CSS `d` property is supported it overrides the `d` attribute,
+        // so the two coexist: supporting engines use (1) and never populate (2);
+        // others fall back to (2). See SUPPORTS_CSS_D above.
         const pathStyle = { d: `var(--tds-icon-${this.name}-d)` };
-        return (h(Host, { key: '79cfdc2412a5f910265103d3ed6591f7b61ae418' }, h("svg", { key: '1bc9d05ec2ed94d48d75461606660bd7a803bdd8', "aria-hidden": this.tdsAriaHidden, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": this.svgTitle ? `title-${this.name}` : undefined, "aria-describedby": this.svgDescription ? `desc-${this.name}` : undefined, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, this.svgTitle && h("title", { key: 'abaf0a67d4fc79e3504057d12b16fc9fd7214a3b', id: `title-${this.name}` }, this.svgTitle), this.svgDescription && h("desc", { key: '9eec14670760462e079b951ff0c5876f145af580', id: `desc-${this.name}` }, this.svgDescription), h("path", { key: '65a48d4c0ccebb1ed8345814784b776a534113a0', fill: "currentColor", style: pathStyle }))));
+        return (h(Host, { key: 'fcceb06dd3f214b311fb7709fae9f46b82e4d9d1' }, h("svg", { key: '17b35536c6aa4b8c3b8c73644be8e0c3cb7f9090', "aria-hidden": this.tdsAriaHidden, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": this.svgTitle ? `title-${this.name}` : undefined, "aria-describedby": this.svgDescription ? `desc-${this.name}` : undefined, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, this.svgTitle && h("title", { key: '32ddc0b145521f4ed0169da2d79d32cd8b4d3201', id: `title-${this.name}` }, this.svgTitle), this.svgDescription && h("desc", { key: '4e5ae53d642cb7761c3dd00a161ff489028cef13', id: `desc-${this.name}` }, this.svgDescription), h("path", { key: '4b7595d42111a4dce6e16e1d3c3347094df16add', fill: "currentColor", style: pathStyle, d: this.pathD }))));
     }
     static get is() { return "tds-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -50,7 +106,7 @@ export class Icon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconNames",
-                    "resolved": "\"24v_battery\" | \"24v_battery_inactive\" | \"acceleration\" | \"acceleration_inactive\" | \"adblue\" | \"adblue_inactive\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio\" | \"audio_inactive\" | \"award\" | \"back\" | \"backward\" | \"backward_inactive\" | \"bento\" | \"bug\" | \"bug_inactive\" | \"burger\" | \"bus\" | \"bus_inactive\" | \"cab_door\" | \"calendar\" | \"calendar_inactive\" | \"camera\" | \"camera_inactive\" | \"card\" | \"cart\" | \"charging_complete\" | \"charging_failed\" | \"charging_speed\" | \"charging_speed_inactive\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock\" | \"clock_inactive\" | \"configurator\" | \"contact\" | \"contact_inactive\" | \"cookie\" | \"cookie_inactive\" | \"coolant_level\" | \"coolant_level_inactive\" | \"copy\" | \"cross\" | \"cup\" | \"cup_inactive\" | \"dashboard\" | \"department\" | \"department_inactive\" | \"departure_scheduling\" | \"departure_scheduling_inactive\" | \"diamond\" | \"diamond_inactive\" | \"document\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_plus\" | \"document_plus_inactive\" | \"document_ppt\" | \"document_tool\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"download\" | \"driving_licence\" | \"driving_licence_inactive\" | \"drop\" | \"drop_inactive\" | \"edit\" | \"edit_inactive\" | \"email\" | \"engine\" | \"engine_inactive\" | \"environment\" | \"environment_inactive\" | \"error\" | \"exit\" | \"expand\" | \"expand_inactive\" | \"export\" | \"export_inactive\" | \"eye\" | \"eye_inactive\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"factory\" | \"factory_inactive\" | \"ferry\" | \"ferry_inactive\" | \"filters\" | \"filters_inactive\" | \"flash\" | \"flash_inactive\" | \"folder\" | \"forward\" | \"forward_inactive\" | \"fuel\" | \"fuel_gauge\" | \"fuel_gauge_inactive\" | \"fuel_inactive\" | \"gift\" | \"gift_inactive\" | \"global\" | \"guided_tour\" | \"guided_tour_inactive\" | \"hatch_open\" | \"hatch_open_1\" | \"hatch_open_2\" | \"hatch_open_inactive\" | \"heart\" | \"heart_inactive\" | \"heating_inactive_screen\" | \"history\" | \"history_inactive\" | \"home\" | \"home_inactive\" | \"idea\" | \"idea_inactive\" | \"image\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"info\" | \"insights\" | \"kebab\" | \"key\" | \"key_inactive\" | \"language\" | \"layer\" | \"layer_inactive\" | \"link\" | \"link_broken\" | \"list\" | \"list_inactive\" | \"lock\" | \"lock_inactive\" | \"map_cursor\" | \"map_cursor_inactive\" | \"maximize_fullscreen\" | \"meatballs\" | \"merge\" | \"merge_inactive\" | \"message\" | \"message_inactive\" | \"microphone\" | \"microphone_inactive\" | \"mileage\" | \"mileage_inactive\" | \"minimize_fullscreen\" | \"minus\" | \"navigate\" | \"navigate_inactive\" | \"notification\" | \"notification_inactive\" | \"notification_snooze\" | \"oil_level\" | \"oil_level_inactive\" | \"paperclip\" | \"pause\" | \"pause_inactive\" | \"phone\" | \"phone_inactive\" | \"pie_chart\" | \"pin\" | \"pin_inactive\" | \"placeholder\" | \"play\" | \"play_inactive\" | \"plus\" | \"powerplug\" | \"powerplug_inactive\" | \"print\" | \"print_inactive\" | \"privacy\" | \"privacy_inactive\" | \"profile\" | \"profile_inactive\" | \"prohibited\" | \"proportions\" | \"proportions_inactive\" | \"range\" | \"range_inactive\" | \"redirect\" | \"refresh\" | \"refresh_inactive\" | \"reload\" | \"reload_inactive\" | \"repeat\" | \"report\" | \"report_inactive\" | \"route\" | \"route_inactive\" | \"save\" | \"save_inactive\" | \"search\" | \"send\" | \"send_inactive\" | \"settings\" | \"share\" | \"shuffle\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone\" | \"smartphone_inactive\" | \"sorting\" | \"speedometer\" | \"speedometer_inactive\" | \"star\" | \"support\" | \"target\" | \"target_inactive\" | \"temperature\" | \"temperature_inactive\" | \"text\" | \"text_inactive\" | \"thumbs_down\" | \"thumbs_up\" | \"tick\" | \"timer\" | \"tool\" | \"tool_inactive\" | \"trailer\" | \"trailer_inactive\" | \"trash\" | \"trash_inactive\" | \"truck\" | \"truck_inactive\" | \"undo\" | \"undo_inactive\" | \"unlock\" | \"upload\" | \"video\" | \"video_inactive\" | \"wallet\" | \"warning\" | \"weight\" | \"weight_inactive\" | \"wifi\" | \"wifi_inactive\" | \"windscreen_heating\" | \"windscreen_heating_inactive\"",
+                    "resolved": "\"24v_battery\" | \"24v_battery_inactive\" | \"acceleration\" | \"acceleration_inactive\" | \"adblue\" | \"adblue_inactive\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio\" | \"audio_inactive\" | \"award\" | \"back\" | \"backward\" | \"backward_inactive\" | \"bento\" | \"bug\" | \"bug_inactive\" | \"burger\" | \"bus\" | \"bus_inactive\" | \"cab_door\" | \"calendar\" | \"calendar_inactive\" | \"camera\" | \"camera_inactive\" | \"card\" | \"cart\" | \"charging_complete\" | \"charging_failed\" | \"charging_speed\" | \"charging_speed_inactive\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock\" | \"clock_inactive\" | \"configurator\" | \"contact\" | \"contact_inactive\" | \"cookie\" | \"cookie_inactive\" | \"coolant_level\" | \"coolant_level_inactive\" | \"copy\" | \"cross\" | \"cup\" | \"cup_inactive\" | \"dashboard\" | \"department\" | \"department_inactive\" | \"departure_scheduling\" | \"departure_scheduling_inactive\" | \"diamond\" | \"diamond_inactive\" | \"document\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_plus\" | \"document_plus_inactive\" | \"document_ppt\" | \"document_tool\" | \"document_word\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"download\" | \"driving_licence\" | \"driving_licence_inactive\" | \"drop\" | \"drop_inactive\" | \"edit\" | \"edit_inactive\" | \"email\" | \"engine\" | \"engine_inactive\" | \"environment\" | \"environment_inactive\" | \"error\" | \"exit\" | \"expand\" | \"expand_inactive\" | \"export\" | \"export_inactive\" | \"eye\" | \"eye_inactive\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"factory\" | \"factory_inactive\" | \"ferry\" | \"ferry_inactive\" | \"filters\" | \"filters_inactive\" | \"flash\" | \"flash_inactive\" | \"folder\" | \"forward\" | \"forward_inactive\" | \"fuel\" | \"fuel_gauge\" | \"fuel_gauge_inactive\" | \"fuel_inactive\" | \"gift\" | \"gift_inactive\" | \"global\" | \"guided_tour\" | \"guided_tour_inactive\" | \"hatch_open\" | \"hatch_open_1\" | \"hatch_open_2\" | \"hatch_open_inactive\" | \"heart\" | \"heart_inactive\" | \"heating_inactive_screen\" | \"history\" | \"history_inactive\" | \"home\" | \"home_inactive\" | \"idea\" | \"idea_inactive\" | \"image\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"info\" | \"insights\" | \"kebab\" | \"key\" | \"key_inactive\" | \"language\" | \"layer\" | \"layer_inactive\" | \"link\" | \"link_broken\" | \"list\" | \"list_inactive\" | \"lock\" | \"lock_inactive\" | \"map_cursor\" | \"map_cursor_inactive\" | \"maximize_fullscreen\" | \"meatballs\" | \"merge\" | \"merge_inactive\" | \"message\" | \"message_inactive\" | \"microphone\" | \"microphone_inactive\" | \"mileage\" | \"mileage_inactive\" | \"minimize_fullscreen\" | \"minus\" | \"navigate\" | \"navigate_inactive\" | \"notification\" | \"notification_inactive\" | \"notification_snooze\" | \"oil_level\" | \"oil_level_inactive\" | \"paperclip\" | \"pause\" | \"pause_inactive\" | \"phone\" | \"phone_inactive\" | \"pie_chart\" | \"pin\" | \"pin_inactive\" | \"placeholder\" | \"play\" | \"play_inactive\" | \"plus\" | \"powerplug\" | \"powerplug_inactive\" | \"print\" | \"print_inactive\" | \"privacy\" | \"privacy_inactive\" | \"profile\" | \"profile_inactive\" | \"prohibited\" | \"proportions\" | \"proportions_inactive\" | \"range\" | \"range_inactive\" | \"redirect\" | \"refresh\" | \"refresh_inactive\" | \"reload\" | \"reload_inactive\" | \"repeat\" | \"report\" | \"report_inactive\" | \"route\" | \"route_inactive\" | \"save\" | \"save_inactive\" | \"search\" | \"send\" | \"send_inactive\" | \"settings\" | \"share\" | \"shuffle\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone\" | \"smartphone_inactive\" | \"sorting\" | \"speedometer\" | \"speedometer_inactive\" | \"star\" | \"support\" | \"target\" | \"target_inactive\" | \"temperature\" | \"temperature_inactive\" | \"text\" | \"text_inactive\" | \"thumbs_down\" | \"thumbs_up\" | \"tick\" | \"timer\" | \"tool\" | \"tool_inactive\" | \"trailer\" | \"trailer_inactive\" | \"trash\" | \"trash_inactive\" | \"truck\" | \"truck_inactive\" | \"undo\" | \"undo_inactive\" | \"unlock\" | \"upload\" | \"video\" | \"video_inactive\" | \"wallet\" | \"warning\" | \"weight\" | \"weight_inactive\" | \"wifi\" | \"wifi_inactive\" | \"windscreen_heating\" | \"windscreen_heating_inactive\"",
                     "references": {
                         "IconNames": {
                             "location": "import",
@@ -152,6 +208,11 @@ export class Icon {
             }
         };
     }
+    static get states() {
+        return {
+            "pathD": {}
+        };
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{