@nldd/design-system 0.8.95 → 0.8.97

package/dist/components/inputs/date-picker/date-picker.styles.js

@@ -9,60 +9,60 @@ export const datePickerStyles = css `
 	/* # Host */
 
 	:host {
-		--_header-margin-bottom: var(--primitives-space-16);
-		--_footer-margin-top: var(--primitives-space-8);
-		--_title-font: var(--primitives-font-display-5-sm);
-		--_title-button-corner-radius: var(--semantics-controls-sm-corner-radius);
-		--_title-button-min-size: var(--semantics-controls-sm-min-size);
-		--_title-picker-icon-size: var(--primitives-space-20);
-		--_weekday-header-font: var(--primitives-font-body-xs-regular-flat);
-		--_weekday-header-content-color: var(--semantics-content-secondary-color);
-		--_divider-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
-		--_divider-thickness: var(--semantics-dividers-thickness);
-		--_week-number-column-width: var(--primitives-space-32);
-		--_week-number-font: var(--primitives-font-body-xs-regular-flat);
-		--_week-number-content-color: var(--semantics-content-secondary-color);
+		--_date-picker-header-margin-bottom: var(--primitives-space-16);
+		--_date-picker-footer-margin-top: var(--primitives-space-8);
+		--_date-picker-title-font: var(--primitives-font-display-5-sm);
+		--_date-picker-title-button-corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_date-picker-title-button-min-size: var(--semantics-controls-sm-min-size);
+		--_date-picker-title-picker-icon-size: var(--primitives-space-20);
+		--_date-picker-weekday-header-font: var(--primitives-font-body-xs-regular-flat);
+		--_date-picker-weekday-header-content-color: var(--semantics-content-secondary-color);
+		--_date-picker-divider-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
+		--_date-picker-divider-thickness: var(--semantics-dividers-thickness);
+		--_date-picker-week-number-column-width: var(--primitives-space-32);
+		--_date-picker-week-number-font: var(--primitives-font-body-xs-regular-flat);
+		--_date-picker-week-number-content-color: var(--semantics-content-secondary-color);
 		/* Set from JS by the width attribute; initial keeps it guaranteed-invalid
-		   so every var(--_width, ...) below falls back to its own default. */
-		--_width: initial;
-		--_day-size: var(--semantics-controls-md-min-size);
-		--_day-corner-radius: var(--semantics-controls-md-corner-radius);
-		--_day-font: var(--primitives-font-body-sm-medium-flat);
-		--_day-indicator-inset: var(--primitives-space-2);
-		--_day-indicator-size: calc(var(--_day-size) - var(--_day-indicator-inset) * 2);
-		--_day-indicator-corner-radius: var(--_day-corner-radius);
-		--_day-is-in-range-background-color: var(--semantics-categories-accent-tinted-background-color);
-		--_day-is-in-range-content-color: var(--semantics-content-color);
-		--_day-is-today-border-color: light-dark(var(--primitives-color-neutral-250), var(--primitives-color-neutral-400));
-		--_day-is-hovered-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-150));
-		--_day-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
-		--_day-is-selected-content-color: var(--semantics-controls-is-highlighted-contrast-color);
-		--_day-is-outside-month-content-color: var(--semantics-content-secondary-color);
-		--_day-is-unavailable-content-color: var(--semantics-content-secondary-color);
+		   so every var(--_date-picker-width, ...) below falls back to its own default. */
+		--_date-picker-width: initial;
+		--_date-picker-day-size: var(--semantics-controls-md-min-size);
+		--_date-picker-day-corner-radius: var(--semantics-controls-md-corner-radius);
+		--_date-picker-day-font: var(--primitives-font-body-sm-medium-flat);
+		--_date-picker-day-indicator-inset: var(--primitives-space-2);
+		--_date-picker-day-indicator-size: calc(var(--_date-picker-day-size) - var(--_date-picker-day-indicator-inset) * 2);
+		--_date-picker-day-indicator-corner-radius: var(--_date-picker-day-corner-radius);
+		--_date-picker-day-is-in-range-background-color: var(--semantics-categories-accent-tinted-background-color);
+		--_date-picker-day-is-in-range-content-color: var(--semantics-content-color);
+		--_date-picker-day-is-today-border-color: light-dark(var(--primitives-color-neutral-250), var(--primitives-color-neutral-400));
+		--_date-picker-day-is-hovered-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-150));
+		--_date-picker-day-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
+		--_date-picker-day-is-selected-content-color: var(--semantics-controls-is-highlighted-contrast-color);
+		--_date-picker-day-is-outside-month-content-color: var(--semantics-content-secondary-color);
+		--_date-picker-day-is-unavailable-content-color: var(--semantics-content-secondary-color);
 
 		${inheritedTextReset}
 		display: block;
 		/* Stated, not fit-content: the calendar inside is sized in percentages, so
 		   measuring it from here is circular and resolves to the container. The
-		   width attribute (--_width) overrides the intrinsic seven-cell width;
+		   width attribute (--_date-picker-width) overrides the intrinsic seven-cell width;
 		   the percentage-based inside stretches along. */
-		width: var(--_width, calc(var(--_day-size) * 7));
+		width: var(--_date-picker-width, calc(var(--_date-picker-day-size) * 7));
 		color: var(--semantics-content-color);
 		-webkit-tap-highlight-color: transparent;
 	}
 
 	:host([week-numbers]) {
-		width: var(--_width, calc(var(--_day-size) * 7 + var(--_week-number-column-width)));
+		width: var(--_date-picker-width, calc(var(--_date-picker-day-size) * 7 + var(--_date-picker-week-number-column-width)));
 	}
 
 	/* An explicit width attribute outranks the derived stacked width: stacked
 	   only describes how narrow the picker happens to be, not what the consumer
 	   asked for. */
 	:host([stacked]) {
-		--_title-font: var(--primitives-font-display-4-sm);
-		--_title-button-min-size: var(--semantics-controls-md-min-size);
+		--_date-picker-title-font: var(--primitives-font-display-4-sm);
+		--_date-picker-title-button-min-size: var(--semantics-controls-md-min-size);
 
-		width: var(--_width, 100%);
+		width: var(--_date-picker-width, 100%);
 	}
 
 	:host([hidden]) {
@@ -86,7 +86,7 @@ export const datePickerStyles = css `
 
 	.date-picker__header {
 		display: flex;
-		margin-bottom: var(--_header-margin-bottom);
+		margin-bottom: var(--_date-picker-header-margin-bottom);
 		align-items: center;
 		justify-content: space-between;
 		gap: var(--primitives-space-8);
@@ -97,7 +97,7 @@ export const datePickerStyles = css `
 		margin: 0;
 		align-items: center;
 		gap: var(--primitives-space-4);
-		font: var(--_title-font);
+		font: var(--_date-picker-title-font);
 		/* A heading that breaks between month and year stops answering the one
 		   question it is there for. */
 		white-space: nowrap;
@@ -110,9 +110,9 @@ export const datePickerStyles = css `
 		margin: 0;
 		outline: none;
 		border: none;
-		border-radius: var(--_title-button-corner-radius);
+		border-radius: var(--_date-picker-title-button-corner-radius);
 		background: none;
-		min-height: var(--_title-button-min-size);
+		min-height: var(--_date-picker-title-button-min-size);
 		padding: 0;
 		align-items: center;
 		color: inherit;
@@ -122,8 +122,8 @@ export const datePickerStyles = css `
 
 	.date-picker__title-picker-icon {
 		display: flex;
-		width: var(--_title-picker-icon-size);
-		height: var(--_title-picker-icon-size);
+		width: var(--_date-picker-title-picker-icon-size);
+		height: var(--_date-picker-title-picker-icon-size);
 		flex-shrink: 0;
 		align-items: center;
 	}
@@ -156,16 +156,16 @@ export const datePickerStyles = css `
 
 	.date-picker__weekday-header-cell,
 	.date-picker__week-header-cell {
-		border-block-end: var(--_divider-thickness) solid var(--_divider-color);
+		border-block-end: var(--_date-picker-divider-thickness) solid var(--_date-picker-divider-color);
 		padding: 0 0 var(--primitives-space-4);
-		width: var(--_day-size);
-		color: var(--_weekday-header-content-color);
-		font: var(--_weekday-header-font);
+		width: var(--_date-picker-day-size);
+		color: var(--_date-picker-weekday-header-content-color);
+		font: var(--_date-picker-weekday-header-font);
 	}
 
 	.date-picker__day-cell,
 	.date-picker__week-cell {
-		border-block-end: var(--_divider-thickness) solid var(--_divider-color);
+		border-block-end: var(--_date-picker-divider-thickness) solid var(--_date-picker-divider-color);
 		padding: 0;
 	}
 
@@ -179,14 +179,14 @@ export const datePickerStyles = css `
 		/* Table cells do not inherit the host's border-box, so the padding and rule
 		   below would otherwise be added on top of the stated width. */
 		box-sizing: border-box;
-		border-inline-end: var(--_divider-thickness) solid var(--_divider-color);
+		border-inline-end: var(--_date-picker-divider-thickness) solid var(--_date-picker-divider-color);
 		/* Stated rather than auto: an auto column under table-layout: fixed takes
 		   all the surplus width and pushes the dates aside. */
-		width: var(--_week-number-column-width);
+		width: var(--_date-picker-week-number-column-width);
 		padding-right: var(--primitives-space-8);
 		text-align: right;
-		color: var(--_week-number-content-color);
-		font: var(--_week-number-font);
+		color: var(--_date-picker-week-number-content-color);
+		font: var(--_date-picker-week-number-font);
 	}
 
 
@@ -201,20 +201,20 @@ export const datePickerStyles = css `
 		border: none;
 		background: none;
 		width: 100%;
-		height: var(--_day-size);
+		height: var(--_date-picker-day-size);
 		padding: 0;
 		align-items: center;
 		justify-content: center;
 		color: inherit;
-		font: var(--_day-font);
+		font: var(--_date-picker-day-font);
 		appearance: none;
 	}
 
 	.date-picker__day-range-indicator {
 		position: absolute;
 		inset-inline: 0;
-		inset-block: var(--_day-indicator-inset);
-		background-color: var(--_day-is-in-range-background-color);
+		inset-block: var(--_date-picker-day-indicator-inset);
+		background-color: var(--_date-picker-day-is-in-range-background-color);
 		pointer-events: none;
 	}
 
