@nldd/design-system 0.8.94 → 0.8.96

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

@@ -9,24 +9,24 @@ export const segmentedControlStyles = css `
 	/* # Host */
 
 	:host {
-		--_corner-radius: var(--semantics-controls-md-corner-radius);
-		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
-		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
-		--_width: auto;
-		--_gap: var(--primitives-space-1);
-		--_selected-z-index: 1;
-		--_focus-z-index: 2;
+		--_segmented-control-corner-radius: var(--semantics-controls-md-corner-radius);
+		--_segmented-control-background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		--_segmented-control-highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		--_segmented-control-width: auto;
+		--_segmented-control-gap: var(--primitives-space-1);
+		--_segmented-control-selected-z-index: 1;
+		--_segmented-control-focus-z-index: 2;
 
 		${inheritedTextReset}
 		display: inline-grid;
 		position: relative;
-		border-radius: var(--_corner-radius);
-		background-color: var(--_background-color);
-		width: var(--_width);
+		border-radius: var(--_segmented-control-corner-radius);
+		background-color: var(--_segmented-control-background-color);
+		width: var(--_segmented-control-width);
 		max-width: 100%;
 		grid-auto-columns: 1fr;
 		grid-auto-flow: column;
-		gap: var(--_gap);
+		gap: var(--_segmented-control-gap);
 		isolation: isolate;
 		-webkit-user-select: none;
 		user-select: none;
@@ -38,25 +38,25 @@ export const segmentedControlStyles = css `
 		position: absolute;
 		inset: 0;
 		border-radius: inherit;
-		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_segmented-control-highlight-border-color);
 		pointer-events: none;
 	}
 
 	:host([appearance="neutral-base"]) {
-		--_background-color: var(--semantics-buttons-neutral-base-background-color);
-		--_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
+		--_segmented-control-background-color: var(--semantics-buttons-neutral-base-background-color);
+		--_segmented-control-highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
 	}
 
 	:host([size="sm"]) {
-		--_corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_segmented-control-corner-radius: var(--semantics-controls-sm-corner-radius);
 	}
 
 	:host([size="lg"]) {
-		--_corner-radius: var(--semantics-controls-lg-corner-radius);
+		--_segmented-control-corner-radius: var(--semantics-controls-lg-corner-radius);
 	}
 
 	:host([width="full"]) {
-		--_width: 100%;
+		--_segmented-control-width: 100%;
 
 		display: grid;
 	}
