@nldd/design-system 0.8.46 → 0.8.48

package/dist/components/navigation/menu-bar-item/menu-bar-item.js

@@ -3,7 +3,8 @@
  *
  * Interactief bouwblok voor gebruik in een menu bar. Rendert als <a> (met href)
  * of <button> (zonder href). Ondersteunt icon, text, disclosure indicator,
- * en expandable popover menu via slotted nldd-menu-item elementen.
+ * en een expandable popover via een geslotte `<nldd-menu>` (of ander
+ * popover-element).
  *
  * @element nldd-menu-bar-item
  * @attr {string} text - Tekst van het item
@@ -11,7 +12,7 @@
  * @attr {string} current-type - aria-current waarde als current is true ('page', 'step', 'location', 'true'). Standaard: 'page'
  * @attr {string} href - Optionele link URL. Zonder href rendert als button.
  * @attr {string} icon - Optioneel icon naam (nldd-icon)
- * @attr {boolean} expandable - Toon disclosure icon en open popover bij klik
+ * @attr {boolean} expandable - Toon disclosure icon en open de geslotte `<nldd-menu>` bij klik
  * @attr {boolean} icon-only - Verberg tekst visueel (altijd)
  * @attr {'icon'|'text'} content-priority - Bepaalt wat zichtbaar blijft in compact modus: 'icon' verbergt tekst, 'text' verbergt icon
  * @attr {boolean} compact - Activeert content-priority gedrag (gezet door parent nldd-menu-bar)
@@ -22,10 +23,10 @@
  *
  * @fires select - Bij klik op non-expandable button item (bubbles, composed)
  *
