@nldd/design-system 0.8.44 → 0.8.45

package/dist/components/inputs/toggle-button/toggle-button.styles.js

@@ -5,6 +5,14 @@ export const toggleButtonStyles = css `
 	/* # Host */
 
 	:host {
+		--_corner-radius: var(--semantics-controls-md-corner-radius);
+		--_min-size: var(--semantics-controls-md-min-size);
+		--_padding: var(--semantics-controls-md-block-padding) var(--semantics-controls-md-inline-padding);
+		--_gap: var(--semantics-buttons-md-gap);
+		--_font: var(--semantics-buttons-md-font);
+		--_icon-size: var(--semantics-buttons-md-icon-size);
+		--_icon-only-icon-size: var(--semantics-buttons-md-icon-only-icon-size);
+
 		display: inline-block;
 		-webkit-tap-highlight-color: transparent;
 	}
@@ -13,6 +21,26 @@ export const toggleButtonStyles = css `
 		display: none;
 	}
 
+	:host([size="sm"]) {
+		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_min-size: var(--semantics-controls-sm-min-size);
+		--_padding: var(--semantics-controls-sm-block-padding) var(--semantics-controls-sm-inline-padding);
+		--_gap: var(--semantics-buttons-sm-gap);
+		--_font: var(--semantics-buttons-sm-font);
+		--_icon-size: var(--semantics-buttons-sm-icon-size);
+		--_icon-only-icon-size: var(--semantics-buttons-sm-icon-only-icon-size);
+	}
+
+	:host([size="xs"]) {
+		--_corner-radius: var(--semantics-controls-xs-corner-radius);
+		--_min-size: var(--semantics-controls-xs-min-size);
+		--_padding: var(--semantics-controls-xs-block-padding) var(--semantics-controls-xs-inline-padding);
+		--_gap: var(--semantics-buttons-xs-gap);
+		--_font: var(--semantics-buttons-xs-font);
+		--_icon-size: var(--semantics-buttons-xs-icon-size);
+		--_icon-only-icon-size: var(--semantics-buttons-xs-icon-only-icon-size);
+	}
+
 	:host([disabled]) {
 		opacity: var(--primitives-opacity-disabled);
 		pointer-events: none;
@@ -22,75 +50,31 @@ export const toggleButtonStyles = css `
 	/* # Block */
 
 	.toggle-button {
-		/* Reset */
+		box-sizing: border-box;
+		display: inline-flex;
+		position: relative;
 		margin: 0;
 		border: none;
+		border-radius: var(--_corner-radius);
 		background: none;
-		padding: 0;
-		font: inherit;
-		appearance: none;
-
-		/* Layout */
-		position: relative;
-		box-sizing: border-box;
-		display: inline-flex;
+		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		min-height: var(--_min-size);
+		padding: var(--_padding);
+		gap: var(--_gap);
 		align-items: center;
 		justify-content: center;
+		color: var(--semantics-buttons-neutral-tinted-content-color);
+		font: var(--_font);
 		white-space: nowrap;
 		text-decoration: none;
-
-		/* Appearance */
-		background-color: var(--semantics-buttons-neutral-tinted-background-color);
-		color: var(--semantics-buttons-neutral-tinted-content-color);
-	}
-
-	/* ## Sizes */
-
-	:host([size="xs"]) .toggle-button {
-		border-radius: var(--semantics-controls-xs-corner-radius);
-		min-height: var(--semantics-controls-xs-min-size);
-		padding: var(--semantics-controls-xs-block-padding) var(--semantics-controls-xs-inline-padding);
-		gap: var(--semantics-buttons-xs-gap);
-		font: var(--semantics-buttons-xs-font);
-	}
-
-	:host([size="sm"]) .toggle-button {
-		border-radius: var(--semantics-controls-sm-corner-radius);
-		min-height: var(--semantics-controls-sm-min-size);
-		padding: var(--semantics-controls-sm-block-padding) var(--semantics-controls-sm-inline-padding);
-		gap: var(--semantics-buttons-sm-gap);
-		font: var(--semantics-buttons-sm-font);
-	}
-
-	:host([size="md"]) .toggle-button,
-	:host(:not([size])) .toggle-button {
-		border-radius: var(--semantics-controls-md-corner-radius);
-		min-height: var(--semantics-controls-md-min-size);
-		padding: var(--semantics-controls-md-block-padding) var(--semantics-controls-md-inline-padding);
-		gap: var(--semantics-buttons-md-gap);
-		font: var(--semantics-buttons-md-font);
-	}
-
-	/* ## Icon-only sizes */
-
-	:host([icon-only][size="xs"]) .toggle-button {
-		width: var(--semantics-controls-xs-min-size);
-		padding: 0;
-	}
-
-	:host([icon-only][size="sm"]) .toggle-button {
-		width: var(--semantics-controls-sm-min-size);
-		padding: 0;
+		appearance: none;
 	}
 
-	:host([icon-only][size="md"]) .toggle-button,
-	:host([icon-only]:not([size])) .toggle-button {
-		width: var(--semantics-controls-md-min-size);
+	:host([variant="icon"]) .toggle-button {
+		width: var(--_min-size);
 		padding: 0;
 	}
 
-	/* ## Hover */
-
 	@media (hover: hover) {
 		.toggle-button:hover,
 		.toggle-button:has(.toggle-button__input:hover) {
@@ -99,8 +83,6 @@ export const toggleButtonStyles = css `
 		}
 	}
 