@@ -231,11 +231,11 @@ export const datePickerStyles = css `
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		border-radius: var(--_day-indicator-corner-radius);
+		border-radius: var(--_date-picker-day-indicator-corner-radius);
 		background-color: transparent;
 		pointer-events: none;
-		width: var(--_day-indicator-size);
-		height: var(--_day-indicator-size);
+		width: var(--_date-picker-day-indicator-size);
+		height: var(--_date-picker-day-indicator-size);
 		transform: translate(-50%, -50%);
 	}
 
@@ -254,7 +254,7 @@ export const datePickerStyles = css `
 	}
 
 	.date-picker__day.is-today .date-picker__day-indicator {
-		border: var(--primitives-border-width-regular) solid var(--_day-is-today-border-color);
+		border: var(--primitives-border-width-regular) solid var(--_date-picker-day-is-today-border-color);
 	}
 
 	/* Touch reports a hover after a tap and keeps it until you touch something
@@ -262,7 +262,7 @@ export const datePickerStyles = css `
 	   really hover. */
 	@media (hover: hover) {
 		.date-picker__day:hover .date-picker__day-indicator {
-			background-color: var(--_day-is-hovered-background-color);
+			background-color: var(--_date-picker-day-is-hovered-background-color);
 		}
 	}
 
@@ -287,26 +287,26 @@ export const datePickerStyles = css `
 	/* These four all set the color at equal specificity, so the order is what
 	   decides: outside the month is the weakest, chosen the strongest. */
 	.date-picker__day.is-outside-month {
-		color: var(--_day-is-outside-month-content-color);
+		color: var(--_date-picker-day-is-outside-month-content-color);
 	}
 
 	.date-picker__day.is-in-range {
-		color: var(--_day-is-in-range-content-color);
+		color: var(--_date-picker-day-is-in-range-content-color);
 	}
 
 	.date-picker__day.is-selected {
-		color: var(--_day-is-selected-content-color);
+		color: var(--_date-picker-day-is-selected-content-color);
 	}
 
 	/* Repeated for :hover, which carries a pseudo-class and would otherwise
 	   outweigh the plain selected rule. */
 	.date-picker__day.is-selected .date-picker__day-indicator,
 	.date-picker__day.is-selected:hover .date-picker__day-indicator {
-		background-color: var(--_day-is-selected-background-color);
+		background-color: var(--_date-picker-day-is-selected-background-color);
 	}
 
 	.date-picker__day.is-unavailable {
-		color: var(--_day-is-unavailable-content-color);
+		color: var(--_date-picker-day-is-unavailable-content-color);
 		text-decoration: line-through;
 	}
 
@@ -319,7 +319,7 @@ export const datePickerStyles = css `
 
 	.date-picker__footer {
 		display: flex;
-		margin-top: var(--_footer-margin-top);
+		margin-top: var(--_date-picker-footer-margin-top);
 		align-items: center;
 		justify-content: space-between;
 		gap: var(--primitives-space-8);

package/dist/components/inputs/dropdown/dropdown.js

@@ -122,10 +122,10 @@ let NLDDDropdown = class NLDDDropdown extends DescribedBy(LitElement) {
         if (changedProperties.has('width')) {
             const w = this.width;
             if (w && w !== 'full' && CSS.supports('width', w)) {
-                this.style.setProperty('--_width', w);
+                this.style.setProperty('--_dropdown-width', w);
             }
             else {
-                this.style.removeProperty('--_width');
+                this.style.removeProperty('--_dropdown-width');
             }
         }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../src/components/inputs/dropdown/dropdown.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../src/components/inputs/dropdown/dropdown.ts"],"names":[],"mappings":"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"}

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

@@ -9,31 +9,31 @@ export const dropdownStyles = css `
 	/* # Host */
 
 	:host {
-		--_width: 100%;
-		--_corner-radius: var(--semantics-controls-md-corner-radius);
-		--_min-size: var(--semantics-controls-md-min-size);
-		--_inline-padding: var(--semantics-controls-md-inline-padding);
-		--_text-font: var(--semantics-input-fields-md-text-font);
-		--_validation-icon-area-padding-right: var(--primitives-space-4);
-		--_validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
-		--_picker-icon-size: var(--primitives-space-24);
-		--_picker-area: calc((var(--_min-size) + var(--_picker-icon-size)) / 2);
-		--_end-inset: var(--_picker-area);
-		--_fade-size: var(--primitives-space-24);
-		--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
-		--_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);
-		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
-		--_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
-		--_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
-		--_is-expanded-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
+		--_dropdown-width: 100%;
+		--_dropdown-corner-radius: var(--semantics-controls-md-corner-radius);
+		--_dropdown-min-size: var(--semantics-controls-md-min-size);
+		--_dropdown-inline-padding: var(--semantics-controls-md-inline-padding);
+		--_dropdown-text-font: var(--semantics-input-fields-md-text-font);
+		--_dropdown-validation-icon-area-padding-right: var(--primitives-space-4);
+		--_dropdown-validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
+		--_dropdown-picker-icon-size: var(--primitives-space-24);
+		--_dropdown-picker-area: calc((var(--_dropdown-min-size) + var(--_dropdown-picker-icon-size)) / 2);
+		--_dropdown-end-inset: var(--_dropdown-picker-area);
+		--_dropdown-fade-size: var(--primitives-space-24);
+		--_dropdown-background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		--_dropdown-content-color: var(--semantics-buttons-neutral-tinted-content-color);
+		--_dropdown-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
+		--_dropdown-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
+		--_dropdown-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
+		--_dropdown-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+		--_dropdown-highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		--_dropdown-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
+		--_dropdown-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
+		--_dropdown-is-expanded-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
 
 		${inheritedTextReset}
 		display: block;
-		width: var(--_width);
+		width: var(--_dropdown-width);
 		max-width: 100%;
 		-webkit-user-select: none;
 		user-select: none;
@@ -46,37 +46,37 @@ export const dropdownStyles = css `
 
 	:host([valid]),
 	:host([invalid]) {
-		--_end-inset: calc(var(--_picker-area) + var(--_validation-icon-size) + var(--_validation-icon-area-padding-right));
+		--_dropdown-end-inset: calc(var(--_dropdown-picker-area) + var(--_dropdown-validation-icon-size) + var(--_dropdown-validation-icon-area-padding-right));
 	}
 
 	:host([size="xs"]) {
-		--_corner-radius: var(--semantics-controls-xs-corner-radius);
-		--_min-size: var(--semantics-controls-xs-min-size);
-		--_inline-padding: var(--semantics-controls-xs-inline-padding);
-		--_text-font: var(--semantics-input-fields-xs-text-font);
-		--_validation-icon-area-padding-right: var(--primitives-space-0);
-		--_validation-icon-size: var(--semantics-input-fields-xs-validation-icon-size);
-		--_picker-icon-size: var(--primitives-space-16);
+		--_dropdown-corner-radius: var(--semantics-controls-xs-corner-radius);
+		--_dropdown-min-size: var(--semantics-controls-xs-min-size);
+		--_dropdown-inline-padding: var(--semantics-controls-xs-inline-padding);
+		--_dropdown-text-font: var(--semantics-input-fields-xs-text-font);
+		--_dropdown-validation-icon-area-padding-right: var(--primitives-space-0);
+		--_dropdown-validation-icon-size: var(--semantics-input-fields-xs-validation-icon-size);
+		--_dropdown-picker-icon-size: var(--primitives-space-16);
 	}
 
 	:host([size="sm"]) {
-		--_corner-radius: var(--semantics-controls-sm-corner-radius);
-		--_min-size: var(--semantics-controls-sm-min-size);
-		--_inline-padding: var(--semantics-controls-sm-inline-padding);
-		--_text-font: var(--semantics-input-fields-sm-text-font);
-		--_validation-icon-area-padding-right: var(--primitives-space-2);
-		--_validation-icon-size: var(--semantics-input-fields-sm-validation-icon-size);
-		--_picker-icon-size: var(--primitives-space-20);
+		--_dropdown-corner-radius: var(--semantics-controls-sm-corner-radius);
+		--_dropdown-min-size: var(--semantics-controls-sm-min-size);
+		--_dropdown-inline-padding: var(--semantics-controls-sm-inline-padding);
+		--_dropdown-text-font: var(--semantics-input-fields-sm-text-font);
+		--_dropdown-validation-icon-area-padding-right: var(--primitives-space-2);
+		--_dropdown-validation-icon-size: var(--semantics-input-fields-sm-validation-icon-size);
+		--_dropdown-picker-icon-size: var(--primitives-space-20);
 	}
 
 	:host([expanded]) {
-		--_background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
-		--_content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
-		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
-		--_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
-		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
-		--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
-		--_highlight-border-color: var(--_is-expanded-highlight-border-color);
+		--_dropdown-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
+		--_dropdown-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
+		--_dropdown-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
+		--_dropdown-is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
+		--_dropdown-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
+		--_dropdown-is-active-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
+		--_dropdown-highlight-border-color: var(--_dropdown-is-expanded-highlight-border-color);
 	}
 
 	:host([disabled]) {
@@ -91,15 +91,15 @@ export const dropdownStyles = css `
 		box-sizing: border-box;
 		display: flex;
 		position: relative;
-		border-radius: var(--_corner-radius);
-		background-color: var(--_background-color);
-		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
+		border-radius: var(--_dropdown-corner-radius);
+		background-color: var(--_dropdown-background-color);
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_dropdown-highlight-border-color);
 		width: 100%;
-		min-height: var(--_min-size);
+		min-height: var(--_dropdown-min-size);
 		flex-direction: row;
 		align-items: center;
 		justify-content: flex-end;
-		color: var(--_content-color);
+		color: var(--_dropdown-content-color);
 		transition:
 			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
 			color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default)
@@ -108,32 +108,32 @@ export const dropdownStyles = css `
 
 	.dropdown:hover {
 		@media (hover: hover) {
-			background-color: var(--_is-hovered-background-color);
-			color: var(--_is-hovered-content-color);
+			background-color: var(--_dropdown-is-hovered-background-color);
+			color: var(--_dropdown-is-hovered-content-color);
 		}
 	}
 
 	@media (hover: hover) {
 		.dropdown:hover {
-			--_highlight-border-color: var(--_is-hovered-highlight-border-color);
+			--_dropdown-highlight-border-color: var(--_dropdown-is-hovered-highlight-border-color);
 		}
 	}
 
 	.dropdown:active {
-		background-color: var(--_is-active-background-color);
-		color: var(--_is-active-content-color);
-		--_highlight-border-color: var(--_is-active-highlight-border-color);
+		background-color: var(--_dropdown-is-active-background-color);
+		color: var(--_dropdown-is-active-content-color);
+		--_dropdown-highlight-border-color: var(--_dropdown-is-active-highlight-border-color);
 	}
 
 	.dropdown:focus-within {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
-		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(--_dropdown-highlight-border-color);
 	}
 
 	:host([is-pointer-focus]) .dropdown:focus-within {
 		outline: none;
-		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(--_dropdown-highlight-border-color);
 	}
 
 	@media (prefers-reduced-motion: reduce) {
@@ -159,14 +159,14 @@ export const dropdownStyles = css `
 		width: 100% !important;
 		height: 100% !important;
 		padding-block: 0 !important;
-		padding-inline: var(--_inline-padding) var(--_end-inset) !important;
+		padding-inline: var(--_dropdown-inline-padding) var(--_dropdown-end-inset) !important;
 		color: inherit !important;
-		font: var(--_text-font) !important;
+		font: var(--_dropdown-text-font) !important;
 		white-space: nowrap !important;
 		appearance: none !important;
 		/* WebKit lets select text run through its end padding and has no ellipsis
 		   there, so every browser fades the text out before the icons instead. */
-		mask-image: linear-gradient(to left, transparent var(--_end-inset), black calc(var(--_end-inset) + var(--_fade-size))) !important;
+		mask-image: linear-gradient(to left, transparent var(--_dropdown-end-inset), black calc(var(--_dropdown-end-inset) + var(--_dropdown-fade-size))) !important;
 	}
 
 	:host([size="xs"]) ::slotted(select) {
@@ -179,7 +179,7 @@ export const dropdownStyles = css `
 	.dropdown__validation-icon-area {
 		display: flex;
 		height: 100%;
-		padding-right: var(--_validation-icon-area-padding-right);
+		padding-right: var(--_dropdown-validation-icon-area-padding-right);
 		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
@@ -194,15 +194,15 @@ export const dropdownStyles = css `
 	}
 
 	.dropdown__validation-icon {
-		width: var(--_validation-icon-size);
-		height: var(--_validation-icon-size);
+		width: var(--_dropdown-validation-icon-size);
+		height: var(--_dropdown-validation-icon-size);
 	}
 
 	.dropdown__picker-icon {
 		display: flex;
-		width: var(--_picker-icon-size);
-		height: var(--_picker-icon-size);
-		padding-right: calc((var(--_min-size) - var(--_picker-icon-size)) / 2);
+		width: var(--_dropdown-picker-icon-size);
+		height: var(--_dropdown-picker-icon-size);
+		padding-right: calc((var(--_dropdown-min-size) - var(--_dropdown-picker-icon-size)) / 2);
 		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;

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

@@ -1 +1 @@
-{"version":3,"file":"file-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/file-field/file-field.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,yBAkI3B,CAAC"}
+{"version":3,"file":"file-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/file-field/file-field.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,yBAqI3B,CAAC"}