@nldd/design-system 0.8.42 → 0.8.44

package/dist/components/inputs/text-field/text-field.styles.js

@@ -6,8 +6,11 @@ export const textFieldStyles = css `
 
 	:host {
 		--_background-color: var(--semantics-input-fields-background-color);
+		--_width: auto;
 
 		display: block;
+		width: var(--_width);
+		max-width: 100%;
 		-webkit-tap-highlight-color: transparent;
 	}
 
@@ -20,25 +23,25 @@ export const textFieldStyles = css `
 
 	.text-field {
 		display: flex;
-		flex-direction: row;
-		align-items: center;
-		overflow: hidden;
 		box-sizing: border-box;
 		border: var(--semantics-input-fields-border);
 		background-color: var(--_background-color);
+		overflow: hidden;
+		flex-direction: row;
+		align-items: center;
 	}
 
 	:host([size='sm']) .text-field {
-		padding-left: calc(var(--semantics-controls-sm-inline-padding) - var(--semantics-input-fields-border-thickness));
-		min-height: var(--semantics-controls-sm-min-size);
 		border-radius: var(--semantics-controls-sm-corner-radius);
+		min-height: var(--semantics-controls-sm-min-size);
+		padding-left: calc(var(--semantics-controls-sm-inline-padding) - var(--semantics-input-fields-border-thickness));
 	}
 
 	:host([size='md']) .text-field,
 	:host(:not([size])) .text-field {
-		padding-left: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-thickness));
-		min-height: var(--semantics-controls-md-min-size);
 		border-radius: var(--semantics-controls-md-corner-radius);
