@nldd/design-system 0.8.43 → 0.8.45

package/dist/components/inputs/segmented-control/segmented-control.styles.js

@@ -5,15 +5,18 @@ export const segmentedControlStyles = css `
 	/* # Host */
 
 	:host {
+		--_corner-radius: var(--semantics-controls-md-corner-radius);
 		--_width: auto;
-		--_segmented-control-md-item-indicator-inset: var(--primitives-space-4);
-		--_segmented-control-sm-item-indicator-inset: var(--primitives-space-3);
+		--_gap: var(--primitives-space-2);
 
 		display: inline-grid;
+		border-radius: var(--_corner-radius);
+		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		width: var(--_width);
+		max-width: 100%;
 		grid-auto-columns: 1fr;
 		grid-auto-flow: column;
-		width: var(--_width);
-		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		gap: var(--_gap);
 		isolation: isolate;
 		-webkit-tap-highlight-color: transparent;
 	}
@@ -22,9 +25,14 @@ export const segmentedControlStyles = css `
 		display: none;
 	}
 
+	:host([size="sm"]) {
+		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+	}
+
 	:host([width="full"]) {
-		display: grid;
 		--_width: 100%;
+
+		display: grid;
 	}
 
 	:host([width="fit-content"]) {
@@ -36,19 +44,8 @@ export const segmentedControlStyles = css `
 		pointer-events: none;
 	}
 
-	:host([size='md']),
-	:host(:not([size])) {
-		border-radius: var(--semantics-controls-md-corner-radius);
-		padding-inline: var(--primitives-space-2);
-	}
-
-	:host([size='sm']) {
-		border-radius: var(--semantics-controls-sm-corner-radius);
-		padding-inline: var(--primitives-space-2);
-	}
 
-
-	/* # Focus */
+	/* # Elements */
 
 	::slotted(nldd-segmented-control-item:focus-within) {
 		position: relative;
@@ -61,9 +58,15 @@ export const segmentedControlItemStyles = css `
 	/* # Host */
 
 	:host {
+		--_corner-radius: var(--semantics-controls-md-corner-radius);
+		--_min-size: var(--semantics-controls-md-min-size);
+		--_padding-inline: var(--primitives-space-12);
+		--_font: var(--semantics-buttons-md-font);
+		--_icon-size: var(--semantics-buttons-md-icon-only-icon-size);
+
 		display: flex;
-		min-width: 0;
 		position: relative;
+		min-width: 0;
 		-webkit-tap-highlight-color: transparent;
 	}
 
@@ -71,104 +74,93 @@ export const segmentedControlItemStyles = css `
 		display: none;
 	}
 
+	:host([size="sm"]) {
+		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_min-size: var(--semantics-controls-sm-min-size);
+		--_padding-inline: var(--primitives-space-8);
+		--_font: var(--semantics-buttons-sm-font);
+		--_icon-size: var(--semantics-buttons-sm-icon-only-icon-size);
+	}
+
 
-	/* # Item */
+	/* # Block */
 
 	.segmented-control__item {
-		position: relative;
+		box-sizing: border-box;
 		display: flex;
+		position: relative;
+		cursor: default;
+		border-radius: var(--_corner-radius);
+		width: 100%;
+		min-width: var(--_min-size);
+		height: var(--_min-size);
+		padding-inline: var(--_padding-inline);
 		align-items: center;
 		justify-content: center;
-		width: 100%;
-		box-sizing: border-box;
 		color: var(--semantics-buttons-neutral-tinted-content-color);
-		cursor: default;
+		font: var(--_font);
 	}
 
-	:host([size='md']) .segmented-control__item,
-	:host(:not([size])) .segmented-control__item {
-		height: var(--semantics-controls-md-min-size);
-		padding-inline: calc(var(--_segmented-control-md-item-indicator-inset) / 2 + var(--primitives-space-12));
-		font: var(--semantics-buttons-md-font);
-	}
-
-	:host([size='sm']) .segmented-control__item {
-		height: var(--semantics-controls-sm-min-size);
-		padding-inline: calc(var(--_segmented-control-sm-item-indicator-inset) / 2 + var(--primitives-space-8));
-		font: var(--semantics-buttons-sm-font);
-	}
-
-	:host([variant='icon'][size='md']) .segmented-control__item,
-	:host([variant='icon']:not([size])) .segmented-control__item {
-		width: calc(var(--semantics-controls-md-min-size) - var(--_segmented-control-md-item-indicator-inset));
-		padding: 0;
-	}
-
-	:host([variant='icon'][size='sm']) .segmented-control__item {
-		width: calc(var(--semantics-controls-sm-min-size) - var(--_segmented-control-sm-item-indicator-inset));
+	:host([variant="icon"]) .segmented-control__item {
 		padding: 0;
 	}
 
 	:host([selected]) .segmented-control__item {
+		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
 		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
 	}
 
+	@media (hover: hover) {
+		:host(:not([selected])) .segmented-control__item:hover {
+			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+		}
+	}
+
 	:host([disabled]) .segmented-control__item {
 		opacity: var(--primitives-opacity-disabled);
 	}
 
+	.segmented-control__item:has(:focus-visible) {
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
 
-	/* # Input */
+
+	/* # Elements */
 
 	.segmented-control__item-input {
 		position: absolute;
 		inset: 0;
-		width: 100%;
-		height: 100%;
-		margin: 0;
 		opacity: 0;
 		z-index: 1;
+		margin: 0;
+		width: 100%;
+		height: 100%;
 	}
 
-
-	/* # Text */
-
 	.segmented-control__item-text {
+		pointer-events: none;
 		overflow: hidden;
-		text-overflow: ellipsis;
 		white-space: nowrap;
-		z-index: 2;
-		pointer-events: none;
+		text-overflow: ellipsis;
 	}
 
-	:host([variant='icon']) .segmented-control__item-text {
+	:host([variant="icon"]) .segmented-control__item-text {
 		display: none;
 	}
 
-
-	/* # Icon slot */
-
 	.segmented-control__item-icon {
 		display: flex;
+		pointer-events: none;
+		width: var(--_icon-size);
+		height: var(--_icon-size);
 		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
-		z-index: 2;
-		pointer-events: none;
 	}
 
-	:host([size='md']) .segmented-control__item-icon,
-	:host(:not([size])) .segmented-control__item-icon {
-		width: var(--semantics-buttons-md-icon-only-icon-size);
-		height: var(--semantics-buttons-md-icon-only-icon-size);
-	}
-
-	:host([size='sm']) .segmented-control__item-icon {
-		width: var(--semantics-buttons-sm-icon-only-icon-size);
-		height: var(--semantics-buttons-sm-icon-only-icon-size);
-	}
-
-	:host([variant='text']) .segmented-control__item-icon {
+	:host([variant="text"]) .segmented-control__item-icon {
 		display: none;
 	}
 
@@ -177,48 +169,5 @@ export const segmentedControlItemStyles = css `
 		width: 100%;
 		height: 100%;
 	}