@@ -79,12 +79,12 @@ export const segmentedControlStyles = css `
 
 	::slotted(nldd-segmented-control-item[selected]) {
 		position: relative;
-		z-index: var(--_selected-z-index);
+		z-index: var(--_segmented-control-selected-z-index);
 	}
 
 	::slotted(nldd-segmented-control-item:focus-within) {
 		position: relative;
-		z-index: var(--_focus-z-index);
+		z-index: var(--_segmented-control-focus-z-index);
 	}
 `;
 export const segmentedControlItemStyles = css `
@@ -93,28 +93,28 @@ export const segmentedControlItemStyles = css `
 	/* # Host */
 
 	:host {
-		--_corner-radius: var(--semantics-controls-md-corner-radius);
-		--_min-size: var(--semantics-controls-md-min-size);
-		--_block-padding: var(--semantics-controls-md-block-padding);
-		--_inline-padding: var(--semantics-buttons-md-inline-padding);
-		--_gap: var(--semantics-buttons-md-gap);
-		--_font: var(--semantics-buttons-md-primary-text-font);
-		--_icon-size: var(--semantics-buttons-md-icon-size);
-		--_highlight-border-color: transparent;
-		--_content-color: var(--semantics-buttons-neutral-tinted-content-color);
-		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
-		--_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
-		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
-		--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
-		--_is-selected-background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
-		--_is-selected-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
-		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
-		--_is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
-		--_is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
-		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
-		--_is-selected-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
-		--_is-selected-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
-		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
+		--_segmented-control-item-corner-radius: var(--semantics-controls-md-corner-radius);
+		--_segmented-control-item-min-size: var(--semantics-controls-md-min-size);
+		--_segmented-control-item-block-padding: var(--semantics-controls-md-block-padding);
+		--_segmented-control-item-inline-padding: var(--semantics-buttons-md-inline-padding);
+		--_segmented-control-item-gap: var(--semantics-buttons-md-gap);
+		--_segmented-control-item-font: var(--semantics-buttons-md-primary-text-font);
+		--_segmented-control-item-icon-size: var(--semantics-buttons-md-icon-size);
+		--_segmented-control-item-highlight-border-color: transparent;
+		--_segmented-control-item-content-color: var(--semantics-buttons-neutral-tinted-content-color);
+		--_segmented-control-item-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+		--_segmented-control-item-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
+		--_segmented-control-item-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		--_segmented-control-item-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+		--_segmented-control-item-is-selected-background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
+		--_segmented-control-item-is-selected-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+		--_segmented-control-item-is-selected-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
+		--_segmented-control-item-is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
+		--_segmented-control-item-is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
+		--_segmented-control-item-is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
+		--_segmented-control-item-is-selected-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
+		--_segmented-control-item-is-selected-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
+		--_segmented-control-item-is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
 
 		${inheritedTextReset}
 		display: flex;
@@ -124,20 +124,20 @@ export const segmentedControlItemStyles = css `
 	}
 
 	:host([appearance="neutral-base"]) {
-		--_content-color: var(--semantics-buttons-neutral-base-content-color);
-		--_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
-		--_is-hovered-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
-		--_is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
-		--_is-active-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
-		--_is-selected-background-color: var(--semantics-buttons-neutral-base-is-selected-background-color);
-		--_is-selected-content-color: var(--semantics-buttons-neutral-base-is-selected-content-color);
-		--_is-selected-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-highlight-border-color);
-		--_is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-background-color);
-		--_is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-content-color);
-		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-highlight-border-color);
-		--_is-selected-is-active-background-color: var(--semantics-buttons-neutral-base-is-selected-is-active-background-color);
-		--_is-selected-is-active-content-color: var(--semantics-buttons-neutral-base-is-selected-is-active-content-color);
-		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-active-highlight-border-color);
+		--_segmented-control-item-content-color: var(--semantics-buttons-neutral-base-content-color);
+		--_segmented-control-item-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
+		--_segmented-control-item-is-hovered-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
+		--_segmented-control-item-is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
+		--_segmented-control-item-is-active-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
+		--_segmented-control-item-is-selected-background-color: var(--semantics-buttons-neutral-base-is-selected-background-color);
+		--_segmented-control-item-is-selected-content-color: var(--semantics-buttons-neutral-base-is-selected-content-color);
+		--_segmented-control-item-is-selected-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-highlight-border-color);
+		--_segmented-control-item-is-selected-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-background-color);
+		--_segmented-control-item-is-selected-is-hovered-content-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-content-color);
+		--_segmented-control-item-is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-hovered-highlight-border-color);
+		--_segmented-control-item-is-selected-is-active-background-color: var(--semantics-buttons-neutral-base-is-selected-is-active-background-color);
+		--_segmented-control-item-is-selected-is-active-content-color: var(--semantics-buttons-neutral-base-is-selected-is-active-content-color);
+		--_segmented-control-item-is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-selected-is-active-highlight-border-color);
 	}
 
 	:host([hidden]) {
@@ -145,49 +145,49 @@ export const segmentedControlItemStyles = css `
 	}
 
 	:host([size="sm"]) {
-		--_corner-radius: var(--semantics-controls-sm-corner-radius);
-		--_min-size: var(--semantics-controls-sm-min-size);
-		--_block-padding: var(--semantics-controls-sm-block-padding);
-		--_inline-padding: var(--semantics-buttons-sm-inline-padding);
-		--_gap: var(--semantics-buttons-sm-gap);
-		--_font: var(--semantics-buttons-sm-primary-text-font);
-		--_icon-size: var(--semantics-buttons-sm-icon-size);
+		--_segmented-control-item-corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_segmented-control-item-min-size: var(--semantics-controls-sm-min-size);
+		--_segmented-control-item-block-padding: var(--semantics-controls-sm-block-padding);
+		--_segmented-control-item-inline-padding: var(--semantics-buttons-sm-inline-padding);
+		--_segmented-control-item-gap: var(--semantics-buttons-sm-gap);
+		--_segmented-control-item-font: var(--semantics-buttons-sm-primary-text-font);
+		--_segmented-control-item-icon-size: var(--semantics-buttons-sm-icon-size);
 	}
 
 	:host([size="lg"]) {
-		--_corner-radius: var(--semantics-controls-lg-corner-radius);
-		--_min-size: var(--semantics-controls-lg-min-size);
-		--_block-padding: var(--semantics-controls-lg-block-padding);
-		--_inline-padding: var(--semantics-buttons-lg-inline-padding);
-		--_gap: var(--semantics-buttons-lg-gap);
-		--_font: var(--semantics-buttons-lg-primary-text-font);
-		--_icon-size: var(--semantics-buttons-lg-icon-size);
+		--_segmented-control-item-corner-radius: var(--semantics-controls-lg-corner-radius);
+		--_segmented-control-item-min-size: var(--semantics-controls-lg-min-size);
+		--_segmented-control-item-block-padding: var(--semantics-controls-lg-block-padding);
+		--_segmented-control-item-inline-padding: var(--semantics-buttons-lg-inline-padding);
+		--_segmented-control-item-gap: var(--semantics-buttons-lg-gap);
+		--_segmented-control-item-font: var(--semantics-buttons-lg-primary-text-font);
+		--_segmented-control-item-icon-size: var(--semantics-buttons-lg-icon-size);
 	}
 
 	:host([variant="icon"]) {
-		--_block-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
-		--_inline-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
-		--_icon-size: var(--semantics-buttons-md-is-icon-only-icon-size);
+		--_segmented-control-item-block-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
+		--_segmented-control-item-inline-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
+		--_segmented-control-item-icon-size: var(--semantics-buttons-md-is-icon-only-icon-size);
 	}
 
 	:host([variant="icon"][size="sm"]) {
-		--_block-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
-		--_inline-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
-		--_icon-size: var(--semantics-buttons-sm-is-icon-only-icon-size);
+		--_segmented-control-item-block-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
+		--_segmented-control-item-inline-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
+		--_segmented-control-item-icon-size: var(--semantics-buttons-sm-is-icon-only-icon-size);
 	}
 
 	:host([variant="icon"][size="lg"]) {
-		--_block-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
-		--_inline-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
-		--_icon-size: var(--semantics-buttons-lg-is-icon-only-icon-size);
+		--_segmented-control-item-block-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
+		--_segmented-control-item-inline-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
+		--_segmented-control-item-icon-size: var(--semantics-buttons-lg-is-icon-only-icon-size);
 	}
 
 	:host([variant="icon-and-text"][size="lg"]) {
-		--_block-padding: var(--primitives-space-8);
-		--_inline-padding: var(--primitives-space-8);
-		--_gap: var(--primitives-space-2);
-		--_font: var(--primitives-font-body-xxs-medium-flat);
-		--_icon-size: var(--semantics-buttons-md-is-icon-only-icon-size);
+		--_segmented-control-item-block-padding: var(--primitives-space-8);
+		--_segmented-control-item-inline-padding: var(--primitives-space-8);
+		--_segmented-control-item-gap: var(--primitives-space-2);
+		--_segmented-control-item-font: var(--primitives-font-body-xxs-medium-flat);
+		--_segmented-control-item-icon-size: var(--semantics-buttons-md-is-icon-only-icon-size);
 	}
 
 