+		min-height: var(--semantics-controls-md-min-size);
+		padding-left: calc(var(--semantics-controls-md-inline-padding) - var(--semantics-input-fields-border-thickness));
 	}
 
 	:host([valid]) .text-field {
@@ -73,16 +76,16 @@ export const textFieldStyles = css `
 	/* # Input */
 
 	.text-field__input {
-		flex-grow: 1;
-		min-width: 0;
-		overflow: hidden;
 		box-sizing: border-box;
-		padding: 0;
 		margin: 0;
-		color: var(--semantics-content-color);
-		background: transparent;
 		border: none;
 		outline: none;
+		background: transparent;
+		min-width: 0;
+		overflow: hidden;
+		padding: 0;
+		flex-grow: 1;
+		color: var(--semantics-content-color);
 		appearance: none;
 	}
 
@@ -115,9 +118,9 @@ export const textFieldStyles = css `
 
 	.text-field__input-fade {
 		position: relative;
+		width: 0;
 		flex-shrink: 0;
 		align-self: stretch;
-		width: 0;
 	}
 
 	.text-field__input-fade::after {
@@ -126,9 +129,9 @@ export const textFieldStyles = css `
 		top: 0;
 		bottom: 0;
 		right: 0;
-		width: var(--primitives-space-8);
 		background: linear-gradient(90deg, color-mix(in oklch, var(--_background-color) 0%, transparent) 0%, var(--_background-color) 100%);
 		pointer-events: none;
+		width: var(--primitives-space-8);
 	}
 
 	:host([size='sm']) .text-field__input-fade::after {
@@ -145,10 +148,10 @@ export const textFieldStyles = css `
 
 	.text-field__validation-icon-area {
 		display: flex;
+		height: 100%;
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		height: 100%;
 	}
 
 	:host([size='sm']) .text-field__validation-icon-area {

package/dist/components/inputs/text-field/text-field.styles.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBAyK9B,CAAC"}
+{"version":3,"file":"toggle-button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/toggle-button/toggle-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBA6L9B,CAAC"}

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

@@ -23,12 +23,12 @@ export const toggleButtonStyles = css `
 
 	.toggle-button {
 		/* Reset */
-		appearance: none;
-		border: none;
 		margin: 0;
-		padding: 0;
+		border: none;
 		background: none;
+		padding: 0;
 		font: inherit;
+		appearance: none;
 
 		/* Layout */
 		position: relative;
@@ -47,28 +47,28 @@ export const toggleButtonStyles = css `
 	/* ## 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);
-		font: var(--semantics-buttons-xs-font);
-		border-radius: var(--semantics-controls-xs-corner-radius);
 		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);
-		font: var(--semantics-buttons-sm-font);
-		border-radius: var(--semantics-controls-sm-corner-radius);
 		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);
-		font: var(--semantics-buttons-md-font);
-		border-radius: var(--semantics-controls-md-corner-radius);
 		gap: var(--semantics-buttons-md-gap);
+		font: var(--semantics-buttons-md-font);
 	}
 
 	/* ## Icon-only sizes */
@@ -140,20 +140,40 @@ export const toggleButtonStyles = css `
 		flex-shrink: 0;
 	}
 
+	/* ## Icon size — naast tekst (default) */
+
 	:host([size="md"]) .toggle-button__icon,
 	:host(:not([size])) .toggle-button__icon {
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
+		width: var(--semantics-buttons-md-icon-size);
+		height: var(--semantics-buttons-md-icon-size);
 	}
 
 	:host([size="sm"]) .toggle-button__icon {
-		width: var(--primitives-space-18);
-		height: var(--primitives-space-18);
+		width: var(--semantics-buttons-sm-icon-size);
+		height: var(--semantics-buttons-sm-icon-size);
 	}
 
 	:host([size="xs"]) .toggle-button__icon {
-		width: var(--primitives-space-16);
-		height: var(--primitives-space-16);
+		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);
 	}
 
 
@@ -162,11 +182,11 @@ export const toggleButtonStyles = css `
 	.toggle-button__input {
 		position: absolute;
 		inset: 0;
-		width: 100%;
-		height: 100%;
-		margin: 0;
 		opacity: 0;
 		z-index: 1;
+		margin: 0;
+		width: 100%;
+		height: 100%;
 	}
 `;
 //# sourceMappingURL=toggle-button.styles.js.map

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyKpC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LpC,CAAC"}

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

@@ -7,7 +7,7 @@
  * @element nldd-token
  *
  * @attr {'none' | 'dismiss' | 'menu'} control       - Control type (default: 'none')
- * @attr {boolean}                        open          - Whether the menu is open (menu only)
+ * @attr {boolean}                        expanded      - Whether the menu is open (menu only). Forwarded as aria-expanded on the menu button.
  * @attr {boolean}                        disabled      - Disabled state
  * @attr {string}                         dismiss-text - Text for the dismiss button (default: 'Verwijder')
  * @attr {string}                         controls      - ID of the associated popup element (aria-controls).
@@ -16,7 +16,7 @@
  * @slot - Token text
  *
  * @fires dismiss - When the dismiss button is clicked
- * @fires toggle  - When the menu is clicked; detail: { open: boolean }
+ * @fires toggle  - When the menu is clicked; detail: { expanded: boolean }
  */
 import { LitElement } from 'lit';
 import './../../content/icon/icon.js';
@@ -25,7 +25,7 @@ export type TokenControl = 'none' | 'dismiss' | 'menu';
 export declare class NLDDToken extends LitElement {
     static styles: import("lit").CSSResult;
     control: TokenControl;
-    open: boolean;
+    expanded: boolean;
     disabled: boolean;
     dismissText: string;
     /** ID of the associated popup element. Required for ARIA compliance when control="menu". */

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

@@ -1 +1 @@
-{"version":3,"file":"token.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4CAA4C,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAEvD,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAe;IAGrC,OAAO,EAAE,YAAY,CAAU;IAG/B,IAAI,UAAS;IAGb,QAAQ,UAAS;IAGjB,WAAW,SAAe;IAE1B,4FAA4F;IAE5F,QAAQ,SAAM;IAEd,cAAc,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAS9B,gBAAgB,IAAI,IAAI;IAUf,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
+{"version":3,"file":"token.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4CAA4C,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAEvD,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAe;IAGrC,OAAO,EAAE,YAAY,CAAU;IAG/B,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,WAAW,SAAe;IAE1B,4FAA4F;IAE5F,QAAQ,SAAM;IAEd,cAAc,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAS9B,gBAAgB,IAAI,IAAI;IAUf,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

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

@@ -13,7 +13,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @element nldd-token
  *
  * @attr {'none' | 'dismiss' | 'menu'} control       - Control type (default: 'none')
- * @attr {boolean}                        open          - Whether the menu is open (menu only)
+ * @attr {boolean}                        expanded      - Whether the menu is open (menu only). Forwarded as aria-expanded on the menu button.
  * @attr {boolean}                        disabled      - Disabled state
  * @attr {string}                         dismiss-text - Text for the dismiss button (default: 'Verwijder')
  * @attr {string}                         controls      - ID of the associated popup element (aria-controls).
@@ -22,7 +22,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @slot - Token text
  *
  * @fires dismiss - When the dismiss button is clicked
- * @fires toggle  - When the menu is clicked; detail: { open: boolean }
+ * @fires toggle  - When the menu is clicked; detail: { expanded: boolean }
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -34,7 +34,7 @@ let NLDDToken = class NLDDToken extends LitElement {
     constructor() {
         super(...arguments);
         this.control = 'none';
-        this.open = false;
+        this.expanded = false;
         this.disabled = false;
         this.dismissText = 'Verwijder';
         /** ID of the associated popup element. Required for ARIA compliance when control="menu". */
@@ -52,9 +52,9 @@ let NLDDToken = class NLDDToken extends LitElement {
     _handleMenuClick() {
         if (this.disabled)
             return;
-        this.open = !this.open;
+        this.expanded = !this.expanded;
         this.dispatchEvent(new CustomEvent('toggle', {
-            detail: { open: this.open },
+            detail: { expanded: this.expanded },
             bubbles: true,
             composed: true,
         }));
@@ -69,7 +69,7 @@ __decorate([
 ], NLDDToken.prototype, "control", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NLDDToken.prototype, "open", void 0);
+], NLDDToken.prototype, "expanded", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NLDDToken.prototype, "disabled", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"token.js","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4CAA4C,CAAC;AAK7C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAIN,YAAO,GAAiB,MAAM,CAAC;QAG/B,SAAI,GAAG,KAAK,CAAC;QAGb,aAAQ,GAAG,KAAK,CAAC;QAGjB,gBAAW,GAAG,WAAW,CAAC;QAE1B,4FAA4F;QAE5F,aAAQ,GAAG,EAAE,CAAC;IAwBf,CAAC;IAtBA,cAAc,CAAC,CAAQ;QACtB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE;YAC7C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC5C,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;YAC3B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,MAAM;QACd,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;;AAvCe,gBAAM,GAAG,WAAW,AAAd,CAAe;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACX;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC9B;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CAC5B;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC5B;AAjBF,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAyCrB"}
+{"version":3,"file":"token.js","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4CAA4C,CAAC;AAK7C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAIN,YAAO,GAAiB,MAAM,CAAC;QAG/B,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;QAGjB,gBAAW,GAAG,WAAW,CAAC;QAE1B,4FAA4F;QAE5F,aAAQ,GAAG,EAAE,CAAC;IAwBf,CAAC;IAtBA,cAAc,CAAC,CAAQ;QACtB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE;YAC7C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC5C,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;YACnC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,MAAM;QACd,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;;AAvCe,gBAAM,GAAG,WAAW,AAAd,CAAe;AAGrC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACX;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CAC5B;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC5B;AAjBF,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAyCrB"}

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

@@ -23,18 +23,18 @@ export const tokenStyles = css `
 
 	.token {
 		/* Reset (for menu button) */
-		appearance: none;
-		border: none;
 		margin: 0;
+		border: none;
 		background: none;
 		font: inherit;
+		appearance: none;
 
 		/* Layout */
 		display: inline-flex;
-		align-items: center;
 		box-sizing: border-box;
 		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);
@@ -57,8 +57,8 @@ export const tokenStyles = css `
 
 	.token__text {
 		display: flex;
-		align-items: center;
 		padding: 0 var(--primitives-space-2);
+		align-items: center;
 	}
 
 
@@ -66,9 +66,9 @@ export const tokenStyles = css `
 
 	.token__icon {
 		display: block;
-		flex-shrink: 0;
 		width: var(--primitives-space-16);
 		height: var(--primitives-space-16);
+		flex-shrink: 0;
 	}
 
 
@@ -85,13 +85,13 @@ export const tokenStyles = css `
 
 	/* ## Open — menu */
 
-	:host([open]) .token {
+	:host([expanded]) .token {
 		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
 		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 	}
 
 	@media (hover: hover) {
-		:host([open]) .token:hover:not(:disabled) {
+		:host([expanded]) .token:hover:not(:disabled) {
 			background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
 			color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 		}

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

@@ -6,7 +6,7 @@ export function tokenTemplate(component) {
 				class="token"
 				type="button"
 				?disabled=${component.disabled}
-				aria-expanded=${component.open}
+				aria-expanded=${component.expanded}
 				aria-controls=${component.controls || nothing}
 				@click=${component._handleMenuClick}
 			>
@@ -26,7 +26,7 @@ export function tokenTemplate(component) {
 						icon="dismiss-small"
 						text=${component.dismissText}
 						accessible-label=${component.dismissText}
-						hide-tooltip
+						tooltip-timing="never"
 						?disabled=${component.disabled}
 						@click=${component._handleDismiss}
 					></nldd-icon-button>

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

@@ -1 +1 @@
-{"version":3,"file":"token.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,aAAa,CAAC,SAAoB;IACjD,IAAI,SAAS,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;QAClC,OAAO,IAAI,CAAA;;;;gBAIG,SAAS,CAAC,QAAQ;oBACd,SAAS,CAAC,IAAI;oBACd,SAAS,CAAC,QAAQ,IAAI,OAAO;aACpC,SAAS,CAAC,gBAAgB;;;;;GAKpC,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;;KAGP,SAAS,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;aAM9B,SAAS,CAAC,WAAW;yBACT,SAAS,CAAC,WAAW;;kBAE5B,SAAS,CAAC,QAAQ;eACrB,SAAS,CAAC,cAAc;;;IAGnC,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}
+{"version":3,"file":"token.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/token/token.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAGpD,MAAM,UAAU,aAAa,CAAC,SAAoB;IACjD,IAAI,SAAS,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;QAClC,OAAO,IAAI,CAAA;;;;gBAIG,SAAS,CAAC,QAAQ;oBACd,SAAS,CAAC,QAAQ;oBAClB,SAAS,CAAC,QAAQ,IAAI,OAAO;aACpC,SAAS,CAAC,gBAAgB;;;;;GAKpC,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;;KAGP,SAAS,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;aAM9B,SAAS,CAAC,WAAW;yBACT,SAAS,CAAC,WAAW;;kBAE5B,SAAS,CAAC,QAAQ;eACrB,SAAS,CAAC,cAAc;;;IAGnC,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}

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

@@ -9,9 +9,9 @@ export const appViewStyles = css `
 		--_background-color: var(--context-parent-background-color);
 
 		display: flex;
+		background-color: var(--_background-color);
 		width: 100%;
 		height: 100%;
-		background-color: var(--_background-color);
 	}
 
 
@@ -29,16 +29,16 @@ export const appViewStyles = css `
 
 	.app-view {
 		display: flex;
-		flex-direction: column;
-		flex: 1;
 		min-height: 0;
 		min-width: 0;
 		overflow: hidden;
+		flex-direction: column;
+		flex: 1;
 	}
 
 	::slotted(*) {
-		flex: 1;
 		min-height: 0;
+		flex: 1;
 	}
 `;
 //# sourceMappingURL=app-view.styles.js.map

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

@@ -16,10 +16,10 @@ export const boxStyles = css `
 	/* # Block */
 
 	.box {
-		background-color: var(--components-box-background-color);
+		box-sizing: border-box;
 		border-radius: var(--components-box-corner-radius);
+		background-color: var(--components-box-background-color);
 		padding: var(--components-box-padding);
-		box-sizing: border-box;
 	}
 `;
 //# sourceMappingURL=box.styles.js.map

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

@@ -44,7 +44,7 @@ let NLDDCard = class NLDDCard extends LitElement {
         // styles being absent is meaningful. They are effectively part of the
         // element's identity, written once and kept.
         this.style.containerType = 'inline-size';
-        this.style.containerName = 'layout-area';
+        this.style.containerName = 'layout-container';
     }
     render() {
         return cardTemplate(this);

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/layout/card/card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG3C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAqBN,kBAAa,GAAG,CAAC,CAAQ,EAAQ,EAAE;YAClC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;YACzC,MAAM,OAAO,GAAG,IAAI,CAAC,aAA4B,CAAC;YAClD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;QACvD,CAAC,CAAC;IAKH,CAAC;IAxBS,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,uEAAuE;QACvE,oEAAoE;QACpE,gEAAgE;QAChE,8CAA8C;QAC9C,EAAE;QACF,+DAA+D;QAC/D,uEAAuE;QACvE,sEAAsE;QACtE,6CAA6C;QAC7C,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;QACzC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;IAC1C,CAAC;IAQQ,MAAM;QACd,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;;AA5Be,eAAM,GAAG,UAAU,AAAb,CAAc;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;iDACtB;AAJxB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA8BpB"}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../src/components/layout/card/card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG3C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAqBN,kBAAa,GAAG,CAAC,CAAQ,EAAQ,EAAE;YAClC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;YACzC,MAAM,OAAO,GAAG,IAAI,CAAC,aAA4B,CAAC;YAClD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;QACvD,CAAC,CAAC;IAKH,CAAC;IAxBS,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,uEAAuE;QACvE,oEAAoE;QACpE,gEAAgE;QAChE,8CAA8C;QAC9C,EAAE;QACF,+DAA+D;QAC/D,uEAAuE;QACvE,sEAAsE;QACtE,6CAA6C;QAC7C,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;QACzC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,kBAAkB,CAAC;IAC/C,CAAC;IAQQ,MAAM;QACd,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;;AA5Be,eAAM,GAAG,UAAU,AAAb,CAAc;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;iDACtB;AAJxB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA8BpB"}

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

@@ -18,12 +18,12 @@ export const cardStyles = css `
 
 	.card {
 		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
-		background-color: var(--components-card-background-color);
 		border-radius: var(--components-card-corner-radius);
 		box-shadow: var(--components-card-box-shadow);
+		background-color: var(--components-card-background-color);
 		overflow: hidden;
+		flex-direction: column;
+		flex-grow: 1;
 	}
 
 
@@ -42,9 +42,9 @@ export const cardStyles = css `
 
 	.card__main {
 		display: flex;
+		min-height: 0;
 		flex-direction: column;
 		flex-grow: 1;
-		min-height: 0;
 	}
 
 

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

@@ -9,9 +9,9 @@ export const collectionStyles = css `
 
 	:host {
 		display: flex;
-		flex-direction: column;
 		width: 100%;
 		min-width: 0;
+		flex-direction: column;
 		gap: var(--components-collection-sm-gap);
 		--_item-width: var(--primitives-area-280);
 
@@ -67,18 +67,18 @@ export const collectionStyles = css `
 	/* # Horizontal scroll */
 
 	: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;
+		padding-inline-start: var(--primitives-space-16);
+		padding-block: var(--primitives-space-16);
 		flex-direction: row;
 		flex-wrap: nowrap;
-		overflow-x: auto;
 		scroll-snap-type: x mandatory;
 		scroll-behavior: smooth;
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: none;
-		margin-inline-start: calc(var(--primitives-space-16) * -1);
-		padding-inline-start: var(--primitives-space-16);
 		scroll-padding-inline-start: var(--primitives-space-16);
-		padding-block: var(--primitives-space-16);
-		margin-block: calc(var(--primitives-space-16) * -1);
 		mask-image: linear-gradient(
 			to right,
 			transparent 0,

package/dist/components/layout/container/container.d.ts

@@ -7,7 +7,7 @@
  * More specific settings take precedence: sides > axis > all sides.
  *
  * Responsive padding is supported via viewport breakpoints (sm-, md-, lg-)
- * and container queries (layout-area-sm-, layout-area-md-, layout-area-lg-).
+ * and container queries (layout-container-sm-, layout-container-md-, layout-container-lg-).
  * Cascade order: base → viewport breakpoints → container queries.
  *
  * @element nldd-container
@@ -22,9 +22,9 @@
  * @attr {string} sm-padding           - Padding for all sides at sm viewport breakpoint
  * @attr {string} md-padding           - Padding for all sides at md viewport breakpoint
  * @attr {string} lg-padding           - Padding for all sides at lg viewport breakpoint
- * @attr {string} layout-area-sm-padding - Padding for all sides at sm container size
- * @attr {string} layout-area-md-padding - Padding for all sides at md container size
- * @attr {string} layout-area-lg-padding - Padding for all sides at lg container size
+ * @attr {string} layout-container-sm-padding - Padding for all sides at sm container size
+ * @attr {string} layout-container-md-padding - Padding for all sides at md container size
+ * @attr {string} layout-container-lg-padding - Padding for all sides at lg container size
  * (and equivalents for all padding directions)
  *
  * @slot - Container content

package/dist/components/layout/container/container.js

@@ -13,7 +13,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * More specific settings take precedence: sides > axis > all sides.
  *
  * Responsive padding is supported via viewport breakpoints (sm-, md-, lg-)
- * and container queries (layout-area-sm-, layout-area-md-, layout-area-lg-).
+ * and container queries (layout-container-sm-, layout-container-md-, layout-container-lg-).
  * Cascade order: base → viewport breakpoints → container queries.
  *
  * @element nldd-container
@@ -28,9 +28,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * @attr {string} sm-padding           - Padding for all sides at sm viewport breakpoint
  * @attr {string} md-padding           - Padding for all sides at md viewport breakpoint
  * @attr {string} lg-padding           - Padding for all sides at lg viewport breakpoint
- * @attr {string} layout-area-sm-padding - Padding for all sides at sm container size
- * @attr {string} layout-area-md-padding - Padding for all sides at md container size
- * @attr {string} layout-area-lg-padding - Padding for all sides at lg container size
+ * @attr {string} layout-container-sm-padding - Padding for all sides at sm container size
+ * @attr {string} layout-container-md-padding - Padding for all sides at md container size
+ * @attr {string} layout-container-lg-padding - Padding for all sides at lg container size
  * (and equivalents for all padding directions)
  *
  * @slot - Container content