@nldd/design-system 0.8.44 → 0.8.45

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

@@ -5,9 +5,15 @@ export const searchFieldStyles = css `
 	/* # Host */
 
 	:host {
+		--_width: 100%;
 		--_background-color: var(--semantics-input-fields-background-color);
+		--_corner-radius: var(--semantics-controls-md-corner-radius);
+		--_min-size: var(--semantics-controls-md-min-size);
+		--_search-icon-size: var(--primitives-space-24);
+		--_text-font: var(--semantics-input-fields-md-text-font);
+		--_end-padding-right: calc((var(--_min-size) - var(--semantics-controls-sm-min-size)) / 2 - var(--semantics-input-fields-border-thickness));
+		--_end-gap: var(--primitives-space-6);
 		--_z-index-button-focus: 1;
-		--_width: auto;
 
 		display: block;
 		width: var(--_width);
@@ -25,29 +31,34 @@ export const searchFieldStyles = css `
 		pointer-events: none;
 	}
 
+	:host([size="sm"]) {
+		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_min-size: var(--semantics-controls-sm-min-size);
+		--_search-icon-size: var(--primitives-space-20);
+		--_text-font: var(--semantics-input-fields-sm-text-font);
+		--_end-padding-right: calc((var(--_min-size) - var(--semantics-controls-xs-min-size)) / 2 - var(--semantics-input-fields-border-thickness));
+		--_end-gap: var(--primitives-space-4);
+	}
+
 
 	/* # Block */
 
 	.search-field {
-		position: relative;
-		display: flex;
 		box-sizing: border-box;
+		display: flex;
+		position: relative;
 		border: var(--semantics-input-fields-border);
+		border-radius: var(--_corner-radius);
 		background-color: var(--_background-color);
 		width: 100%;
+		min-height: var(--_min-size);
 		flex-direction: row;
 		align-items: center;
 	}
 