@@ -198,19 +198,19 @@ export const segmentedControlItemStyles = css `
 		display: flex;
 		position: relative;
 		cursor: default;
-		border-radius: var(--_corner-radius);
-		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
+		border-radius: var(--_segmented-control-item-corner-radius);
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_segmented-control-item-highlight-border-color);
 		background: none;
 		width: 100%;
-		min-width: var(--_min-size);
-		height: var(--_min-size);
-		padding-block: var(--_block-padding);
-		padding-inline: var(--_inline-padding);
-		gap: var(--_gap);
+		min-width: var(--_segmented-control-item-min-size);
+		height: var(--_segmented-control-item-min-size);
+		padding-block: var(--_segmented-control-item-block-padding);
+		padding-inline: var(--_segmented-control-item-inline-padding);
+		gap: var(--_segmented-control-item-gap);
 		align-items: center;
 		justify-content: center;
-		color: var(--_content-color);
-		font: var(--_font);
+		color: var(--_segmented-control-item-content-color);
+		font: var(--_segmented-control-item-font);
 	}
 
 	:host([size="lg"][variant="icon-and-text"]) .segmented-control__item {
@@ -219,37 +219,37 @@ export const segmentedControlItemStyles = css `
 
 	@media (hover: hover) {
 		:host(:not([selected])) .segmented-control__item:hover {
-			background-color: var(--_is-hovered-background-color);
-			color: var(--_is-hovered-content-color);
+			background-color: var(--_segmented-control-item-is-hovered-background-color);
+			color: var(--_segmented-control-item-is-hovered-content-color);
 		}
 	}
 
 	:host(:not([selected])) .segmented-control__item:active {
-		background-color: var(--_is-active-background-color);
-		color: var(--_is-active-content-color);
+		background-color: var(--_segmented-control-item-is-active-background-color);
+		color: var(--_segmented-control-item-is-active-content-color);
 	}
 
 	:host([selected]) .segmented-control__item {
-		--_highlight-border-color: var(--_is-selected-highlight-border-color);
+		--_segmented-control-item-highlight-border-color: var(--_segmented-control-item-is-selected-highlight-border-color);
 
-		background-color: var(--_is-selected-background-color);
-		color: var(--_is-selected-content-color);
+		background-color: var(--_segmented-control-item-is-selected-background-color);
+		color: var(--_segmented-control-item-is-selected-content-color);
 	}
 
 	@media (hover: hover) {
 		:host([selected]) .segmented-control__item:hover {
-			--_highlight-border-color: var(--_is-selected-is-hovered-highlight-border-color);
+			--_segmented-control-item-highlight-border-color: var(--_segmented-control-item-is-selected-is-hovered-highlight-border-color);
 
-			background-color: var(--_is-selected-is-hovered-background-color);
-			color: var(--_is-selected-is-hovered-content-color);
+			background-color: var(--_segmented-control-item-is-selected-is-hovered-background-color);
+			color: var(--_segmented-control-item-is-selected-is-hovered-content-color);
 		}
 	}
 
 	:host([selected]) .segmented-control__item:active {
-		--_highlight-border-color: var(--_is-selected-is-active-highlight-border-color);
+		--_segmented-control-item-highlight-border-color: var(--_segmented-control-item-is-selected-is-active-highlight-border-color);
 
-		background-color: var(--_is-selected-is-active-background-color);
-		color: var(--_is-selected-is-active-content-color);
+		background-color: var(--_segmented-control-item-is-selected-is-active-background-color);
+		color: var(--_segmented-control-item-is-selected-is-active-content-color);
 	}
 
 	@media (forced-colors: active) {
@@ -275,7 +275,7 @@ export const segmentedControlItemStyles = css `
 
 	:host([selected]:focus-visible) .segmented-control__item,
 	:host([selected]) .segmented-control__item:has(:focus-visible) {
-		box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
+		box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_segmented-control-item-highlight-border-color);
 	}
 
 
@@ -304,8 +304,8 @@ export const segmentedControlItemStyles = css `
 
 	.segmented-control__item-icon {
 		display: none;
-		width: var(--_icon-size);
-		height: var(--_icon-size);
+		width: var(--_segmented-control-item-icon-size);
+		height: var(--_segmented-control-item-icon-size);
 		pointer-events: none;
 		flex-shrink: 0;
 		align-items: center;

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

@@ -8,9 +8,9 @@ export const stepperStyles = css `
 	/* # Host */
 
 	:host {
-		--_corner-radius: var(--semantics-controls-md-corner-radius);
-		--_divider-length: var(--semantics-buttons-md-divider-length);
-		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		--_stepper-corner-radius: var(--semantics-controls-md-corner-radius);
+		--_stepper-divider-length: var(--semantics-buttons-md-divider-length);
+		--_stepper-highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
 
 		display: inline-flex;
 		isolation: isolate;
@@ -24,13 +24,13 @@ export const stepperStyles = css `
 	}
 
 	:host([size="xs"]) {
-		--_corner-radius: var(--semantics-controls-xs-corner-radius);
-		--_divider-length: var(--semantics-buttons-xs-divider-length);
+		--_stepper-corner-radius: var(--semantics-controls-xs-corner-radius);
+		--_stepper-divider-length: var(--semantics-buttons-xs-divider-length);
 	}
 
 	:host([size="sm"]) {
-		--_corner-radius: var(--semantics-controls-sm-corner-radius);
-		--_divider-length: var(--semantics-buttons-sm-divider-length);
+		--_stepper-corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_stepper-divider-length: var(--semantics-buttons-sm-divider-length);
 	}
 
 	:host([disabled]) {
@@ -48,7 +48,7 @@ export const stepperStyles = css `
 	.stepper {
 		display: inline-flex;
 		position: relative;
-		border-radius: var(--_corner-radius);
+		border-radius: var(--_stepper-corner-radius);
 		background-color: var(--semantics-buttons-neutral-tinted-background-color);
 		flex-direction: row;
 		align-items: center;
@@ -59,7 +59,7 @@ export const stepperStyles = css `
 		position: absolute;
 		inset: 0;
 		border-radius: inherit;
-		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_stepper-highlight-border-color);
 		pointer-events: none;
 	}
 
