@nldd/design-system 0.8.43 → 0.8.44

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

@@ -6,14 +6,15 @@ export const segmentedControlStyles = css `
 
 	:host {
 		--_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;
+		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;
 	}
@@ -23,8 +24,9 @@ export const segmentedControlStyles = css `
 	}
 
 	:host([width="full"]) {
-		display: grid;
 		--_width: 100%;
+
+		display: grid;
 	}
 
 	:host([width="fit-content"]) {
@@ -39,12 +41,10 @@ export const segmentedControlStyles = css `
 	: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);
 	}
 
 
@@ -62,8 +62,8 @@ export const segmentedControlItemStyles = css `
 
 	:host {
 		display: flex;
-		min-width: 0;
 		position: relative;
+		min-width: 0;
 		-webkit-tap-highlight-color: transparent;
 	}
 
@@ -75,70 +75,84 @@ export const segmentedControlItemStyles = css `
 	/* # Item */
 
 	.segmented-control__item {
-		position: relative;
+		box-sizing: border-box;
 		display: flex;
+		position: relative;
+		cursor: default;
+		width: 100%;
 		align-items: center;
 		justify-content: center;
-		width: 100%;
-		box-sizing: border-box;
 		color: var(--semantics-buttons-neutral-tinted-content-color);
-		cursor: default;
 	}
 
 	: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: calc(var(--_segmented-control-md-item-indicator-inset) / 2 + var(--primitives-space-12));
+		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: calc(var(--_segmented-control-sm-item-indicator-inset) / 2 + var(--primitives-space-8));
+		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 {
-		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));
 		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 */
 
 	.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;
 	}
 
 	:host([variant='icon']) .segmented-control__item-text {
@@ -146,15 +160,14 @@ export const segmentedControlItemStyles = css `
 	}
 
 
-	/* # Icon slot */
+	/* # Icon */
 
 	.segmented-control__item-icon {
 		display: flex;
+		pointer-events: none;
 		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
-		z-index: 2;
-		pointer-events: none;
 	}
 
 	:host([size='md']) .segmented-control__item-icon,
@@ -177,48 +190,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuI5C,CAAC"}

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

@@ -28,9 +28,9 @@ export const stepperStyles = css `
 
 	.stepper {
 		display: inline-flex;
+		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 {
@@ -56,9 +56,9 @@ export const stepperStyles = css `
 	/* # Divider */
 
 	.stepper__divider {
+		background-color: var(--semantics-buttons-neutral-tinted-divider-color);
 		width: var(--semantics-dividers-thickness);
 		flex-shrink: 0;
-		background-color: var(--semantics-buttons-neutral-tinted-divider-color);
 	}
 
 	:host([size='xs']) .stepper__divider {

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.js

@@ -46,10 +46,10 @@ export const switchStyles = css `
 		position: absolute;
 		inset: 0;
 		z-index: 1;
+		opacity: 0;
+		margin: 0;
 		width: 100%;
 		height: 100%;
-		margin: 0;
-		opacity: 0;
 	}
 
 
@@ -58,13 +58,13 @@ export const switchStyles = css `
 	.switch__track {
 		position: relative;
 		display: flex;
-		align-items: center;
 		box-sizing: border-box;
+		border: var(--components-switch-border-thickness) solid var(--components-switch-border-color);
+		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);
+		align-items: center;
 		transition: background-color var(--_transition-duration) ease, border-color var(--_transition-duration) ease;
 	}
 
@@ -78,8 +78,8 @@ export const switchStyles = css `
 	}
 
 	.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 {
@@ -96,8 +96,8 @@ export const switchStyles = css `
 		left: var(--_switch-padding);
 		box-sizing: border-box;
 		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);
+		background-color: var(--components-switch-thumb-background-color);
 		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;
 	}
@@ -114,8 +114,8 @@ export const switchStyles = css `
 	}
 
 	.switch__input:checked ~ .switch__track .switch__thumb {
-		background-color: var(--components-switch-is-selected-thumb-background-color);
 		border-color: var(--components-switch-is-selected-thumb-background-color);
+		background-color: var(--components-switch-is-selected-thumb-background-color);
 	}
 
 	:host([size='xs']) .switch__input:checked ~ .switch__track .switch__thumb {
@@ -138,15 +138,15 @@ export const switchStyles = css `
 		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-field/switch-field.styles.js

@@ -17,10 +17,10 @@ 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);
 	}
 
 