-	/* ## Selected */
-
 	:host([selected]) .toggle-button {
 		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
 		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
@@ -114,8 +96,6 @@ export const toggleButtonStyles = css `
 		}
 	}
 
-	/* ## Focus */
-
 	.toggle-button:focus-visible,
 	.toggle-button:has(.toggle-button__input:focus-visible) {
 		outline: var(--semantics-focus-ring-outline);
@@ -128,57 +108,30 @@ export const toggleButtonStyles = css `
 	}
 
 
-	/* # Icon */
+	/* # Elements */
 
-	/* Hide the original nldd-icon in the slot — it is re-rendered in the shadow DOM */
+	/* Slotted nldd-icon is re-rendered in shadow DOM — hide the original */
 	::slotted(nldd-icon) {
 		display: none;
 	}
 
 	.toggle-button__icon {
 		display: block;
+		width: var(--_icon-size);
+		height: var(--_icon-size);
 		flex-shrink: 0;
 	}
 
-	/* ## Icon size — naast tekst (default) */
-
-	:host([size="md"]) .toggle-button__icon,
-	:host(:not([size])) .toggle-button__icon {
-		width: var(--semantics-buttons-md-icon-size);
-		height: var(--semantics-buttons-md-icon-size);
+	:host([variant="icon"]) .toggle-button__icon {
+		width: var(--_icon-only-icon-size);
+		height: var(--_icon-only-icon-size);
 	}
 
-	:host([size="sm"]) .toggle-button__icon {
-		width: var(--semantics-buttons-sm-icon-size);
-		height: var(--semantics-buttons-sm-icon-size);
-	}
-
-	:host([size="xs"]) .toggle-button__icon {
-		width: var(--semantics-buttons-xs-icon-size);
-		height: var(--semantics-buttons-xs-icon-size);
-	}
-
-	/* ## Icon size — icon-only mode */
-
-	:host([icon-only][size="md"]) .toggle-button__icon,
-	:host([icon-only]:not([size])) .toggle-button__icon {
-		width: var(--semantics-buttons-md-icon-only-icon-size);
-		height: var(--semantics-buttons-md-icon-only-icon-size);
-	}
-
-	:host([icon-only][size="sm"]) .toggle-button__icon {
-		width: var(--semantics-buttons-sm-icon-only-icon-size);
-		height: var(--semantics-buttons-sm-icon-only-icon-size);
-	}
-
-	:host([icon-only][size="xs"]) .toggle-button__icon {
-		width: var(--semantics-buttons-xs-icon-only-icon-size);
-		height: var(--semantics-buttons-xs-icon-only-icon-size);
+	:host([variant="text"]) .toggle-button__icon,
+	:host([variant="text"]) ::slotted([slot="icon"]) {
+		display: none;
 	}
 
-
-	/* # Input */
-
 	.toggle-button__input {
 		position: absolute;
 		inset: 0;

package/dist/components/inputs/toggle-button/toggle-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LpC,CAAC"}
+{"version":3,"file":"toggle-button.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8IpC,CAAC"}

package/dist/components/inputs/toggle-button/toggle-button.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,kCAAkC,CAAC;AAG1C,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,gBAAgB,GAAG,cAAc,CAoDhF"}
+{"version":3,"file":"toggle-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,kCAAkC,CAAC;AAG1C,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,gBAAgB,GAAG,cAAc,CA0DhF"}

package/dist/components/inputs/toggle-button/toggle-button.template.js

@@ -1,13 +1,19 @@
 import { html, nothing } from 'lit';
 import '../../content/tooltip/tooltip.js';
 export function toggleButtonTemplate(component) {
+    const variant = component._effectiveVariant;
+    const showText = (variant === 'text' || variant === 'icon-and-text') && !!component.text;
     const label = component.accessibleLabel || nothing;
-    const iconOnly = !!component.icon && !component.text;
-    const tooltipText = iconOnly ? (component.accessibleLabel || component.text) : '';
+    const tooltipText = variant === 'icon' ? (component.accessibleLabel || component.text) : '';
+    // Always render the slot so auto-detect can observe slotchange and so
+    // consumers can supply an icon via slot before the attribute. CSS hides
+    // the icon when variant resolves to 'text'. When variant is explicitly
+    // 'icon' but the consumer hasn't supplied one, fall back to the
+    // icon-placeholder as a visible hint.
     const icon = component.icon
         ? html `<nldd-icon class="toggle-button__icon" name=${component.icon}></nldd-icon>`
-        : html `<slot name="icon" @slotchange=${component.requestUpdate}></slot>`;
-    const textContent = component.text
+        : html `<slot name="icon" @slotchange=${component.requestUpdate}>${variant === 'icon' ? html `<nldd-icon class="toggle-button__icon" name="icon-placeholder"></nldd-icon>` : nothing}</slot>`;
+    const textContent = showText
         ? html `<span class="toggle-button__text">${component.text}</span>`
         : nothing;
     let result;

package/dist/components/inputs/toggle-button/toggle-button.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,kCAAkC,CAAC;AAG1C,MAAM,UAAU,oBAAoB,CAAC,SAA2B;IAC/D,MAAM,KAAK,GAAG,SAAS,CAAC,eAAe,IAAI,OAAO,CAAC;IACnD,MAAM,QAAQ,GAAG,CAAC,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IACrD,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAElF,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI;QAC1B,CAAC,CAAC,IAAI,CAAA,+CAA+C,SAAS,CAAC,IAAI,eAAe;QAClF,CAAC,CAAC,IAAI,CAAA,iCAAiC,SAAS,CAAC,aAAa,UAAU,CAAC;IAE1E,MAAM,WAAW,GAAG,SAAS,CAAC,IAAI;QACjC,CAAC,CAAC,IAAI,CAAA,qCAAqC,SAAS,CAAC,IAAI,SAAS;QAClE,CAAC,CAAC,OAAO,CAAC;IAEX,IAAI,MAAsB,CAAC;IAE3B,IAAI,SAAS,CAAC,IAAI,KAAK,UAAU,IAAI,SAAS,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QACjE,MAAM,GAAG,IAAI,CAAA;;;;YAIH,SAAS,CAAC,IAAI;gBACV,SAAS,CAAC,QAAQ;iBACjB,SAAS,CAAC,QAAQ;YACvB,SAAS,CAAC,IAAI,IAAI,OAAO;aACxB,SAAS,CAAC,KAAK;kBACV,KAAK;eACR,SAAS,CAAC,kBAAkB;;MAErC,IAAI;MACJ,WAAW;;GAEd,CAAC;IACH,CAAC;SAAM,CAAC;QACP,MAAM,GAAG,IAAI,CAAA;;;;mBAII,SAAS,CAAC,QAAQ;gBACrB,SAAS,CAAC,QAAQ;iBACjB,KAAK;aACT,SAAS,CAAC,kBAAkB;;MAEnC,IAAI;MACJ,WAAW;;GAEd,CAAC;IACH,CAAC;IAED,IAAI,WAAW,EAAE,CAAC;QACjB,OAAO,IAAI,CAAA,sBAAsB,WAAW,IAAI,MAAM,iBAAiB,CAAC;IACzE,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC"}
+{"version":3,"file":"toggle-button.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,kCAAkC,CAAC;AAG1C,MAAM,UAAU,oBAAoB,CAAC,SAA2B;IAC/D,MAAM,OAAO,GAAG,SAAS,CAAC,iBAAiB,CAAC;IAC5C,MAAM,QAAQ,GAAG,CAAC,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,eAAe,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC;IACzF,MAAM,KAAK,GAAG,SAAS,CAAC,eAAe,IAAI,OAAO,CAAC;IACnD,MAAM,WAAW,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAE5F,sEAAsE;IACtE,wEAAwE;IACxE,uEAAuE;IACvE,gEAAgE;IAChE,sCAAsC;IACtC,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI;QAC1B,CAAC,CAAC,IAAI,CAAA,+CAA+C,SAAS,CAAC,IAAI,eAAe;QAClF,CAAC,CAAC,IAAI,CAAA,iCAAiC,SAAS,CAAC,aAAa,IAAI,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,6EAA6E,CAAC,CAAC,CAAC,OAAO,SAAS,CAAC;IAE7L,MAAM,WAAW,GAAG,QAAQ;QAC3B,CAAC,CAAC,IAAI,CAAA,qCAAqC,SAAS,CAAC,IAAI,SAAS;QAClE,CAAC,CAAC,OAAO,CAAC;IAEX,IAAI,MAAsB,CAAC;IAE3B,IAAI,SAAS,CAAC,IAAI,KAAK,UAAU,IAAI,SAAS,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QACjE,MAAM,GAAG,IAAI,CAAA;;;;YAIH,SAAS,CAAC,IAAI;gBACV,SAAS,CAAC,QAAQ;iBACjB,SAAS,CAAC,QAAQ;YACvB,SAAS,CAAC,IAAI,IAAI,OAAO;aACxB,SAAS,CAAC,KAAK;kBACV,KAAK;eACR,SAAS,CAAC,kBAAkB;;MAErC,IAAI;MACJ,WAAW;;GAEd,CAAC;IACH,CAAC;SAAM,CAAC;QACP,MAAM,GAAG,IAAI,CAAA;;;;mBAII,SAAS,CAAC,QAAQ;gBACrB,SAAS,CAAC,QAAQ;iBACjB,KAAK;aACT,SAAS,CAAC,kBAAkB;;MAEnC,IAAI;MACJ,WAAW;;GAEd,CAAC;IACH,CAAC;IAED,IAAI,WAAW,EAAE,CAAC;QACjB,OAAO,IAAI,CAAA,sBAAsB,WAAW,IAAI,MAAM,iBAAiB,CAAC;IACzE,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC"}

package/dist/components/inputs/token/token.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"token.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAoIvB,CAAC"}
+{"version":3,"file":"token.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBA0GvB,CAAC"}

package/dist/components/inputs/token/token.styles.js

@@ -22,28 +22,20 @@ export const tokenStyles = css `
 	/* # Block */
 
 	.token {
-		/* Reset (for menu button) */
+		box-sizing: border-box;
+		display: inline-flex;
 		margin: 0;
 		border: none;
+		border-radius: var(--semantics-controls-sm-corner-radius);
 		background: none;
-		font: inherit;
-		appearance: none;
-
-		/* Layout */
-		display: inline-flex;
-		box-sizing: border-box;
+		background-color: var(--semantics-buttons-neutral-tinted-background-color);
 		height: var(--semantics-controls-sm-min-size);
 		padding: 0 var(--primitives-space-6);
 		align-items: center;
-
-		/* Appearance */
-		border-radius: var(--semantics-controls-sm-corner-radius);
-		background-color: var(--semantics-buttons-neutral-tinted-background-color);
 		color: var(--semantics-buttons-neutral-tinted-content-color);
 		font: var(--semantics-buttons-sm-font);
-
-		/* Animation */
 		transition: background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default);
+		appearance: none;
 	}
 
 	@media (prefers-reduced-motion: reduce) {
@@ -52,30 +44,6 @@ export const tokenStyles = css `
 		}
 	}
 
-
-	/* # Text */
-
-	.token__text {
-		display: flex;
-		padding: 0 var(--primitives-space-2);
-		align-items: center;
-	}
-
-
-	/* # Icon */
-
-	.token__icon {
-		display: block;
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
-		flex-shrink: 0;
-	}
-
-
-	/* # States */
-
-	/* ## Hover — menu */
-
 	@media (hover: hover) {
 		:host([control="menu"]) .token:hover:not(:disabled) {
 			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
@@ -83,8 +51,6 @@ export const tokenStyles = css `
 		}
 	}
 
-	/* ## Open — menu */
-
 	:host([expanded]) .token {
 		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
 		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
@@ -97,8 +63,6 @@ export const tokenStyles = css `
 		}
 	}
 
-	/* ## Focus — menu */
-
 	:host([control="menu"]) .token:focus-visible {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
@@ -109,17 +73,11 @@ export const tokenStyles = css `
 		outline: none;
 	}
 
-
-	/* # Dismiss — padding compensation */
-
 	/* Remove right padding so the nldd-icon-button flush-fits the token edge */
 	:host([control="dismiss"]) .token {
 		padding-right: 0;
 	}
 
-
-	/* # Accessibility */
-
 	@media (forced-colors: active) {
 		.token {
 			border: 1px solid CanvasText;
@@ -131,5 +89,21 @@ export const tokenStyles = css `
 			outline-offset: 2px;
 		}
 	}