@@ -75,7 +75,7 @@ export const stepperStyles = css `
 	.stepper__divider {
 		background-color: var(--semantics-buttons-neutral-tinted-divider-color);
 		width: var(--semantics-dividers-thickness);
-		height: var(--_divider-length);
+		height: var(--_stepper-divider-length);
 		flex-shrink: 0;
 	}
 

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,yBAoHxB,CAAC"}
+{"version":3,"file":"switch.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/switch/switch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBA4HxB,CAAC"}

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

@@ -8,16 +8,24 @@ export const switchStyles = css `
 	/* # Host */
 
 	:host {
-		--_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-width) * 2);
+		--_switch-track-width: var(--semantics-controls-lg-min-size);
+		--_switch-track-height: var(--semantics-controls-sm-min-size);
+		--_switch-padding: var(--primitives-space-2);
+		--_switch-transition-duration: var(--primitives-transition-duration-fast);
+		--_switch-thumb-size: calc(var(--_switch-track-height) - var(--_switch-padding) * 2 - var(--primitives-border-width-regular) * 2);
+		--_switch-border-width: var(--primitives-border-width-regular);
+		--_switch-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
+		--_switch-background-color: var(--semantics-surfaces-base-background-color);
+		--_switch-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
+		--_switch-thumb-border-width: var(--primitives-border-width-regular);
+		--_switch-thumb-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
+		--_switch-thumb-background-color: var(--semantics-surfaces-base-background-color);
+		--_switch-is-selected-thumb-background-color: var(--semantics-controls-is-highlighted-contrast-color);
 
 		display: inline-block;
 		position: relative;