-	:host([size='sm']) .search-field {
-		border-radius: var(--semantics-controls-sm-corner-radius);
-		min-height: var(--semantics-controls-sm-min-size);
-	}
-
-	:host([size='md']) .search-field,
-	:host(:not([size])) .search-field {
-		border-radius: var(--semantics-controls-md-corner-radius);
-		min-height: var(--semantics-controls-md-min-size);
+	.search-field:has(input:-webkit-autofill),
+	.search-field:has(input:autofill) {
+		--_background-color: var(--semantics-input-fields-is-autofill-background-color);
 	}
 
 	.search-field:has(.search-field__input:focus-visible) {
@@ -56,60 +67,37 @@ export const searchFieldStyles = css `
 		box-shadow: var(--semantics-focus-ring-box-shadow);
 	}
 
-	.search-field:has(input:-webkit-autofill),
-	.search-field:has(input:autofill) {
-		--_background-color: var(--semantics-input-fields-is-autofill-background-color);
-	}
 
-
-	/* # Search icon */
+	/* # Elements */
 
 	.search-field__search-icon {
 		display: flex;
+		margin-inline: calc((var(--_min-size) - var(--_search-icon-size)) / 2 - var(--semantics-input-fields-border-thickness));
+		width: var(--_search-icon-size);
+		height: var(--_search-icon-size);
+		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
-		flex-shrink: 0;
 		color: var(--semantics-content-secondary-color);
 	}
 
-	:host([size='sm']) .search-field__search-icon {
-		margin-inline: calc((var(--semantics-controls-sm-min-size) - var(--primitives-space-20)) / 2 - var(--semantics-input-fields-border-thickness));
-		width: var(--primitives-space-20);
-		height: var(--primitives-space-20);
-	}
-
-	:host([size='md']) .search-field__search-icon,
-	:host(:not([size])) .search-field__search-icon {
-		margin-inline: calc((var(--semantics-controls-md-min-size) - var(--primitives-space-24)) / 2 - var(--semantics-input-fields-border-thickness));
-		width: var(--primitives-space-24);
-		height: var(--primitives-space-24);
-	}
-
-
-	/* # Input */
-
 	.search-field__input {
 		box-sizing: border-box;
 		margin: 0;
-		border: none;
 		outline: none;
+		border: none;
 		background: transparent;
 		min-width: 0;
 		padding: 0;
-		flex: 1;
+		flex-grow: 1;
+		flex-shrink: 1;
+		flex-basis: 0;
+		align-self: stretch;
 		color: var(--semantics-content-color);
+		font: var(--_text-font);
 		appearance: none;
 	}
 
-	:host([size='sm']) .search-field__input {
-		font: var(--semantics-input-fields-sm-text-font);
-	}
-
-	:host([size='md']) .search-field__input,
-	:host(:not([size])) .search-field__input {
-		font: var(--semantics-input-fields-md-text-font);
-	}
-
 	.search-field__input::placeholder {
 		color: var(--semantics-input-fields-placeholder-color);
 	}
@@ -123,9 +111,6 @@ export const searchFieldStyles = css `
 		-webkit-appearance: none;
 	}
 
-
-	/* # Input fade */
-
 	.search-field__input-fade {
 		position: relative;
 		width: 0;
@@ -137,43 +122,23 @@ export const searchFieldStyles = css `
 		content: '';
 		position: absolute;
 		top: 0;
-		bottom: 0;
 		right: 0;
+		bottom: 0;
+		border-radius: var(--_corner-radius);
 		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']) .search-field__input-fade::after {
-		border-radius: var(--semantics-controls-sm-corner-radius);
-	}
-
-	:host([size='md']) .search-field__input-fade::after,
-	:host(:not([size])) .search-field__input-fade::after {
-		border-radius: var(--semantics-controls-md-corner-radius);
-	}
-
-
-	/* # End */
-
 	.search-field__end {
 		display: flex;
 		position: relative;
+		padding-right: var(--_end-padding-right);
 		flex-shrink: 0;
+		gap: var(--_end-gap);
 		align-items: center;
 	}
 
-	:host([size='sm']) .search-field__end {
-		padding-right: calc((var(--semantics-controls-sm-min-size) - var(--semantics-controls-xs-min-size)) / 2 - var(--semantics-input-fields-border-thickness));
-		gap: var(--primitives-space-4);
-	}
-
-	:host([size='md']) .search-field__end,
-	:host(:not([size])) .search-field__end {
-		padding-right: calc((var(--semantics-controls-md-min-size) - var(--semantics-controls-sm-min-size)) / 2 - var(--semantics-input-fields-border-thickness));
-		gap: var(--primitives-space-6);
-	}
-
 	.search-field__clear-button:focus-within,
 	.search-field__search-button:focus-within {
 		position: relative;

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

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

package/dist/components/inputs/search-field/search-field.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-field.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,4CAA4C,CAAC;AACpD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,8BAA8B,CAAC;AAEtC,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,GAAG,cAAc,CA6C9E"}
+{"version":3,"file":"search-field.template.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,4CAA4C,CAAC;AACpD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,8BAA8B,CAAC;AAEtC,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,GAAG,cAAc,CA8C9E"}

package/dist/components/inputs/search-field/search-field.template.js

@@ -16,6 +16,7 @@ export function searchFieldTemplate(component) {
 				aria-label=${component.accessibleLabel || component.placeholder || nothing}
 				?disabled=${component.disabled}
 				name=${component.name || nothing}
+				spellcheck=${component.noSpellcheck ? 'false' : 'true'}
 				@input=${component._handleInput}
 				@change=${component._handleChange}
 				@keydown=${component._handleKeydown}

package/dist/components/inputs/search-field/search-field.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-field.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,4CAA4C,CAAC;AACpD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,8BAA8B,CAAC;AAEtC,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAEzD,OAAO,IAAI,CAAA;;;;;;;aAOC,SAAS,CAAC,KAAK;kBACV,SAAS,CAAC,WAAW;iBACtB,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,WAAW,IAAI,OAAO;gBAC9D,SAAS,CAAC,QAAQ;WACvB,SAAS,CAAC,IAAI,IAAI,OAAO;aACvB,SAAS,CAAC,YAAY;cACrB,SAAS,CAAC,aAAa;eACtB,SAAS,CAAC,cAAc;;;;MAIjC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAId,UAAU;;cAEV,SAAS,CAAC,EAAE,CAAC,sCAAsC,CAAC;gBAClD,SAAS,CAAC,YAAY;;;KAGjC,CAAC,CAAC,CAAC,OAAO;MACT,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAIzB,UAAU;cACV,SAAS,CAAC,EAAE,CAAC,uCAAuC,CAAC;gBACnD,SAAS,CAAC,aAAa;;;KAGlC,CAAC,CAAC,CAAC,OAAO;;;EAGb,CAAC;AACH,CAAC"}
+{"version":3,"file":"search-field.template.js","sourceRoot":"","sources":["../../../../src/components/inputs/search-field/search-field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,4CAA4C,CAAC;AACpD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,8BAA8B,CAAC;AAEtC,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAEzD,OAAO,IAAI,CAAA;;;;;;;aAOC,SAAS,CAAC,KAAK;kBACV,SAAS,CAAC,WAAW;iBACtB,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,WAAW,IAAI,OAAO;gBAC9D,SAAS,CAAC,QAAQ;WACvB,SAAS,CAAC,IAAI,IAAI,OAAO;iBACnB,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;aAC7C,SAAS,CAAC,YAAY;cACrB,SAAS,CAAC,aAAa;eACtB,SAAS,CAAC,cAAc;;;;MAIjC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAId,UAAU;;cAEV,SAAS,CAAC,EAAE,CAAC,sCAAsC,CAAC;gBAClD,SAAS,CAAC,YAAY;;;KAGjC,CAAC,CAAC,CAAC,OAAO;MACT,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAIzB,UAAU;cACV,SAAS,CAAC,EAAE,CAAC,uCAAuC,CAAC;gBACnD,SAAS,CAAC,aAAa;;;KAGlC,CAAC,CAAC,CAAC,OAAO;;;EAGb,CAAC;AACH,CAAC"}

package/dist/components/inputs/segmented-control/segmented-control.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBAuDlC,CAAC;AAEF,eAAO,MAAM,0BAA0B,yBAuItC,CAAC"}
+{"version":3,"file":"segmented-control.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBAoDlC,CAAC;AAEF,eAAO,MAAM,0BAA0B,yBAqHtC,CAAC"}

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

@@ -5,10 +5,12 @@ export const segmentedControlStyles = css `
 	/* # Host */
 
 	:host {
+		--_corner-radius: var(--semantics-controls-md-corner-radius);
 		--_width: auto;
 		--_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%;
@@ -23,6 +25,10 @@ export const segmentedControlStyles = css `
 		display: none;
 	}
 
+	:host([size="sm"]) {
+		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+	}
+
 	:host([width="full"]) {
 		--_width: 100%;
 
@@ -38,17 +44,8 @@ export const segmentedControlStyles = css `
 		pointer-events: none;
 	}
 
-	:host([size='md']),
-	:host(:not([size])) {
-		border-radius: var(--semantics-controls-md-corner-radius);
-	}
 
-	:host([size='sm']) {
-		border-radius: var(--semantics-controls-sm-corner-radius);
-	}
-
-
-	/* # Focus */
+	/* # Elements */
 
 	::slotted(nldd-segmented-control-item:focus-within) {
 		position: relative;
@@ -61,6 +58,12 @@ 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;
 		position: relative;
 		min-width: 0;
@@ -71,43 +74,34 @@ 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 {
 		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;
 		color: var(--semantics-buttons-neutral-tinted-content-color);
+		font: var(--_font);
 	}
 
-	:host([size='md']) .segmented-control__item,
-	:host(:not([size])) .segmented-control__item {
-		border-radius: var(--semantics-controls-md-corner-radius);
-		min-width: var(--semantics-controls-md-min-size);
-		height: var(--semantics-controls-md-min-size);
-		padding-inline: var(--primitives-space-12);
-		font: var(--semantics-buttons-md-font);
-	}
-
-	:host([size='sm']) .segmented-control__item {
-		border-radius: var(--semantics-controls-sm-corner-radius);
-		min-width: var(--semantics-controls-sm-min-size);
-		height: var(--semantics-controls-sm-min-size);
-		padding-inline: 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 {
-		padding: 0;
-	}
-
-	:host([variant='icon'][size='sm']) .segmented-control__item {
+	:host([variant="icon"]) .segmented-control__item {
 		padding: 0;
 	}
 
@@ -133,7 +127,7 @@ export const segmentedControlItemStyles = css `
 	}
 
 
-	/* # Input */
+	/* # Elements */
 
 	.segmented-control__item-input {
 		position: absolute;
@@ -145,43 +139,28 @@ export const segmentedControlItemStyles = css `
 		height: 100%;
 	}
 
-
-	/* # Text */
-
 	.segmented-control__item-text {
 		pointer-events: none;
 		overflow: hidden;
-		text-overflow: ellipsis;
 		white-space: nowrap;
+		text-overflow: ellipsis;
 	}
 
-	:host([variant='icon']) .segmented-control__item-text {
+	:host([variant="icon"]) .segmented-control__item-text {
 		display: none;
 	}
 
-
-	/* # Icon */
-
 	.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;
 	}
 
-	: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;
 	}
 

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuI5C,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,24 +41,12 @@ 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;
 	}
 
-	: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 {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
@@ -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;
 	}
 
-	: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/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,59 +23,42 @@ export const switchStyles = css `
 		display: none;
 	}
 
-	:host([disabled]) {
-		opacity: var(--primitives-opacity-disabled);
+	:host([size="xs"]) {
+		--_track-width: var(--semantics-controls-md-min-size);
+		--_track-height: var(--semantics-controls-xs-min-size);
 	}
 
-	:host([size='xs']) {
-		width: var(--_switch-xs-width);
-		height: var(--_switch-xs-height);
-	}
-
-	: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;
-		z-index: 1;
 		opacity: 0;
+		z-index: 1;
 		margin: 0;
 		width: 100%;
 		height: 100%;
 	}
 
-
-	/* # Track */
-
 	.switch__track {
-		position: relative;
-		display: flex;
 		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);
+		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 {
 		border-color: var(--components-switch-is-selected-background-color);
 		background-color: var(--components-switch-is-selected-background-color);
@@ -88,57 +70,32 @@ 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;
-		border-radius: 50%;
+		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);
+		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 {
+		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%;
-		display: flex;
 		opacity: 0;
 		pointer-events: none;
 		width: calc(100% + var(--components-switch-thumb-border-thickness) * 2);