+
+
+	/* # Elements */
+
+	.token__text {
+		display: flex;
+		padding: 0 var(--primitives-space-2);
+		align-items: center;
+	}
+
+	.token__icon {
+		display: block;
+		width: var(--primitives-space-16);
+		height: var(--primitives-space-16);
+		flex-shrink: 0;
+	}
 `;
 //# sourceMappingURL=token.styles.js.map

package/dist/components/inputs/token/token.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"token.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoI7B,CAAC"}
+{"version":3,"file":"token.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0G7B,CAAC"}

package/dist/components/layout/app-view/app-view.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-view.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/app-view/app-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBAyCzB,CAAC"}
+{"version":3,"file":"app-view.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/app-view/app-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBA+CzB,CAAC"}

package/dist/components/layout/app-view/app-view.styles.js

@@ -14,31 +14,37 @@ export const appViewStyles = css `
 		height: 100%;
 	}
 
+	:host([hidden]) {
+		display: none;
+	}
 
 	:host([background="tinted"]) {
 		--context-parent-background-color: var(--semantics-surfaces-tinted-background-color);
 		--_background-color: var(--semantics-surfaces-tinted-background-color);
 	}
 
-	:host([hidden]) {
-		display: none;
-	}
-
 
 	/* # Block */
 
 	.app-view {
 		display: flex;
-		min-height: 0;
 		min-width: 0;
+		min-height: 0;
 		overflow: hidden;
 		flex-direction: column;
-		flex: 1;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 
+
+	/* # Elements */
+
 	::slotted(*) {
 		min-height: 0;
-		flex: 1;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
 	}
 `;
 //# sourceMappingURL=app-view.styles.js.map

package/dist/components/layout/app-view/app-view.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-view.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/app-view/app-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyC/B,CAAC"}
+{"version":3,"file":"app-view.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/app-view/app-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+C/B,CAAC"}

package/dist/components/layout/card/card.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBA0DtB,CAAC"}
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAoDtB,CAAC"}

package/dist/components/layout/card/card.styles.js

@@ -27,7 +27,7 @@ export const cardStyles = css `
 	}
 
 