-		width: var(--_track-width);
-		height: var(--_track-height);
+		width: var(--_switch-track-width);
+		height: var(--_switch-track-height);
 		flex-shrink: 0;
 		-webkit-user-select: none;
 		user-select: none;
@@ -29,8 +37,8 @@ export const switchStyles = css `
 	}
 
 	:host([size="xs"]) {
-		--_track-width: var(--semantics-controls-md-min-size);
-		--_track-height: var(--semantics-controls-xs-min-size);
+		--_switch-track-width: var(--semantics-controls-md-min-size);
+		--_switch-track-height: var(--semantics-controls-xs-min-size);
 	}
 
 	:host([disabled]) {
@@ -54,19 +62,19 @@ export const switchStyles = css `
 		box-sizing: border-box;
 		display: flex;
 		position: relative;
-		border: var(--components-switch-border-width) solid var(--components-switch-border-color);
-		border-radius: calc(var(--_track-height) / 2);
-		background-color: var(--components-switch-background-color);
+		border: var(--_switch-border-width) solid var(--_switch-border-color);
+		border-radius: calc(var(--_switch-track-height) / 2);
+		background-color: var(--_switch-background-color);
 		width: 100%;
 		height: 100%;
-		padding: var(--_padding);
+		padding: var(--_switch-padding);
 		align-items: center;