- * @slot - Slotted nldd-menu-item en nldd-menu-divider voor expandable popover.
- *   Items worden gekloond naar het popover menu (cloneNode). JS event listeners
- *   op slotted items worden niet meegenomen. Gebruik event delegation op een
- *   parent element als custom click handlers nodig zijn.
+ * @slot - Inhoud van de expandable popover — wrap items in een `<nldd-menu>`
+ *   zodat dit component de menu-API (variant, accessible-label, translations,
+ *   filterFn, …) niet hoeft te dupliceren. Event listeners op items werken
+ *   direct, omdat er niet meer gekloond wordt.
  */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -75,6 +76,11 @@ let NLDDMenuBarItem = class NLDDMenuBarItem extends LitElement {
         this._menu = null;
         this._menuOpen = false;
         this._pointerdownWhileMenuOpen = false;
+        this._menuToggleHandler = null;
+        this._onSlotChange = () => {
+            // Re-wire when a consumer swaps the slotted <nldd-menu> at runtime.
+            this._wireMenu();
+        };
         // ## Event handlers
         this._handlePointerdown = () => {
             if (this._menuOpen) {
@@ -87,7 +93,7 @@ let NLDDMenuBarItem = class NLDDMenuBarItem extends LitElement {
                 event.stopPropagation();
                 return;
             }
-            if (this.expandable && this._hasMenuItems()) {
+            if (this.expandable && this._findMenu()) {
                 event.preventDefault();
                 this._toggleMenu();
                 return;
@@ -107,68 +113,64 @@ let NLDDMenuBarItem = class NLDDMenuBarItem extends LitElement {
         super.connectedCallback();
         this.addEventListener('pointerdown', this._handlePointerdown);
         this.addEventListener('click', this._handleClick);
+        // Pre-render snapshot — if children are already in light DOM by the
+        // time we connect, wire them now. (querySelector returns the DOM
+        // node even before the custom element has upgraded; the toggle
+        // listener attaches to the stable DOM node and survives upgrade.)
+        this._wireMenu();
+    }
+    firstUpdated() {
+        // Once the shadow is rendered the slot's slotchange has fired and we
+        // have a definitive view of the projected content; re-wire as a
+        // safety net for any consumer who slotted the menu after
+        // connectedCallback but before the first render.
+        this._wireMenu();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('pointerdown', this._handlePointerdown);
         this.removeEventListener('click', this._handleClick);
-        this._menu?.remove();
-        this._menu = null;
-    }
-    updated(changed) {
-        // Clean up menu when expandable is removed; creation is lazy in _toggleMenu()
-        if (changed.has('expandable') && !this.expandable && this._menu) {
-            this._menu.remove();
-            this._menu = null;
-        }
+        this._unwireMenu();
     }
     focus(options) {
         const focusable = this.shadowRoot?.querySelector('button, a');
         focusable?.focus(options);
     }
     // ## Helpers
-    _hasMenuItems() {
-        return this.querySelector('nldd-menu-item, nldd-menu-divider') !== null;
+    _findMenu() {
+        return this.querySelector('nldd-menu');
     }
-    // ## Menu popover
-    _createMenu() {
-        if (this._menu || !this._hasMenuItems())
+    _wireMenu() {
+        const menu = this._findMenu();
+        if (menu === this._menu)
             return;
-        if (typeof document === 'undefined')
+        this._unwireMenu();
+        if (!menu)
             return;
-        const menu = document.createElement('nldd-menu');
-        menu.setAttribute('placement', 'bottom-start');
-        menu.addEventListener('toggle', (event) => {
+        this._menu = menu;
+        this._menuToggleHandler = (event) => {
             const isOpen = event.newState === 'open';
             this._menuOpen = isOpen;
             this.expanded = isOpen;
-        });
-        document.body.appendChild(menu);
-        this._menu = menu;
+        };
+        menu.addEventListener('toggle', this._menuToggleHandler);
     }
-    /**
-     * Clone slotted menu items into the popover menu.
-     * Note: cloneNode(true) copies DOM structure and attributes but not JS event
-     * listeners. Custom click handlers on slotted nldd-menu-item elements won't
-     * fire in the popover. Use event delegation on a parent element instead.
-     */
-    _syncMenuItems() {
-        if (!this._menu)
-            return;
-        this._menu.replaceChildren();
-        const items = this.querySelectorAll('nldd-menu-item, nldd-menu-divider');
-        items.forEach(item => {
-            const clone = item.cloneNode(true);
-            this._menu.appendChild(clone);
-        });
+    _unwireMenu() {
+        if (this._menu && this._menuToggleHandler) {
+            this._menu.removeEventListener('toggle', this._menuToggleHandler);
+        }
+        this._menu = null;
+        this._menuToggleHandler = null;
+        this._menuOpen = false;
     }
+    // ## Menu popover
     _toggleMenu() {
         if (this._pointerdownWhileMenuOpen) {
             this._pointerdownWhileMenuOpen = false;
             return;
         }
-        if (!this._menu)
-            this._createMenu();
+        // _wireMenu already ran in connectedCallback and re-runs on
+        // slotchange — no need to call it here.
         if (!this._menu)
             return;
         this._menu.anchorElement = this;
@@ -176,7 +178,6 @@ let NLDDMenuBarItem = class NLDDMenuBarItem extends LitElement {
             this._menu.hidePopover();
         }
         else {
-            this._syncMenuItems();
             this._menu.showPopover();
         }
     }

package/dist/components/navigation/menu-bar-item/menu-bar-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-bar-item.js","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"menu-bar-item.js","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.ts"],"names":[],"mappings":"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"}

package/dist/components/navigation/menu-bar-item/menu-bar-item.template.js

@@ -33,7 +33,7 @@ export function template(component) {
 					</span>
 				` : nothing}
 			</a>
-			<slot></slot>
+			<slot @slotchange=${component._onSlotChange}></slot>
 		`;
     }
     return html `
@@ -61,7 +61,7 @@ export function template(component) {
 				</span>
 			` : nothing}
 		</button>
-		<slot></slot>
+		<slot @slotchange=${component._onSlotChange}></slot>
 	`;
 }
 //# sourceMappingURL=menu-bar-item.template.js.map

package/dist/components/navigation/menu-bar-item/menu-bar-item.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-bar-item.template.js","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,MAAM,UAAU,QAAQ,CAAC,SAA0B;IAClD,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,eAAe,KAAK,MAAM,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC;IAClI,MAAM,SAAS,GAAG,SAAS,CAAC,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACvF,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC;IACxE,MAAM,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC;IACrF,MAAM,YAAY,GAAG,CAAC,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAEzG,IAAI,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAA;;WAEF,QAAkB;oBACT,SAAS,CAAC,QAAQ,IAAI,OAAO;eAClC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;mBAC/B,WAAW;iBACb,SAAS;oBACN,YAAY;oBACZ,YAAY;;MAE1B,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;wBAEH,SAAS,CAAC,IAAI;;KAEjC,CAAC,CAAC,CAAC,OAAO;;OAER,SAAS,CAAC,IAAI;;MAEf,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;KAI5B,CAAC,CAAC,CAAC,OAAO;;;GAGZ,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;;eAGG,SAAS,CAAC,QAAQ;kBACf,WAAW;gBACb,SAAS;mBACN,YAAY;mBACZ,YAAY;2BACJ,SAAS,CAAC,oBAAoB;0BAC/B,SAAS,CAAC,mBAAmB;;KAElD,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;uBAEH,SAAS,CAAC,IAAI;;IAEjC,CAAC,CAAC,CAAC,OAAO;;MAER,SAAS,CAAC,IAAI;;KAEf,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI5B,CAAC,CAAC,CAAC,OAAO;;;EAGZ,CAAC;AACH,CAAC"}
+{"version":3,"file":"menu-bar-item.template.js","sourceRoot":"","sources":["../../../../src/components/navigation/menu-bar-item/menu-bar-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,MAAM,UAAU,QAAQ,CAAC,SAA0B;IAClD,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,eAAe,KAAK,MAAM,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC;IAClI,MAAM,SAAS,GAAG,SAAS,CAAC,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACvF,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC;IACxE,MAAM,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC;IACrF,MAAM,YAAY,GAAG,CAAC,SAAS,CAAC,UAAU,IAAI,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAEzG,IAAI,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAA;;WAEF,QAAkB;oBACT,SAAS,CAAC,QAAQ,IAAI,OAAO;eAClC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;mBAC/B,WAAW;iBACb,SAAS;oBACN,YAAY;oBACZ,YAAY;;MAE1B,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;wBAEH,SAAS,CAAC,IAAI;;KAEjC,CAAC,CAAC,CAAC,OAAO;;OAER,SAAS,CAAC,IAAI;;MAEf,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;KAI5B,CAAC,CAAC,CAAC,OAAO;;uBAEQ,SAAS,CAAC,aAAa;GAC3C,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;;eAGG,SAAS,CAAC,QAAQ;kBACf,WAAW;gBACb,SAAS;mBACN,YAAY;mBACZ,YAAY;2BACJ,SAAS,CAAC,oBAAoB;0BAC/B,SAAS,CAAC,mBAAmB;;KAElD,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;uBAEH,SAAS,CAAC,IAAI;;IAEjC,CAAC,CAAC,CAAC,OAAO;;MAER,SAAS,CAAC,IAAI;;KAEf,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;;;;IAI5B,CAAC,CAAC,CAAC,OAAO;;sBAEQ,SAAS,CAAC,aAAa;EAC3C,CAAC;AACH,CAAC"}

package/dist/components/navigation/pagination/pagination.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,yBAgQ5B,CAAC"}
+{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,yBAsQ5B,CAAC"}

package/dist/components/navigation/pagination/pagination.styles.js

@@ -70,6 +70,7 @@ export const paginationStyles = css `
 	}
 
 	a.pagination__page-button {
+		cursor: var(--semantics-controls-link-cursor);
 		text-decoration: none;
 	}
 
@@ -77,6 +78,11 @@ export const paginationStyles = css `
 		.pagination__page-button:hover:not(.is-current) {
 			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
 		}
+
+		.pagination__page-button.is-current:hover {
+			background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
+			color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
+		}
 	}
 
 	.pagination__page-button:active:not(.is-current) {

package/dist/components/navigation/pagination/pagination.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgQlC,CAAC"}
+{"version":3,"file":"pagination.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsQlC,CAAC"}

package/dist/components/navigation/tab-bar/tab-bar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAuDxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yBA+H5B,CAAC"}
+{"version":3,"file":"tab-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAuDxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yBA8I5B,CAAC"}

package/dist/components/navigation/tab-bar/tab-bar.styles.js

@@ -117,6 +117,16 @@ export const tabBarItemStyles = css `
 		.tab-bar__item:hover {
 			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
 		}
+
+		:host([selected]) .tab-bar__item:hover {
+			background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
+			color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
+		}
+	}
+
+	.tab-bar__item:active {
+		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 	}
 
 	:host([selected]) .tab-bar__item {
@@ -124,6 +134,11 @@ export const tabBarItemStyles = css `
 		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
 	}
 
+	:host([selected]) .tab-bar__item:active {
+		background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
+	}
+
 	@media (forced-colors: active) {
 		:host([selected]) .tab-bar__item {
 			background-color: Highlight;

package/dist/components/navigation/tab-bar/tab-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD9B,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HlC,CAAC"}
+{"version":3,"file":"tab-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD9B,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8IlC,CAAC"}

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-navigation-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,sBAAsB,yBAsTlC,CAAC"}
+{"version":3,"file":"top-navigation-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,sBAAsB,yBAwTlC,CAAC"}

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js

@@ -13,6 +13,7 @@ export const topNavigationBarStyles = css `
 		--_logo-width: var(--primitives-space-40);
 		--_wordmark-content-color: light-dark(var(--primitives-color-reference-lintblauw), var(--primitives-color-neutral-1000));
 
+		container-type: inline-size;
 		display: block;
 		width: 100%;
 	}
@@ -27,8 +28,6 @@ export const topNavigationBarStyles = css `
 	.top-navigation-bar {
 		box-sizing: border-box;
 		display: flex;
-		container-type: inline-size;
-		container-name: top-navigation-bar-container;
 		margin: 0 auto;
 		width: 100%;
 		flex-direction: column;
@@ -43,15 +42,15 @@ export const topNavigationBarStyles = css `
 		gap: var(--primitives-space-8);
 		align-items: center;
 
-		@container top-navigation-bar-container (max-width: ${smMax}) {
+		@container (max-width: ${smMax}) {
 			padding-inline: var(--semantics-page-sections-sm-margin-inline);
 		}
 
-		@container top-navigation-bar-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			padding-inline: var(--semantics-page-sections-md-margin-inline);
 		}
 
-		@container top-navigation-bar-container (min-width: ${lgMin}) {
+		@container (min-width: ${lgMin}) {
 			padding-inline: var(--semantics-page-sections-lg-margin-inline);
 		}
 	}
@@ -67,15 +66,15 @@ export const topNavigationBarStyles = css `
 		align-items: center;
 		justify-content: center;
 
-		@container top-navigation-bar-container (max-width: ${smMax}) {
+		@container (max-width: ${smMax}) {
 			--_logo-width: var(--primitives-space-40);
 		}
 
-		@container top-navigation-bar-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
 			--_logo-width: var(--primitives-space-44);
 		}
 
-		@container top-navigation-bar-container (min-width: ${lgMin}) {
+		@container (min-width: ${lgMin}) {
 			--_logo-width: var(--primitives-space-48);
 		}
 	}
@@ -150,16 +149,19 @@ export const topNavigationBarStyles = css `
 	.top-navigation-bar__wordmark-title {
 		margin: 0;
 		font: var(--primitives-font-body-sm-bold-flat);
+		text-wrap: pretty;
 	}
 
 	.top-navigation-bar__wordmark-subtitle {
 		margin: 0;
 		font: var(--primitives-font-body-xs-regular-flat);
+		text-wrap: pretty;
 	}
 
 	.top-navigation-bar__wordmark-supporting-text {
 		margin: 0;
 		font: var(--primitives-font-body-xxs-regular-flat);
+		text-wrap: pretty;
 	}
 
 
@@ -168,19 +170,19 @@ export const topNavigationBarStyles = css `
 	.top-navigation-bar__main-bar {
 		display: flex;
 
-		@container top-navigation-bar-container (max-width: ${smMax}) {
-			padding-inline: var(--semantics-page-sections-sm-margin-inline);
+		@container (max-width: ${smMax}) {
+			padding-inline: calc(var(--semantics-page-sections-sm-margin-inline) - var(--components-menu-bar-item-inline-padding));
 			flex-direction: column;
 		}
 
-		@container top-navigation-bar-container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			padding-inline: var(--semantics-page-sections-md-margin-inline);
+		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
+			padding-inline: calc(var(--semantics-page-sections-md-margin-inline) - var(--components-menu-bar-item-inline-padding));
 			flex-direction: row;
 			align-items: center;
 		}
 
-		@container top-navigation-bar-container (min-width: ${lgMin}) {
-			padding-inline: var(--semantics-page-sections-lg-margin-inline);
+		@container (min-width: ${lgMin}) {
+			padding-inline: calc(var(--semantics-page-sections-lg-margin-inline) - var(--components-menu-bar-item-inline-padding));
 			flex-direction: row;
 			align-items: center;
 		}
@@ -190,11 +192,12 @@ export const topNavigationBarStyles = css `
 
 	.top-navigation-bar__website-title-bar {
 		display: flex;
-		padding: var(--primitives-space-4) var(--primitives-space-8);
+		padding-block: var(--primitives-space-4);
+		padding-inline: calc(var(--primitives-space-8) + var(--components-menu-bar-item-inline-padding));
 		align-items: center;
 		justify-content: center;
 
-		@container top-navigation-bar-container (min-width: ${mdMin}) {
+		@container (min-width: ${mdMin}) {
 			padding: 0;
 			justify-content: flex-start;
 		}
@@ -207,13 +210,12 @@ export const topNavigationBarStyles = css `
 		color: var(--semantics-content-color);
 		white-space: nowrap;
 
-		@container top-navigation-bar-container (min-width: ${mdMin}) {
+		@container (min-width: ${mdMin}) {
 			font: var(--components-top-navigation-bar-title-md-font);
-			/* md+ only: title shares the row with the menu-bar; on sm it stacks and this margin would offset the centered title */
-			margin-inline-end: var(--primitives-space-8);
+			margin-inline: var(--components-menu-bar-item-inline-padding);
 		}
 
-		@container top-navigation-bar-container (min-width: ${lgMin}) {
+		@container (min-width: ${lgMin}) {
 			font: var(--components-top-navigation-bar-title-lg-font);
 		}
 	}
@@ -246,12 +248,12 @@ export const topNavigationBarStyles = css `
 		min-width: 0;
 		align-items: center;
 
-		@container top-navigation-bar-container (max-width: ${mdMax}) {
+		@container (max-width: ${mdMax}) {
 			flex-grow: 0;
 			flex-shrink: 0;
 		}
 
-		@container top-navigation-bar-container (min-width: ${lgMin}) {
+		@container (min-width: ${lgMin}) {
 			flex-grow: 1;
 			flex-shrink: 1;
 		}
@@ -264,12 +266,12 @@ export const topNavigationBarStyles = css `
 		min-width: 0;
 		align-items: center;
 
-		@container top-navigation-bar-container (max-width: ${mdMax}) {
+		@container (max-width: ${mdMax}) {
 			flex-grow: 1;
 			flex-shrink: 1;
 		}
 
-		@container top-navigation-bar-container (min-width: ${lgMin}) {
+		@container (min-width: ${lgMin}) {
 			flex-grow: 0;
 			flex-shrink: 0;
 		}
@@ -282,7 +284,7 @@ export const topNavigationBarStyles = css `
 		min-width: 0;
 		flex-grow: 1;
 		flex-shrink: 1;
-		@container top-navigation-bar-container (min-width: ${lgMin}) {
+		@container (min-width: ${lgMin}) {
 			:host(.has-global-items) & {
 				display: flex;
 			}
@@ -294,7 +296,7 @@ export const topNavigationBarStyles = css `
 	.top-navigation-bar__menu-button {
 		display: none;
 
-		@container top-navigation-bar-container (max-width: ${mdMax}) {
+		@container (max-width: ${mdMax}) {
 			:host(.has-global-items) & {
 				display: inline-block;
 			}

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-navigation-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAuCe,KAAK;;;;wDAIL,KAAK,qBAAqB,KAAK;;;;wDAI/B,KAAK;;;;;;;;;;;;;;;;wDAgBL,KAAK;;;;wDAIL,KAAK,qBAAqB,KAAK;;;;wDAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDA6FL,KAAK;;;;;wDAKL,KAAK,qBAAqB,KAAK;;;;;;wDAM/B,KAAK;;;;;;;;;;;;;;;wDAeL,KAAK;;;;;;;;;;;;;wDAaL,KAAK;;;;;;wDAML,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAiCL,KAAK;;;;;wDAKL,KAAK;;;;;;;;;;;;;wDAaL,KAAK;;;;;wDAKL,KAAK;;;;;;;;;;;;;wDAaL,KAAK;;;;;;;;;;;;wDAYL,KAAK;;;;;;;;;;;;;;;;;;;;CAoB5D,CAAC"}
+{"version":3,"file":"top-navigation-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAsCd,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAgGL,KAAK;;;;;2BAKL,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;;2BAKL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAiCL,KAAK;;;;;2BAKL,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;;2BAKL,KAAK;;;;;;;;;;;;;2BAaL,KAAK;;;;;;;;;;;;2BAYL,KAAK;;;;;;;;;;;;;;;;;;;;CAoB/B,CAAC"}

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.template.js

@@ -85,7 +85,7 @@ export function template(component) {
 						${component._hasBackButton ? html `
 							<div class="top-navigation-bar__back-button">
 								<nldd-menu-bar-item
-									icon="arrow-left"
+									icon="chevron-left"
 									text="${component._backText}"
 									href=${component.backHref || nothing}
 									accessible-label="${component._backText}"

package/dist/components/prism-gherkin-CMPYyXOQ.js

@@ -0,0 +1,82 @@
+(function(Prism2) {
+  var tableRow = /(?:\r?\n|\r)[ \t]*\|.+\|(?:(?!\|).)*/.source;
+  Prism2.languages.gherkin = {
+    "pystring": {
+      pattern: /("""|''')[\s\S]+?\1/,
+      alias: "string"
+    },
+    "comment": {
+      pattern: /(^[ \t]*)#.*/m,
+      lookbehind: true
+    },
+    "tag": {
+      pattern: /(^[ \t]*)@\S*/m,
+      lookbehind: true
+    },
+    "feature": {
+      pattern: /((?:^|\r?\n|\r)[ \t]*)(?:Ability|Ahoy matey!|Arwedd|Aspekt|Besigheid Behoefte|Business Need|Caracteristica|Característica|Egenskab|Egenskap|Eiginleiki|Feature|Fīča|Fitur|Fonctionnalité|Fonksyonalite|Funcionalidade|Funcionalitat|Functionalitate|Funcţionalitate|Funcționalitate|Functionaliteit|Fungsi|Funkcia|Funkcija|Funkcionalitāte|Funkcionalnost|Funkcja|Funksie|Funktionalität|Funktionalitéit|Funzionalità|Hwaet|Hwæt|Jellemző|Karakteristik|Lastnost|Mak|Mogucnost|laH|Mogućnost|Moznosti|Možnosti|OH HAI|Omadus|Ominaisuus|Osobina|Özellik|Potrzeba biznesowa|perbogh|poQbogh malja'|Požadavek|Požiadavka|Pretty much|Qap|Qu'meH 'ut|Savybė|Tính năng|Trajto|Vermoë|Vlastnosť|Właściwość|Značilnost|Δυνατότητα|Λειτουργία|Могућност|Мөмкинлек|Особина|Свойство|Үзенчәлеклелек|Функционал|Функционалност|Функция|Функціонал|תכונה|خاصية|خصوصیت|صلاحیت|کاروبار کی ضرورت|وِیژگی|रूप लेख|ਖਾਸੀਅਤ|ਨਕਸ਼ ਨੁਹਾਰ|ਮੁਹਾਂਦਰਾ|గుణము|ಹೆಚ್ಚಳ|ความต้องการทางธุรกิจ|ความสามารถ|โครงหลัก|기능|フィーチャ|功能|機能):(?:[^:\r\n]+(?:\r?\n|\r|$))*/,
+      lookbehind: true,
+      inside: {
+        "important": {
+          pattern: /(:)[^\r\n]+/,
+          lookbehind: true
+        },
+        "keyword": /[^:\r\n]+:/
+      }
+    },
+    "scenario": {
+      pattern: /(^[ \t]*)(?:Abstract Scenario|Abstrakt Scenario|Achtergrond|Aer|Ær|Agtergrond|All y'all|Antecedentes|Antecedents|Atburðarás|Atburðarásir|Awww, look mate|B4|Background|Baggrund|Bakgrund|Bakgrunn|Bakgrunnur|Beispiele|Beispiller|Bối cảnh|Cefndir|Cenario|Cenário|Cenario de Fundo|Cenário de Fundo|Cenarios|Cenários|Contesto|Context|Contexte|Contexto|Conto|Contoh|Contone|Dæmi|Dasar|Dead men tell no tales|Delineacao do Cenario|Delineação do Cenário|Dis is what went down|Dữ liệu|Dyagram Senaryo|Dyagram senaryo|Egzanp|Ejemplos|Eksempler|Ekzemploj|Enghreifftiau|Esbozo do escenario|Escenari|Escenario|Esempi|Esquema de l'escenari|Esquema del escenario|Esquema do Cenario|Esquema do Cenário|EXAMPLZ|Examples|Exempel|Exemple|Exemples|Exemplos|First off|Fono|Forgatókönyv|Forgatókönyv vázlat|Fundo|Geçmiş|Grundlage|Hannergrond|ghantoH|Háttér|Heave to|Istorik|Juhtumid|Keadaan|Khung kịch bản|Khung tình huống|Kịch bản|Koncept|Konsep skenario|Kontèks|Kontekst|Kontekstas|Konteksts|Kontext|Konturo de la scenaro|Latar Belakang|lut chovnatlh|lut|lutmey|Lýsing Atburðarásar|Lýsing Dæma|MISHUN SRSLY|MISHUN|Menggariskan Senario|mo'|Náčrt Scenára|Náčrt Scénáře|Náčrt Scenáru|Oris scenarija|Örnekler|Osnova|Osnova Scenára|Osnova scénáře|Osnutek|Ozadje|Paraugs|Pavyzdžiai|Példák|Piemēri|Plan du scénario|Plan du Scénario|Plan Senaryo|Plan senaryo|Plang vum Szenario|Pozadí|Pozadie|Pozadina|Príklady|Příklady|Primer|Primeri|Primjeri|Przykłady|Raamstsenaarium|Reckon it's like|Rerefons|Scenár|Scénář|Scenarie|Scenarij|Scenarijai|Scenarijaus šablonas|Scenariji|Scenārijs|Scenārijs pēc parauga|Scenarijus|Scenario|Scénario|Scenario Amlinellol|Scenario Outline|Scenario Template|Scenariomal|Scenariomall|Scenarios|Scenariu|Scenariusz|Scenaro|Schema dello scenario|Se ðe|Se the|Se þe|Senario|Senaryo Deskripsyon|Senaryo deskripsyon|Senaryo|Senaryo taslağı|Shiver me timbers|Situācija|Situai|Situasie Uiteensetting|Situasie|Skenario konsep|Skenario|Skica|Structura scenariu|Structură scenariu|Struktura scenarija|Stsenaarium|Swa hwaer swa|Swa|Swa hwær swa|Szablon scenariusza|Szenario|Szenariogrundriss|Tapaukset|Tapaus|Tapausaihio|Taust|Tausta|Template Keadaan|Template Senario|Template Situai|The thing of it is|Tình huống|Variantai|Voorbeelde|Voorbeelden|Wharrimean is|Yo-ho-ho|You'll wanna|Założenia|Παραδείγματα|Περιγραφή Σεναρίου|Σενάρια|Σενάριο|Υπόβαθρο|Кереш|Контекст|Концепт|Мисаллар|Мисоллар|Основа|Передумова|Позадина|Предистория|Предыстория|Приклади|Пример|Примери|Примеры|Рамка на сценарий|Скица|Структура сценарија|Структура сценария|Структура сценарію|Сценарий|Сценарий структураси|Сценарийның төзелеше|Сценарији|Сценарио|Сценарій|Тарих|Үрнәкләр|דוגמאות|רקע|תבנית תרחיש|תרחיש|الخلفية|الگوی سناریو|امثلة|پس منظر|زمینه|سناریو|سيناريو|سيناريو مخطط|مثالیں|منظر نامے کا خاکہ|منظرنامہ|نمونه ها|उदाहरण|परिदृश्य|परिदृश्य रूपरेखा|पृष्ठभूमि|ਉਦਾਹਰਨਾਂ|ਪਟਕਥਾ|ਪਟਕਥਾ ਢਾਂਚਾ|ਪਟਕਥਾ ਰੂਪ ਰੇਖਾ|ਪਿਛੋਕੜ|ఉదాహరణలు|కథనం|నేపథ్యం|సన్నివేశం|ಉದಾಹರಣೆಗಳು|ಕಥಾಸಾರಾಂಶ|ವಿವರಣೆ|ಹಿನ್ನೆಲೆ|โครงสร้างของเหตุการณ์|ชุดของตัวอย่าง|ชุดของเหตุการณ์|แนวคิด|สรุปเหตุการณ์|เหตุการณ์|배경|시나리오|시나리오 개요|예|サンプル|シナリオ|シナリオアウトライン|シナリオテンプレ|シナリオテンプレート|テンプレ|例|例子|剧本|剧本大纲|劇本|劇本大綱|场景|场景大纲|場景|場景大綱|背景):[^:\r\n]*/m,
+      lookbehind: true,
+      inside: {
+        "important": {
+          pattern: /(:)[^\r\n]*/,
+          lookbehind: true
+        },
+        "keyword": /[^:\r\n]+:/
+      }
+    },
+    "table-body": {
+      // Look-behind is used to skip the table head, which has the same format as any table row
+      pattern: RegExp("(" + tableRow + ")(?:" + tableRow + ")+"),
+      lookbehind: true,
+      inside: {
+        "outline": {
+          pattern: /<[^>]+>/,
+          alias: "variable"
+        },
+        "td": {
+          pattern: /\s*[^\s|][^|]*/,
+          alias: "string"
+        },
+        "punctuation": /\|/
+      }
+    },
+    "table-head": {
+      pattern: RegExp(tableRow),
+      inside: {
+        "th": {
+          pattern: /\s*[^\s|][^|]*/,
+          alias: "variable"
+        },
+        "punctuation": /\|/
+      }
+    },
+    "atrule": {
+      pattern: /(^[ \t]+)(?:'a|'ach|'ej|7|a|A také|A taktiež|A tiež|A zároveň|Aber|Ac|Adott|Akkor|Ak|Aleshores|Ale|Ali|Allora|Alors|Als|Ama|Amennyiben|Amikor|Ampak|an|AN|Ananging|And y'all|And|Angenommen|Anrhegedig a|An|Apabila|Atès|Atesa|Atunci|Avast!|Aye|A|awer|Bagi|Banjur|Bet|Biết|Blimey!|Buh|But at the end of the day I reckon|But y'all|But|BUT|Cal|Când|Cand|Cando|Ce|Cuando|Če|Ða ðe|Ða|Dadas|Dada|Dados|Dado|DaH ghu' bejlu'|dann|Dann|Dano|Dan|Dar|Dat fiind|Data|Date fiind|Date|Dati fiind|Dati|Daţi fiind|Dați fiind|DEN|Dato|De|Den youse gotta|Dengan|Diberi|Diyelim ki|Donada|Donat|Donitaĵo|Do|Dun|Duota|Ðurh|Eeldades|Ef|Eğer ki|Entao|Então|Entón|E|En|Entonces|Epi|És|Etant donnée|Etant donné|Et|Étant données|Étant donnée|Étant donné|Etant données|Etant donnés|Étant donnés|Fakat|Gangway!|Gdy|Gegeben seien|Gegeben sei|Gegeven|Gegewe|ghu' noblu'|Gitt|Given y'all|Given|Givet|Givun|Ha|Cho|I CAN HAZ|In|Ir|It's just unbelievable|I|Ja|Jeśli|Jeżeli|Kad|Kada|Kadar|Kai|Kaj|Když|Keď|Kemudian|Ketika|Khi|Kiedy|Ko|Kuid|Kui|Kun|Lan|latlh|Le sa a|Let go and haul|Le|Lè sa a|Lè|Logo|Lorsqu'<|Lorsque|mä|Maar|Mais|Mając|Ma|Majd|Maka|Manawa|Mas|Men|Menawa|Mutta|Nalika|Nalikaning|Nanging|Når|När|Nato|Nhưng|Niin|Njuk|O zaman|Och|Og|Oletetaan|Ond|Onda|Oraz|Pak|Pero|Però|Podano|Pokiaľ|Pokud|Potem|Potom|Privzeto|Pryd|Quan|Quand|Quando|qaSDI'|Så|Sed|Se|Siis|Sipoze ke|Sipoze Ke|Sipoze|Si|Şi|Și|Soit|Stel|Tada|Tad|Takrat|Tak|Tapi|Ter|Tetapi|Tha the|Tha|Then y'all|Then|Thì|Thurh|Toda|Too right|Un|Und|ugeholl|Và|vaj|Vendar|Ve|wann|Wanneer|WEN|Wenn|When y'all|When|Wtedy|Wun|Y'know|Yeah nah|Yna|Youse know like when|Youse know when youse got|Y|Za predpokladu|Za předpokladu|Zadan|Zadani|Zadano|Zadate|Zadato|Zakładając|Zaradi|Zatati|Þa þe|Þa|Þá|Þegar|Þurh|Αλλά|Δεδομένου|Και|Όταν|Τότε|А також|Агар|Але|Али|Аммо|А|Әгәр|Әйтик|Әмма|Бирок|Ва|Вә|Дадено|Дано|Допустим|Если|Задате|Задати|Задато|И|І|К тому же|Када|Кад|Когато|Когда|Коли|Ләкин|Лекин|Нәтиҗәдә|Нехай|Но|Онда|Припустимо, що|Припустимо|Пусть|Также|Та|Тогда|Тоді|То|Унда|Һәм|Якщо|אבל|אזי|אז|בהינתן|וגם|כאשר|آنگاه|اذاً|اگر|اما|اور|با فرض|بالفرض|بفرض|پھر|تب|ثم|جب|عندما|فرض کیا|لكن|لیکن|متى|هنگامی|و|अगर|और|कदा|किन्तु|चूंकि|जब|तथा|तदा|तब|परन्तु|पर|यदि|ਅਤੇ|ਜਦੋਂ|ਜਿਵੇਂ ਕਿ|ਜੇਕਰ|ਤਦ|ਪਰ|అప్పుడు|ఈ పరిస్థితిలో|కాని|చెప్పబడినది|మరియు|ಆದರೆ|ನಂತರ|ನೀಡಿದ|ಮತ್ತು|ಸ್ಥಿತಿಯನ್ನು|กำหนดให้|ดังนั้น|แต่|เมื่อ|และ|그러면<|그리고<|단<|만약<|만일<|먼저<|조건<|하지만<|かつ<|しかし<|ただし<|ならば<|もし<|並且<|但し<|但是<|假如<|假定<|假設<|假设<|前提<|同时<|同時<|并且<|当<|當<|而且<|那么<|那麼<)(?=[ \t])/m,
+      lookbehind: true
+    },
+    "string": {
+      pattern: /"(?:\\.|[^"\\\r\n])*"|'(?:\\.|[^'\\\r\n])*'/,
+      inside: {
+        "outline": {
+          pattern: /<[^>]+>/,
+          alias: "variable"
+        }
+      }
+    },
+    "outline": {
+      pattern: /<[^>]+>/,
+      alias: "variable"
+    }
+  };
+})(Prism);