-	/* # Header */
+	/* # Elements */
 
 	.card__header {
 		flex-shrink: 0;
@@ -37,9 +37,6 @@ export const cardStyles = css `
 		display: none;
 	}
 
-
-	/* # Main */
-
 	.card__main {
 		display: flex;
 		min-height: 0;
@@ -47,9 +44,6 @@ export const cardStyles = css `
 		flex-grow: 1;
 	}
 
-
-	/* # Footer */
-
 	.card__footer {
 		flex-shrink: 0;
 	}

package/dist/components/layout/card/card.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D5B,CAAC"}
+{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoD5B,CAAC"}

package/dist/components/layout/collection/collection.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,yBA0I5B,CAAC"}
+{"version":3,"file":"collection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,yBAoH5B,CAAC"}

package/dist/components/layout/collection/collection.styles.js

@@ -8,12 +8,13 @@ export const collectionStyles = css `
 	/* # Host */
 
 	:host {
+		--_item-width: var(--primitives-area-280);
+
 		display: flex;
 		width: 100%;
 		min-width: 0;
 		flex-direction: column;
 		gap: var(--components-collection-sm-gap);
-		--_item-width: var(--primitives-area-280);
 
 		@media (min-width: ${mdMin}) {
 			gap: var(--components-collection-md-gap);
@@ -45,28 +46,25 @@ export const collectionStyles = css `
 		}
 	}
 