-
-
-	/* # Indicator */
-
-	.segmented-control__item::before {
-		content: '';
-		position: absolute;
-		inset: 0;
-		pointer-events: none;
-		background-color: transparent;
-	}
-
-	:host([size='md']) .segmented-control__item::before,
-	:host(:not([size])) .segmented-control__item::before {
-		inset-block: var(--_segmented-control-md-item-indicator-inset);
-		inset-inline: calc(var(--_segmented-control-md-item-indicator-inset) / 2);
-		border-radius: calc(var(--semantics-controls-md-corner-radius) - (var(--_segmented-control-md-item-indicator-inset) / 2));
-	}
-
-	:host([size='sm']) .segmented-control__item::before {
-		inset-block: var(--_segmented-control-sm-item-indicator-inset);
-		inset-inline: calc(var(--_segmented-control-sm-item-indicator-inset) / 2);
-		border-radius: calc(var(--semantics-controls-sm-corner-radius) - (var(--_segmented-control-sm-item-indicator-inset) / 2));
-	}
-
-	:host([selected]) .segmented-control__item::before {
-		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
-	}
-
-	@media (hover: hover) {
-		:host(:not([selected])) .segmented-control__item:hover::before {
-			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
-		}
-	}
-
-
-	/* # Focus */
-
-	.segmented-control__item:has(:focus-visible)::before {
-		outline: var(--semantics-focus-ring-outline);
-		outline-offset: var(--semantics-focus-ring-outline-offset);
-		box-shadow: var(--semantics-focus-ring-box-shadow);
-	}
 `;
 //# sourceMappingURL=segmented-control.styles.js.map

package/dist/components/inputs/segmented-control/segmented-control.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqK5C,CAAC"}
+{"version":3,"file":"segmented-control.styles.js","sourceRoot":"","sources":["../../../../src/components/inputs/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqH5C,CAAC"}

package/dist/components/inputs/segmented-control/segmented-control.template.js

@@ -22,7 +22,7 @@ export function segmentedControlItemTemplate(component) {
 			>
 				${component.icon
         ? html `<nldd-icon name=${component.icon}></nldd-icon>`
-        : html `<slot name="icon"></slot>`}
+        : html `<slot name="icon">${isIcon ? html `<nldd-icon name="icon-placeholder"></nldd-icon>` : nothing}</slot>`}
 			</span>
 			<span class="segmented-control__item-text"
 				aria-hidden=${component.variant === 'text' ? nothing : 'true'}

package/dist/components/inputs/segmented-control/segmented-control.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/segmented-control/segmented-control.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,kCAAkC,CAAC;AAE1C,MAAM,UAAU,wBAAwB,CAAC,SAA+B;IACvE,OAAO,IAAI,CAAA,qBAAqB,SAAS,CAAC,aAAa,UAAU,CAAC;AACnE,CAAC;AAED,MAAM,UAAU,4BAA4B,CAAC,SAAmC;IAC/E,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,KAAK,MAAM,CAAC;IAC5C,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,IAAI,OAAO,CAAC;IAE5C,MAAM,KAAK,GAAG,IAAI,CAAA;;;WAGR,SAAS,CAAC,SAAS;WACnB,SAAS,CAAC,SAAS,IAAI,OAAO;YAC7B,SAAS,CAAC,KAAK;eACZ,SAAS,CAAC,QAAQ;gBACjB,SAAS,CAAC,QAAQ;iBACjB,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;cAC/B,SAAS,CAAC,aAAa;;;kBAGnB,SAAS,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;MAE3D,SAAS,CAAC,IAAI;QACf,CAAC,CAAC,IAAI,CAAA,mBAAmB,SAAS,CAAC,IAAI,eAAe;QACtD,CAAC,CAAC,IAAI,CAAA,2BAA2B;;;kBAGpB,SAAS,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;MAE3D,SAAS,CAAC,IAAI;;WAET,CAAC;IAEX,IAAI,MAAM,IAAI,SAAS,EAAE,CAAC;QACzB,OAAO,IAAI,CAAA,sBAAsB,SAAS,IAAI,KAAK,iBAAiB,CAAC;IACtE,CAAC;IACD,OAAO,KAAK,CAAC;AACd,CAAC"}
+{"version":3,"file":"segmented-control.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/segmented-control/segmented-control.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,kCAAkC,CAAC;AAE1C,MAAM,UAAU,wBAAwB,CAAC,SAA+B;IACvE,OAAO,IAAI,CAAA,qBAAqB,SAAS,CAAC,aAAa,UAAU,CAAC;AACnE,CAAC;AAED,MAAM,UAAU,4BAA4B,CAAC,SAAmC;IAC/E,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,KAAK,MAAM,CAAC;IAC5C,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,IAAI,OAAO,CAAC;IAE5C,MAAM,KAAK,GAAG,IAAI,CAAA;;;WAGR,SAAS,CAAC,SAAS;WACnB,SAAS,CAAC,SAAS,IAAI,OAAO;YAC7B,SAAS,CAAC,KAAK;eACZ,SAAS,CAAC,QAAQ;gBACjB,SAAS,CAAC,QAAQ;iBACjB,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;cAC/B,SAAS,CAAC,aAAa;;;kBAGnB,SAAS,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;MAE3D,SAAS,CAAC,IAAI;QACf,CAAC,CAAC,IAAI,CAAA,mBAAmB,SAAS,CAAC,IAAI,eAAe;QACtD,CAAC,CAAC,IAAI,CAAA,qBAAqB,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,iDAAiD,CAAC,CAAC,CAAC,OAAO,SAAS;;;kBAG/F,SAAS,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;MAE3D,SAAS,CAAC,IAAI;;WAET,CAAC;IAEX,IAAI,MAAM,IAAI,SAAS,EAAE,CAAC;QACzB,OAAO,IAAI,CAAA,sBAAsB,SAAS,IAAI,KAAK,iBAAiB,CAAC;IACtE,CAAC;IACD,OAAO,KAAK,CAAC;AACd,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"stepper.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/stepper/stepper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBAkFzB,CAAC"}
+{"version":3,"file":"stepper.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/stepper/stepper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBAoEzB,CAAC"}

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

@@ -5,6 +5,9 @@ export const stepperStyles = css `
 	/* # Host */
 
 	:host {
+		--_corner-radius: var(--semantics-controls-md-corner-radius);
+		--_divider-length: var(--semantics-buttons-md-divider-length);
+
 		display: inline-flex;
 		isolation: isolate;
 		-webkit-tap-highlight-color: transparent;
@@ -14,6 +17,16 @@ export const stepperStyles = css `
 		display: none;
 	}
 
+	:host([size="sm"]) {
+		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_divider-length: var(--semantics-buttons-sm-divider-length);
+	}
+
+	:host([size="xs"]) {
+		--_corner-radius: var(--semantics-controls-xs-corner-radius);
+		--_divider-length: var(--semantics-buttons-xs-divider-length);
+	}
+
 	:host([disabled]) {
 		opacity: var(--primitives-opacity-disabled);
 		pointer-events: none;
@@ -28,22 +41,10 @@ export const stepperStyles = css `
 
 	.stepper {
 		display: inline-flex;
+		border-radius: var(--_corner-radius);
+		background-color: var(--semantics-buttons-neutral-tinted-background-color);
 		flex-direction: row;
 		align-items: center;
-		background-color: var(--semantics-buttons-neutral-tinted-background-color);
-	}
-
-	:host([size='xs']) .stepper {
-		border-radius: var(--semantics-controls-xs-corner-radius);
-	}
-
-	:host([size='sm']) .stepper {
-		border-radius: var(--semantics-controls-sm-corner-radius);
-	}
-
-	:host([size='md']) .stepper,
-	:host(:not([size])) .stepper {
-		border-radius: var(--semantics-controls-md-corner-radius);
 	}
 
 	.stepper:focus-visible {
@@ -53,30 +54,15 @@ export const stepperStyles = css `
 	}
 
 
-	/* # Divider */
+	/* # Elements */
 
 	.stepper__divider {
+		background-color: var(--semantics-buttons-neutral-tinted-divider-color);
 		width: var(--semantics-dividers-thickness);
+		height: var(--_divider-length);
 		flex-shrink: 0;
-		background-color: var(--semantics-buttons-neutral-tinted-divider-color);
 	}
 
-	:host([size='xs']) .stepper__divider {
-		height: var(--semantics-buttons-xs-divider-length);
-	}
-
-	:host([size='sm']) .stepper__divider {
-		height: var(--semantics-buttons-sm-divider-length);
-	}
-
-	:host([size='md']) .stepper__divider,
-	:host(:not([size])) .stepper__divider {
-		height: var(--semantics-buttons-md-divider-length);
-	}
-
-
-	/* # Focus */
-
 	nldd-icon-button:focus-within {
 		position: relative;
 		z-index: 1;

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

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

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

@@ -19,7 +19,7 @@ export function stepperTemplate(component) {
 				size=${component.size}
 				icon="minus"
 				text=${component._t('components.stepper.decrement-action')}
-				hide-tooltip
+				tooltip-timing="never"
 				?disabled=${component.disabled || atMin}
 				aria-hidden="true"
 				tabindex="-1"
@@ -33,7 +33,7 @@ export function stepperTemplate(component) {
 				size=${component.size}
 				icon="plus"
 				text=${component._t('components.stepper.increment-action')}
-				hide-tooltip
+				tooltip-timing="never"
 				?disabled=${component.disabled || atMax}
 				aria-hidden="true"
 				tabindex="-1"

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

@@ -1 +1 @@
-{"version":3,"file":"switch.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/switch/switch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBA0JxB,CAAC"}
+{"version":3,"file":"switch.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/switch/switch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBA+GxB,CAAC"}

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

@@ -5,17 +5,16 @@ export const switchStyles = css `
 	/* # Host */
 
 	:host {
-		--_switch-xs-width: var(--semantics-controls-md-min-size);
-		--_switch-xs-height: var(--semantics-controls-xs-min-size);
-		--_switch-sm-width: var(--semantics-controls-lg-min-size);
-		--_switch-sm-height: var(--semantics-controls-sm-min-size);
-		--_switch-padding: var(--primitives-space-2);
-		--_switch-xs-thumb-size: calc(var(--_switch-xs-height) - var(--_switch-padding) * 2 - var(--components-switch-thumb-border-thickness) * 2);
-		--_switch-sm-thumb-size: calc(var(--_switch-sm-height) - var(--_switch-padding) * 2 - var(--components-switch-thumb-border-thickness) * 2);
+		--_track-width: var(--semantics-controls-lg-min-size);
+		--_track-height: var(--semantics-controls-sm-min-size);
+		--_padding: var(--primitives-space-2);
 		--_transition-duration: var(--primitives-transition-duration-fast);
+		--_thumb-size: calc(var(--_track-height) - var(--_padding) * 2 - var(--components-switch-thumb-border-thickness) * 2);
 
 		display: inline-block;
 		position: relative;
+		width: var(--_track-width);
+		height: var(--_track-height);
 		flex-shrink: 0;
 		-webkit-tap-highlight-color: transparent;
 	}
@@ -24,62 +23,45 @@ export const switchStyles = css `
 		display: none;
 	}
 
-	:host([disabled]) {
-		opacity: var(--primitives-opacity-disabled);
-	}
-
-	:host([size='xs']) {
-		width: var(--_switch-xs-width);
-		height: var(--_switch-xs-height);
+	:host([size="xs"]) {
+		--_track-width: var(--semantics-controls-md-min-size);
+		--_track-height: var(--semantics-controls-xs-min-size);
 	}
 
-	:host([size='sm']),
-	:host(:not([size])) {
-		width: var(--_switch-sm-width);
-		height: var(--_switch-sm-height);
+	:host([disabled]) {
+		opacity: var(--primitives-opacity-disabled);
 	}
 
 
-	/* # Input */
+	/* # Elements */
 
 	.switch__input {
 		position: absolute;
 		inset: 0;
+		opacity: 0;
 		z-index: 1;
+		margin: 0;
 		width: 100%;
 		height: 100%;
-		margin: 0;
-		opacity: 0;
 	}
 
-
-	/* # Track */
-
 	.switch__track {
-		position: relative;
-		display: flex;
-		align-items: center;
 		box-sizing: border-box;
+		display: flex;
+		position: relative;
+		border: var(--components-switch-border-thickness) solid var(--components-switch-border-color);
+		border-radius: calc(var(--_track-height) / 2);
+		background-color: var(--components-switch-background-color);
 		width: 100%;
 		height: 100%;
-		padding: var(--_switch-padding);
-		background-color: var(--components-switch-background-color);
-		border: var(--components-switch-border-thickness) solid var(--components-switch-border-color);
+		padding: var(--_padding);
+		align-items: center;
 		transition: background-color var(--_transition-duration) ease, border-color var(--_transition-duration) ease;
 	}
 
-	:host([size='xs']) .switch__track {
-		border-radius: calc(var(--semantics-controls-xs-min-size) / 2);
-	}
-
-	:host([size='sm']) .switch__track,
-	:host(:not([size])) .switch__track {
-		border-radius: calc(var(--semantics-controls-sm-min-size) / 2);
-	}
-
 	.switch__input:checked ~ .switch__track {
-		background-color: var(--components-switch-is-selected-background-color);
 		border-color: var(--components-switch-is-selected-background-color);
+		background-color: var(--components-switch-is-selected-background-color);
 	}
 
 	.switch__input:focus-visible ~ .switch__track {
@@ -88,65 +70,40 @@ export const switchStyles = css `
 		box-shadow: var(--semantics-focus-ring-box-shadow);
 	}
 
-
-	/* # Thumb */
-
 	.switch__thumb {
-		position: absolute;
-		left: var(--_switch-padding);
 		box-sizing: border-box;
+		position: absolute;
+		left: var(--_padding);
+		border: var(--components-switch-thumb-border-thickness) solid var(--components-switch-thumb-border-color);
 		border-radius: 50%;
 		background-color: var(--components-switch-thumb-background-color);
-		border: var(--components-switch-thumb-border-thickness) solid var(--components-switch-thumb-border-color);
+		width: var(--_thumb-size);
+		height: var(--_thumb-size);
 		transition: width var(--_transition-duration) ease, height var(--_transition-duration) ease, left var(--_transition-duration) ease, background-color var(--_transition-duration) ease, border-color var(--_transition-duration) ease;
 		will-change: width, height, left;
 	}
 
-	:host([size='xs']) .switch__thumb {
-		width: var(--_switch-xs-thumb-size);
-		height: var(--_switch-xs-thumb-size);
-	}
-
-	:host([size='sm']) .switch__thumb,
-	:host(:not([size])) .switch__thumb {
-		width: var(--_switch-sm-thumb-size);
-		height: var(--_switch-sm-thumb-size);
-	}
-
 	.switch__input:checked ~ .switch__track .switch__thumb {
-		background-color: var(--components-switch-is-selected-thumb-background-color);
+		left: calc(var(--_track-width) - var(--components-switch-thumb-border-thickness) * 2 - var(--_thumb-size) - var(--_padding) * 2);
 		border-color: var(--components-switch-is-selected-thumb-background-color);
+		background-color: var(--components-switch-is-selected-thumb-background-color);
+		width: calc(var(--_thumb-size) + var(--_padding) * 2);
+		height: calc(var(--_thumb-size) + var(--_padding) * 2);
 	}
 
-	:host([size='xs']) .switch__input:checked ~ .switch__track .switch__thumb {
-		left: calc(var(--_switch-xs-width) - var(--components-switch-thumb-border-thickness) * 2 - var(--_switch-xs-thumb-size) - var(--_switch-padding) * 2);
-		width: calc(var(--_switch-xs-thumb-size) + var(--_switch-padding) * 2);
-		height: calc(var(--_switch-xs-thumb-size) + var(--_switch-padding) * 2);
-	}
-
-	:host([size='sm']) .switch__input:checked ~ .switch__track .switch__thumb,
-	:host(:not([size])) .switch__input:checked ~ .switch__track .switch__thumb {
-		left: calc(var(--_switch-sm-width) - var(--components-switch-thumb-border-thickness) * 2 - var(--_switch-sm-thumb-size) - var(--_switch-padding) * 2);
-		width: calc(var(--_switch-sm-thumb-size) + var(--_switch-padding) * 2);
-		height: calc(var(--_switch-sm-thumb-size) + var(--_switch-padding) * 2);
-	}
-
-
-	/* # Check */
-
 	.switch__check {
+		display: flex;
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		transform: translate(-50%, -50%);
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		opacity: 0;
+		pointer-events: none;
 		width: calc(100% + var(--components-switch-thumb-border-thickness) * 2);
 		height: calc(100% + var(--components-switch-thumb-border-thickness) * 2);
+		align-items: center;
+		justify-content: center;
 		color: var(--components-switch-is-selected-background-color);
-		opacity: 0;
-		pointer-events: none;
+		transform: translate(-50%, -50%);
 		transition: opacity var(--_transition-duration) ease;
 	}
 

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

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

package/dist/components/inputs/switch-field/switch-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/switch-field/switch-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBAiD7B,CAAC"}
+{"version":3,"file":"switch-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/switch-field/switch-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBA8C7B,CAAC"}

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

@@ -17,32 +17,29 @@ export const switchFieldStyles = css `
 
 	.switch-field {
 		display: flex;
+		min-height: var(--semantics-controls-md-min-size);
 		flex-direction: row;
-		align-items: flex-start;
 		gap: var(--primitives-space-8);
-		min-height: var(--semantics-controls-md-min-size);
+		align-items: flex-start;
 	}
 
 
-	/* # Control */
+	/* # Elements */
 
 	.switch-field__control {
 		display: flex;
-		flex-shrink: 0;
 		min-height: var(--semantics-controls-md-min-size);
+		flex-shrink: 0;
 		align-items: center;
 	}
 
-
-	/* # Label */
-
 	.switch-field__label {
-		padding-top: calc((var(--semantics-controls-md-min-size) - 1em * var(--primitives-line-height-snug)) / 2);
 		display: flex;
+		cursor: default;
+		padding-top: calc((var(--semantics-controls-md-min-size) - 1em * var(--primitives-line-height-snug)) / 2);
 		flex-grow: 1;
-		font: var(--primitives-font-body-md-regular-snug);
 		color: var(--semantics-content-color);
-		cursor: default;
+		font: var(--primitives-font-body-md-regular-snug);
 	}
 
 	:host([disabled]) .switch-field__label {

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

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

package/dist/components/inputs/text-field/text-field.d.ts

@@ -16,6 +16,7 @@
  * @attr {boolean} required    - Required state
  * @attr {string} autocomplete - Autocomplete hint
  * @attr {string} accessible-label    - Accessible label forwarded to the inner input. Set automatically by nldd-form-field.
+ * @attr {boolean} no-spellcheck - Disables browser spellchecking on the inner input
  * @attr {string} width        - Optional fixed width (any CSS length, e.g. "240px"). Default: stretches to fill container.
  *
  * @fires input  - When input value changes
@@ -51,6 +52,7 @@ export declare class NLDDTextField extends LitElement {
     /** Accessible label forwarded to the inner <input>. Set automatically by nldd-form-field. */
     accessibleLabel: string;
     errorMessageIds: string;
+    noSpellcheck: boolean;
     /** Optional fixed width (any CSS length). When unset, the field stretches to fill its container. */
     width: string;
     private _input;