-		transition: background-color var(--_transition-duration) ease, border-color var(--_transition-duration) ease;
+		transition: background-color var(--_switch-transition-duration) ease, border-color var(--_switch-transition-duration) ease;
 	}
 
 	.switch__input:checked ~ .switch__track {
-		border-color: var(--components-switch-is-selected-background-color);
-		background-color: var(--components-switch-is-selected-background-color);
+		border-color: var(--_switch-is-selected-background-color);
+		background-color: var(--_switch-is-selected-background-color);
 	}
 
 	.switch__input:focus-visible ~ .switch__track {
@@ -78,22 +86,22 @@ export const switchStyles = css `
 	.switch__thumb {
 		box-sizing: border-box;
 		position: absolute;
-		left: var(--_padding);
-		border: var(--components-switch-thumb-border-width) solid var(--components-switch-thumb-border-color);
+		left: var(--_switch-padding);
+		border: var(--_switch-thumb-border-width) solid var(--_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;
+		background-color: var(--_switch-thumb-background-color);
+		width: var(--_switch-thumb-size);
+		height: var(--_switch-thumb-size);
+		transition: width var(--_switch-transition-duration) ease, height var(--_switch-transition-duration) ease, left var(--_switch-transition-duration) ease, background-color var(--_switch-transition-duration) ease, border-color var(--_switch-transition-duration) ease;
 		will-change: width, height, left;
 	}
 
 	.switch__input:checked ~ .switch__track .switch__thumb {
-		left: calc(var(--_track-width) - var(--components-switch-thumb-border-width) * 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);
+		left: calc(var(--_switch-track-width) - var(--_switch-thumb-border-width) * 2 - var(--_switch-thumb-size) - var(--_switch-padding) * 2);
+		border-color: var(--_switch-is-selected-thumb-background-color);
+		background-color: var(--_switch-is-selected-thumb-background-color);
+		width: calc(var(--_switch-thumb-size) + var(--_switch-padding) * 2);
+		height: calc(var(--_switch-thumb-size) + var(--_switch-padding) * 2);
 	}
 
 	.switch__check {
@@ -103,13 +111,13 @@ export const switchStyles = css `
 		left: 50%;
 		opacity: 0;
 		pointer-events: none;
-		width: calc(100% + var(--components-switch-thumb-border-width) * 2);
-		height: calc(100% + var(--components-switch-thumb-border-width) * 2);
+		width: calc(100% + var(--_switch-thumb-border-width) * 2);
+		height: calc(100% + var(--_switch-thumb-border-width) * 2);
 		align-items: center;
 		justify-content: center;
-		color: var(--components-switch-is-selected-background-color);
+		color: var(--_switch-is-selected-background-color);
 		transform: translate(-50%, -50%);
-		transition: opacity var(--_transition-duration) ease;
+		transition: opacity var(--_switch-transition-duration) ease;
 	}
 
 	.switch__input:checked ~ .switch__track .switch__check {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoH9B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4H9B,CAAC"}

package/dist/components/inputs/text-editor/text-editor.js

@@ -402,7 +402,7 @@ let NLDDTextEditor = class NLDDTextEditor extends DescribedBy(FormAssociated(NLD
     }
     firstUpdated() {
         this._initialValue = this.value;
-        this.style.setProperty('--_rows', String(this.rows));
+        this.style.setProperty('--_text-editor-rows', String(this.rows));
         // The sentinels are the overlay's own; a value that carries one (an editor
         // whose text was round-tripped through another) hands it back stripped.
         this.mountEditor(stripSentinels(this.value));
@@ -431,7 +431,7 @@ let NLDDTextEditor = class NLDDTextEditor extends DescribedBy(FormAssociated(NLD
     }
     updated(changed) {
         if (changed.has('rows')) {
-            this.style.setProperty('--_rows', String(this.rows));
+            this.style.setProperty('--_text-editor-rows', String(this.rows));
         }
         if (this.view) {
             // A render after setTranslations() or a new `translations`: the labels