@@ -28,8 +28,8 @@ export const switchFieldStyles = css `
 
 	.switch-field__control {
 		display: flex;
-		flex-shrink: 0;
 		min-height: var(--semantics-controls-md-min-size);
+		flex-shrink: 0;
 		align-items: center;
 	}
 
@@ -37,12 +37,12 @@ export const switchFieldStyles = css `
 	/* # 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;
 	}
 
 	:host([disabled]) .switch-field__label {

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

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

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

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

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

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

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

@@ -23,12 +23,12 @@ export const toggleButtonStyles = css `
 
 	.toggle-button {
 		/* Reset */
-		appearance: none;
-		border: none;
 		margin: 0;
-		padding: 0;
+		border: none;
 		background: none;
+		padding: 0;
 		font: inherit;
+		appearance: none;
 
 		/* Layout */
 		position: relative;
@@ -47,28 +47,28 @@ export const toggleButtonStyles = css `
 	/* ## Sizes */
 
 	:host([size="xs"]) .toggle-button {
+		border-radius: var(--semantics-controls-xs-corner-radius);
 		min-height: var(--semantics-controls-xs-min-size);
 		padding: var(--semantics-controls-xs-block-padding) var(--semantics-controls-xs-inline-padding);
-		font: var(--semantics-buttons-xs-font);
-		border-radius: var(--semantics-controls-xs-corner-radius);
 		gap: var(--semantics-buttons-xs-gap);
+		font: var(--semantics-buttons-xs-font);
 	}
 
 	:host([size="sm"]) .toggle-button {
+		border-radius: var(--semantics-controls-sm-corner-radius);
 		min-height: var(--semantics-controls-sm-min-size);
 		padding: var(--semantics-controls-sm-block-padding) var(--semantics-controls-sm-inline-padding);
-		font: var(--semantics-buttons-sm-font);
-		border-radius: var(--semantics-controls-sm-corner-radius);
 		gap: var(--semantics-buttons-sm-gap);
+		font: var(--semantics-buttons-sm-font);
 	}
 
 	:host([size="md"]) .toggle-button,
 	:host(:not([size])) .toggle-button {
+		border-radius: var(--semantics-controls-md-corner-radius);
 		min-height: var(--semantics-controls-md-min-size);
 		padding: var(--semantics-controls-md-block-padding) var(--semantics-controls-md-inline-padding);
-		font: var(--semantics-buttons-md-font);
-		border-radius: var(--semantics-controls-md-corner-radius);
 		gap: var(--semantics-buttons-md-gap);
+		font: var(--semantics-buttons-md-font);
 	}
 
 	/* ## Icon-only sizes */
@@ -182,11 +182,11 @@ export const toggleButtonStyles = css `
 	.toggle-button__input {
 		position: absolute;
 		inset: 0;
-		width: 100%;
-		height: 100%;
-		margin: 0;
 		opacity: 0;
 		z-index: 1;
+		margin: 0;
+		width: 100%;
+		height: 100%;
 	}
 `;
 //# sourceMappingURL=toggle-button.styles.js.map

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

@@ -23,18 +23,18 @@ export const tokenStyles = css `
 
 	.token {
 		/* Reset (for menu button) */
-		appearance: none;
-		border: none;
 		margin: 0;
+		border: none;
 		background: none;
 		font: inherit;
+		appearance: none;
 
 		/* Layout */
 		display: inline-flex;
-		align-items: center;
 		box-sizing: border-box;
 		height: var(--semantics-controls-sm-min-size);
 		padding: 0 var(--primitives-space-6);
+		align-items: center;
 
 		/* Appearance */
 		border-radius: var(--semantics-controls-sm-corner-radius);
@@ -57,8 +57,8 @@ export const tokenStyles = css `
 
 	.token__text {
 		display: flex;
-		align-items: center;
 		padding: 0 var(--primitives-space-2);
+		align-items: center;
 	}
 
 
@@ -66,9 +66,9 @@ export const tokenStyles = css `
 
 	.token__icon {
 		display: block;
-		flex-shrink: 0;
 		width: var(--primitives-space-16);
 		height: var(--primitives-space-16);
+		flex-shrink: 0;
 	}
 
 

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

@@ -26,7 +26,7 @@ export function tokenTemplate(component) {
 						icon="dismiss-small"
 						text=${component.dismissText}
 						accessible-label=${component.dismissText}
-						hide-tooltip
+						tooltip-timing="never"
 						?disabled=${component.disabled}
 						@click=${component._handleDismiss}
 					></nldd-icon-button>

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

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

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

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

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

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