+	/* ## Grid */
 
-	/* # Grid */
-
-	:host([layout='grid']) .collection__items,
+	:host([layout="grid"]) .collection__items,
 	:host(:not([layout])) .collection__items {
-		display: grid;
 		/* min(item-width, 100%) clamps the track min to the container width so
 		   a single column never forces horizontal overflow on narrow screens. */
+		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(min(var(--_item-width), 100%), 1fr));
 	}
 
+	/* ## List */
 
-	/* # List */
-
-	:host([layout='list']) .collection__items {
+	:host([layout="list"]) .collection__items {
 		flex-direction: column;
 	}
 
+	/* ## Horizontal scroll */
 
-	/* # Horizontal scroll */
-
-	:host([layout='horizontal-scroll']) .collection__items {
+	:host([layout="horizontal-scroll"]) .collection__items {
 		margin-inline-start: calc(var(--primitives-space-16) * -1);
 		margin-block: calc(var(--primitives-space-16) * -1);
 		overflow-x: auto;
@@ -88,16 +86,18 @@ export const collectionStyles = css `
 		);
 	}
 
-	:host([layout='horizontal-scroll']) .collection__items::after {
+	:host([layout="horizontal-scroll"]) .collection__items::after {
 		content: '';
-		flex: 0 0 var(--primitives-space-48);
+		flex-grow: 0;
+		flex-shrink: 0;
+		flex-basis: var(--primitives-space-48);
 	}
 
-	:host([layout='horizontal-scroll']) .collection__items::-webkit-scrollbar {
+	:host([layout="horizontal-scroll"]) .collection__items::-webkit-scrollbar {
 		display: none;
 	}
 
-	:host([layout='horizontal-scroll']) .collection__items ::slotted(*) {
+	:host([layout="horizontal-scroll"]) .collection__items ::slotted(*) {
 		flex-grow: 1;
 		flex-shrink: 0;
 		flex-basis: var(--_item-width);
@@ -112,31 +112,9 @@ export const collectionStyles = css `
 		width: 100%;
 	}
 
+	/* ## Scroll navigation — horizontal scroll */
 
-	/* # Load more (grid/list) */
-
-	:host([layout='grid']) .collection__footer,
-	:host([layout='list']) .collection__footer,
-	:host(:not([layout])) .collection__footer {
-		justify-content: stretch;
-	}
-
-	:host([layout='grid']) .collection__footer nldd-button,
-	:host([layout='list']) .collection__footer nldd-button,
-	:host(:not([layout])) .collection__footer nldd-button {
-		width: 100%;
-	}
-
-	:host([layout='grid']) .collection__footer nldd-button::part(button),
-	:host([layout='list']) .collection__footer nldd-button::part(button),
-	:host(:not([layout])) .collection__footer nldd-button::part(button) {
-		width: 100%;
-	}
-
-
-	/* # Scroll navigation (horizontal scroll) */
-
-	:host([layout='horizontal-scroll']) .collection__footer {
+	:host([layout="horizontal-scroll"]) .collection__footer {
 		justify-content: flex-end;
 		gap: var(--primitives-space-16);
 	}

package/dist/components/layout/collection/collection.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.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;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;uBAaZ,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;uBAiBL,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoG3B,CAAC"}
+{"version":3,"file":"collection.styles.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.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;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;uBAcZ,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;uBAiBL,KAAK;;;;uBAIL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6E3B,CAAC"}

package/dist/components/layout/collection/collection.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAqC5E"}
+{"version":3,"file":"collection.template.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAsC5E"}

package/dist/components/layout/collection/collection.template.js

@@ -29,6 +29,7 @@ export function collectionTemplate(component) {
 					<nldd-button
 						variant="neutral-tinted"
 						text=${component._t('components.collection.load-more-action')}
+						width="full"
 						@click=${() => component._loadMore()}
 					></nldd-button>
 				` : nothing}

package/dist/components/layout/collection/collection.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection.template.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,kBAAkB,CAAC,SAAyB;IAC3D,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,KAAK,mBAAmB,CAAC;IAC9D,MAAM,YAAY,GAAG,CAAC,YAAY,IAAI,SAAS,CAAC,YAAY,IAAI,SAAS,CAAC,QAAQ,CAAC;IAEnF,OAAO,IAAI,CAAA;;uBAEW,CAAC,CAAQ,EAAE,EAAE,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;;;;MAIzD,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAIX,SAAS,CAAC,EAAE,CAAC,uCAAuC,CAAC;mBAChD,SAAS,CAAC,QAAQ;gBACrB,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;;;;;cAK/B,SAAS,CAAC,EAAE,CAAC,mCAAmC,CAAC;mBAC5C,SAAS,CAAC,MAAM;gBACnB,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;;;KAGvC,CAAC,CAAC,CAAC,OAAO;MACT,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;aAGZ,SAAS,CAAC,EAAE,CAAC,wCAAwC,CAAC;eACpD,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE;;KAErC,CAAC,CAAC,CAAC,OAAO;;;EAGb,CAAC;AACH,CAAC"}
+{"version":3,"file":"collection.template.js","sourceRoot":"","sources":["../../../../src/components/layout/collection/collection.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,kBAAkB,CAAC,SAAyB;IAC3D,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,KAAK,mBAAmB,CAAC;IAC9D,MAAM,YAAY,GAAG,CAAC,YAAY,IAAI,SAAS,CAAC,YAAY,IAAI,SAAS,CAAC,QAAQ,CAAC;IAEnF,OAAO,IAAI,CAAA;;uBAEW,CAAC,CAAQ,EAAE,EAAE,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;;;;MAIzD,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAIX,SAAS,CAAC,EAAE,CAAC,uCAAuC,CAAC;mBAChD,SAAS,CAAC,QAAQ;gBACrB,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;;;;;cAK/B,SAAS,CAAC,EAAE,CAAC,mCAAmC,CAAC;mBAC5C,SAAS,CAAC,MAAM;gBACnB,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;;;KAGvC,CAAC,CAAC,CAAC,OAAO;MACT,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA;;;aAGZ,SAAS,CAAC,EAAE,CAAC,wCAAwC,CAAC;;eAEpD,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE;;KAErC,CAAC,CAAC,CAAC,OAAO;;;EAGb,CAAC;AACH,CAAC"}