@melodicdev/components 1.3.0 → 1.5.0

package/lib/components/forms/select/select.styles.js

@@ -5,6 +5,85 @@ export const selectStyles = () => css `
 		width: 100%;
 		min-width: 0;
 		box-sizing: border-box;
+
+		/* --- Label --- */
+		--ml-select-label-font-size: var(--ml-text-sm);
+		--ml-select-label-font-weight: var(--ml-font-medium);
+		--ml-select-label-color: var(--ml-color-text-secondary);
+		--ml-select-label-line-height: var(--ml-leading-tight);
+
+		/* --- Required indicator --- */
+		--ml-select-required-color: var(--ml-color-danger);
+
+		/* --- Trigger --- */
+		--ml-select-bg: var(--ml-color-surface);
+		--ml-select-border-width: var(--ml-border);
+		--ml-select-border-color: var(--ml-color-border);
+		--ml-select-border-radius: var(--ml-radius);
+		--ml-select-color: var(--ml-color-text);
+		--ml-select-font-family: var(--ml-font-sans);
+		--ml-select-font-size: var(--ml-text-sm);
+		--ml-select-padding: var(--ml-space-2-5) var(--ml-space-3-5);
+		--ml-select-gap: var(--ml-space-2);
+		--ml-select-hover-border-color: var(--ml-color-border-strong);
+
+		/* --- Focus --- */
+		--ml-select-focus-border-color: var(--ml-color-primary);
+		--ml-select-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Error --- */
+		--ml-select-error-border-color: var(--ml-color-danger);
+		--ml-select-error-focus-shadow: var(--ml-shadow-ring-error);
+		--ml-select-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-select-disabled-bg: var(--ml-color-input-disabled-bg);
+		--ml-select-disabled-color: var(--ml-color-text-muted);
+
+		/* --- Placeholder --- */
+		--ml-select-placeholder-color: var(--ml-color-text-muted);
+
+		/* --- Chevron / Icons --- */
+		--ml-select-icon-color: var(--ml-color-text-muted);
+
+		/* --- Dropdown --- */
+		--ml-select-dropdown-bg: var(--ml-color-surface);
+		--ml-select-dropdown-border-color: var(--ml-color-border);
+		--ml-select-dropdown-border-radius: var(--ml-radius);
+		--ml-select-dropdown-shadow: var(--ml-shadow-lg);
+		--ml-select-dropdown-max-height: 280px;
+		--ml-select-dropdown-padding: var(--ml-space-1-5);
+
+		/* --- Option --- */
+		--ml-select-option-padding: var(--ml-space-2) var(--ml-space-3);
+		--ml-select-option-border-radius: var(--ml-radius-sm);
+		--ml-select-option-font-size: var(--ml-text-sm);
+		--ml-select-option-font-weight: var(--ml-font-medium);
+		--ml-select-option-color: var(--ml-color-text);
+		--ml-select-option-hover-bg: var(--ml-color-surface-raised);
+		--ml-select-option-selected-bg: var(--ml-color-primary-subtle);
+		--ml-select-option-disabled-color: var(--ml-color-text-muted);
+		--ml-select-option-check-color: var(--ml-color-primary);
+
+		/* --- Tag (multi-select) --- */
+		--ml-select-tag-height: 20px;
+		--ml-select-tag-border-radius: var(--ml-radius-full);
+		--ml-select-tag-border-color: var(--ml-color-border);
+		--ml-select-tag-bg: var(--ml-color-surface);
+		--ml-select-tag-font-size: var(--ml-text-xs);
+		--ml-select-tag-font-weight: var(--ml-font-medium);
+		--ml-select-tag-color: var(--ml-color-text);
+		--ml-select-tag-remove-color: var(--ml-color-text-secondary);
+		--ml-select-tag-remove-hover-color: var(--ml-color-text);
+		--ml-select-tag-remove-hover-bg: var(--ml-color-surface-raised);
+
+		/* --- Hint --- */
+		--ml-select-hint-color: var(--ml-color-text-muted);
+		--ml-select-hint-font-size: var(--ml-text-sm);
+
+		/* --- Transition --- */
+		--ml-select-transition-duration: var(--ml-duration-150);
+		--ml-select-transition-easing: var(--ml-ease-in-out);
 	}
 
 	*,
@@ -26,14 +105,14 @@ export const selectStyles = () => css `
 	}
 
 	.ml-select__label {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-select-label-font-size);
+		font-weight: var(--ml-select-label-font-weight);
+		color: var(--ml-select-label-color);
+		line-height: var(--ml-select-label-line-height);
 	}
 
 	.ml-select__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-select-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
@@ -41,42 +120,44 @@ export const selectStyles = () => css `
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: var(--ml-space-2);
+		gap: var(--ml-select-gap);
 		width: 100%;
 		max-width: 100%;
 		overflow: hidden;
-		background-color: var(--ml-color-surface);
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius);
+		padding: var(--ml-select-padding);
+		background-color: var(--ml-select-bg);
+		border: var(--ml-select-border-width) solid var(--ml-select-border-color);
+		border-radius: var(--ml-select-border-radius);
 		box-shadow: none;
-		color: var(--ml-color-text);
-		font-family: var(--ml-font-sans);
+		color: var(--ml-select-color);
+		font-family: var(--ml-select-font-family);
+		font-size: var(--ml-select-font-size);
 		cursor: pointer;
 		text-align: left;
 		transition:
-			border-color var(--ml-duration-150) var(--ml-ease-in-out),
-			box-shadow var(--ml-duration-150) var(--ml-ease-in-out);
+			border-color var(--ml-select-transition-duration) var(--ml-select-transition-easing),
+			box-shadow var(--ml-select-transition-duration) var(--ml-select-transition-easing);
 	}
 
 	.ml-select:not(.ml-select--disabled) .ml-select__trigger:hover {
-		border-color: var(--ml-color-border-strong);
+		border-color: var(--ml-select-hover-border-color);
 	}
 
 	.ml-select__trigger:focus,
 	.ml-select__trigger:focus-within {
 		outline: none;
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-select-focus-border-color);
+		box-shadow: var(--ml-select-focus-shadow);
 	}
 
 	.ml-select--disabled .ml-select__trigger {
-		background-color: var(--ml-color-input-disabled-bg);
+		background-color: var(--ml-select-disabled-bg);
 		cursor: not-allowed;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-select-disabled-color);
 	}
 
 	.ml-select--disabled .ml-select__search {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-select-disabled-color);
 	}
 
 	.ml-select__value {
@@ -84,7 +165,7 @@ export const selectStyles = () => css `
 		min-width: 0;
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-select-gap);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -103,7 +184,7 @@ export const selectStyles = () => css `
 	}
 
 	.ml-select__search-icon {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-select-icon-color);
 		flex-shrink: 0;
 		height: 20px;
 		display: flex;
@@ -118,21 +199,21 @@ export const selectStyles = () => css `
 		outline: none;
 		background: transparent;
 		font: inherit;
-		color: var(--ml-color-text);
+		color: var(--ml-select-color);
 		padding: 0;
 		line-height: 20px;
 	}
 
 	.ml-select__search::placeholder {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-select-placeholder-color);
 	}
 
 	.ml-select__placeholder {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-select-placeholder-color);
 	}
 
 	.ml-select__value-icon {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-select-icon-color);
 		flex-shrink: 0;
 	}
 
@@ -145,13 +226,13 @@ export const selectStyles = () => css `
 		align-items: center;
 		gap: var(--ml-space-1);
 		padding: 0 var(--ml-space-1-5);
-		height: 20px;
-		border-radius: var(--ml-radius-full);
-		border: var(--ml-border) solid var(--ml-color-border);
-		background-color: var(--ml-color-surface);
-		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
+		height: var(--ml-select-tag-height);
+		border-radius: var(--ml-select-tag-border-radius);
+		border: var(--ml-select-border-width) solid var(--ml-select-tag-border-color);
+		background-color: var(--ml-select-tag-bg);
+		font-size: var(--ml-select-tag-font-size);
+		font-weight: var(--ml-select-tag-font-weight);
+		color: var(--ml-select-tag-color);
 		line-height: 1;
 		white-space: nowrap;
 		max-width: 100%;
@@ -168,7 +249,7 @@ export const selectStyles = () => css `
 	.ml-select__tag-avatar {
 		width: 14px;
 		height: 14px;
-		border-radius: var(--ml-radius-full);
+		border-radius: var(--ml-select-tag-border-radius);
 		object-fit: cover;
 		margin-left: -2px;
 	}
@@ -179,26 +260,26 @@ export const selectStyles = () => css `
 		padding: 2px;
 		margin-left: var(--ml-space-0-5);
 		margin-right: -4px;
-		color: var(--ml-color-text-secondary);
+		color: var(--ml-select-tag-remove-color);
 		cursor: pointer;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		border-radius: var(--ml-radius-full);
-		transition: color var(--ml-duration-100) var(--ml-ease-in-out),
-			background-color var(--ml-duration-100) var(--ml-ease-in-out);
+		border-radius: var(--ml-select-tag-border-radius);
+		transition: color var(--ml-duration-100) var(--ml-select-transition-easing),
+			background-color var(--ml-duration-100) var(--ml-select-transition-easing);
 	}
 
 	.ml-select__tag-remove:hover {
-		color: var(--ml-color-text);
-		background-color: var(--ml-color-surface-raised);
+		color: var(--ml-select-tag-remove-hover-color);
+		background-color: var(--ml-select-tag-remove-hover-bg);
 	}
 
 	.ml-select__chevron {
 		flex-shrink: 0;
-		color: var(--ml-color-text-muted);
-		transition: transform var(--ml-duration-200) var(--ml-ease-in-out);
+		color: var(--ml-select-icon-color);
+		transition: transform var(--ml-duration-200) var(--ml-select-transition-easing);
 	}
 
 	.ml-select--open .ml-select__chevron {
@@ -216,13 +297,13 @@ export const selectStyles = () => css `
 		inset: unset;
 		margin: 0;
 		z-index: 50;
-		background-color: var(--ml-color-surface);
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius);
-		box-shadow: var(--ml-shadow-lg);
-		max-height: 280px;
+		background-color: var(--ml-select-dropdown-bg);
+		border: var(--ml-select-border-width) solid var(--ml-select-dropdown-border-color);
+		border-radius: var(--ml-select-dropdown-border-radius);
+		box-shadow: var(--ml-select-dropdown-shadow);
+		max-height: var(--ml-select-dropdown-max-height);
 		overflow-y: auto;
-		padding: var(--ml-space-1-5);
+		padding: var(--ml-select-dropdown-padding);
 		display: flex;
 		flex-direction: column;
 		gap: var(--ml-space-1);
@@ -233,48 +314,48 @@ export const selectStyles = () => css `
 	}
 
 	.ml-select__empty {
-		padding: var(--ml-space-2) var(--ml-space-3);
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		padding: var(--ml-select-option-padding);
+		font-size: var(--ml-select-option-font-size);
+		color: var(--ml-select-placeholder-color);
 	}
 
 	.ml-select__option {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
-		padding: var(--ml-space-2) var(--ml-space-3);
-		border-radius: var(--ml-radius-sm);
+		gap: var(--ml-select-gap);
+		padding: var(--ml-select-option-padding);
+		border-radius: var(--ml-select-option-border-radius);
 		cursor: pointer;
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
-		transition: background-color var(--ml-duration-100) var(--ml-ease-in-out);
+		font-size: var(--ml-select-option-font-size);
+		font-weight: var(--ml-select-option-font-weight);
+		color: var(--ml-select-option-color);
+		transition: background-color var(--ml-duration-100) var(--ml-select-transition-easing);
 	}
 
 	.ml-select__option:hover:not(.ml-select__option--disabled) {
-		background-color: var(--ml-color-surface-raised);
+		background-color: var(--ml-select-option-hover-bg);
 	}
 
 	.ml-select__option--focused {
-		background-color: var(--ml-color-surface-raised);
+		background-color: var(--ml-select-option-hover-bg);
 	}
 
 	.ml-select__option--selected {
-		background-color: var(--ml-color-primary-subtle);
+		background-color: var(--ml-select-option-selected-bg);
 	}
 
 	.ml-select__option--selected:hover:not(.ml-select__option--disabled) {
-		background-color: var(--ml-color-primary-subtle);
+		background-color: var(--ml-select-option-selected-bg);
 	}
 
 	.ml-select__option--disabled {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-select-option-disabled-color);
 		cursor: not-allowed;
 	}
 
 	.ml-select__option-icon {
 		flex-shrink: 0;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-select-icon-color);
 	}
 
 	.ml-select__option-avatar {
@@ -286,7 +367,7 @@ export const selectStyles = () => css `
 	}
 
 	.ml-select__option--selected .ml-select__option-icon {
-		color: var(--ml-color-primary);
+		color: var(--ml-select-option-check-color);
 	}
 
 	.ml-select__option-label {
@@ -299,30 +380,30 @@ export const selectStyles = () => css `
 
 	.ml-select__option-check {
 		flex-shrink: 0;
-		color: var(--ml-color-primary);
+		color: var(--ml-select-option-check-color);
 		margin-left: auto;
 	}
 
 	.ml-select__hint,
 	.ml-select__error {
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-select-hint-font-size);
+		line-height: var(--ml-select-label-line-height);
 	}
 
 	.ml-select__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-select-hint-color);
 	}
 
 	.ml-select__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-select-error-color);
 	}
 
 	.ml-select--error .ml-select__trigger {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-select-error-border-color);
 	}
 
 	.ml-select--error .ml-select__trigger:focus {
-		box-shadow: var(--ml-shadow-ring-error);
+		box-shadow: var(--ml-select-error-focus-shadow);
 	}
 
 	/* Size variants */

package/lib/components/forms/slider/slider.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/slider/slider.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;GAWG;AACH,qBAMa,eAAgB,YAAW,WAAW;IAClD,UAAU,EAAG,WAAW,CAAC;IAEzB,iBAAiB;IACjB,KAAK,SAAM;IAEX,oBAAoB;IACpB,KAAK,SAAM;IAEX,oBAAoB;IACpB,GAAG,SAAK;IAER,oBAAoB;IACpB,GAAG,SAAO;IAEV,qBAAqB;IACrB,IAAI,SAAK;IAET,kBAAkB;IAClB,IAAI,EAAE,IAAI,CAAQ;IAElB,yBAAyB;IACzB,QAAQ,UAAS;IAEjB,yBAAyB;IACzB,SAAS,UAAS;IAElB,gBAAgB;IAChB,IAAI,SAAM;IAEV,oBAAoB;IACpB,KAAK,SAAM;IAEX,+BAA+B;IAC/B,IAAI,KAAK,IAAI,MAAM,CAIlB;IAED,4DAA4D;IAC5D,IAAI,SAAS,IAAI,MAAM,CAGtB;IAED,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWhC;IAEF,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWjC;CACF"}
+{"version":3,"file":"slider.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/slider/slider.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;GAWG;AACH,qBAMa,eAAgB,YAAW,WAAW;IAC3C,UAAU,EAAG,WAAW,CAAC;IAEhC,iBAAiB;IACV,KAAK,SAAM;IAElB,oBAAoB;IACb,KAAK,SAAM;IAElB,oBAAoB;IACb,GAAG,SAAK;IAEf,oBAAoB;IACb,GAAG,SAAO;IAEjB,qBAAqB;IACd,IAAI,SAAK;IAEhB,kBAAkB;IACX,IAAI,EAAE,IAAI,CAAQ;IAEzB,yBAAyB;IAClB,QAAQ,UAAS;IAExB,yBAAyB;IAClB,SAAS,UAAS;IAEzB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,+BAA+B;IAC/B,IAAW,KAAK,IAAI,MAAM,CAIzB;IAED,4DAA4D;IAC5D,IAAW,SAAS,IAAI,MAAM,CAG7B;IAEM,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWvC;IAEK,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWxC;CACF"}

package/lib/components/forms/slider/slider.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/slider/slider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDAsKxB,CAAC"}
+{"version":3,"file":"slider.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/slider/slider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDA+MxB,CAAC"}

package/lib/components/forms/slider/slider.styles.js

@@ -2,6 +2,45 @@ import { css } from '@melodicdev/core';
 export const sliderStyles = () => css `
 	:host {
 		display: block;
+
+		/* --- Label / Value --- */
+		--ml-slider-label-font-size: var(--ml-text-sm);
+		--ml-slider-label-font-weight: var(--ml-font-medium);
+		--ml-slider-label-color: var(--ml-color-text);
+
+		/* --- Track --- */
+		--ml-slider-track-height: 6px;
+		--ml-slider-track-bg: var(--ml-color-surface-hover);
+		--ml-slider-track-border-radius: var(--ml-radius-full);
+
+		/* --- Fill --- */
+		--ml-slider-fill-color: var(--ml-color-primary);
+
+		/* --- Thumb --- */
+		--ml-slider-thumb-size: 20px;
+		--ml-slider-thumb-bg: var(--ml-color-surface);
+		--ml-slider-thumb-border-width: 2px;
+		--ml-slider-thumb-border-color: var(--ml-color-primary);
+		--ml-slider-thumb-border-radius: var(--ml-radius-full);
+		--ml-slider-thumb-shadow: var(--ml-shadow-sm);
+		--ml-slider-thumb-hover-shadow: var(--ml-shadow-md);
+		--ml-slider-thumb-focus-shadow: 0 0 0 3px var(--ml-color-primary-subtle);
+
+		/* --- Error --- */
+		--ml-slider-error-fill-color: var(--ml-color-danger);
+		--ml-slider-error-thumb-border-color: var(--ml-color-danger);
+		--ml-slider-error-color: var(--ml-color-danger);
+
+		/* --- Hint --- */
+		--ml-slider-hint-font-size: var(--ml-text-sm);
+		--ml-slider-hint-color: var(--ml-color-text-tertiary);
+
+		/* --- Disabled --- */
+		--ml-slider-disabled-opacity: 0.5;
+
+		/* --- Transition --- */
+		--ml-slider-transition-duration: var(--ml-duration-150);
+		--ml-slider-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-slider__header {
@@ -12,15 +51,15 @@ export const sliderStyles = () => css `
 	}
 
 	.ml-slider__label {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
+		font-size: var(--ml-slider-label-font-size);
+		font-weight: var(--ml-slider-label-font-weight);
+		color: var(--ml-slider-label-color);
 	}
 
 	.ml-slider__value {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
+		font-size: var(--ml-slider-label-font-size);
+		font-weight: var(--ml-slider-label-font-weight);
+		color: var(--ml-slider-label-color);
 	}
 
 	.ml-slider__track-wrapper {
@@ -41,8 +80,9 @@ export const sliderStyles = () => css `
 		content: '';
 		position: absolute;
 		width: 100%;
-		background-color: var(--ml-color-surface-hover);
-		border-radius: var(--ml-radius-full);
+		height: var(--ml-slider-track-height);
+		background-color: var(--ml-slider-track-bg);
+		border-radius: var(--ml-slider-track-border-radius);
 	}
 
 	.ml-slider--sm .ml-slider__track::before {
@@ -60,8 +100,9 @@ export const sliderStyles = () => css `
 	.ml-slider__fill {
 		position: absolute;
 		left: 0;
-		background-color: var(--ml-color-primary);
-		border-radius: var(--ml-radius-full);
+		height: var(--ml-slider-track-height);
+		background-color: var(--ml-slider-fill-color);
+		border-radius: var(--ml-slider-track-border-radius);
 		pointer-events: none;
 	}
 
@@ -78,7 +119,7 @@ export const sliderStyles = () => css `
 	}
 
 	.ml-slider--error .ml-slider__fill {
-		background-color: var(--ml-color-danger);
+		background-color: var(--ml-slider-error-fill-color);
 	}
 
 	/* Native range input - overlays the track */
@@ -95,59 +136,59 @@ export const sliderStyles = () => css `
 
 	.ml-slider__input:disabled {
 		cursor: not-allowed;
-		opacity: 0.5;
+		opacity: var(--ml-slider-disabled-opacity);
 	}
 
 	/* Webkit thumb */
 	.ml-slider__input::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;
-		width: 20px;
-		height: 20px;
-		border-radius: var(--ml-radius-full);
-		background-color: white;
-		border: 2px solid var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-sm);
+		width: var(--ml-slider-thumb-size);
+		height: var(--ml-slider-thumb-size);
+		border-radius: var(--ml-slider-thumb-border-radius);
+		background-color: var(--ml-slider-thumb-bg);
+		border: var(--ml-slider-thumb-border-width) solid var(--ml-slider-thumb-border-color);
+		box-shadow: var(--ml-slider-thumb-shadow);
 		transition:
-			box-shadow var(--ml-duration-150) var(--ml-ease-in-out),
-			transform var(--ml-duration-150) var(--ml-ease-in-out);
+			box-shadow var(--ml-slider-transition-duration) var(--ml-slider-transition-easing),
+			transform var(--ml-slider-transition-duration) var(--ml-slider-transition-easing);
 	}
 
 	.ml-slider__input:hover::-webkit-slider-thumb {
-		box-shadow: var(--ml-shadow-md);
+		box-shadow: var(--ml-slider-thumb-hover-shadow);
 		transform: scale(1.1);
 	}
 
 	.ml-slider__input:focus-visible::-webkit-slider-thumb {
-		box-shadow: 0 0 0 3px var(--ml-color-primary-subtle);
+		box-shadow: var(--ml-slider-thumb-focus-shadow);
 	}
 
 	.ml-slider--error .ml-slider__input::-webkit-slider-thumb {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-slider-error-thumb-border-color);
 	}
 
 	/* Firefox thumb */
 	.ml-slider__input::-moz-range-thumb {
-		width: 20px;
-		height: 20px;
-		border-radius: var(--ml-radius-full);
-		background-color: white;
-		border: 2px solid var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-sm);
+		width: var(--ml-slider-thumb-size);
+		height: var(--ml-slider-thumb-size);
+		border-radius: var(--ml-slider-thumb-border-radius);
+		background-color: var(--ml-slider-thumb-bg);
+		border: var(--ml-slider-thumb-border-width) solid var(--ml-slider-thumb-border-color);
+		box-shadow: var(--ml-slider-thumb-shadow);
 	}
 
 	.ml-slider--error .ml-slider__input::-moz-range-thumb {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-slider-error-thumb-border-color);
 	}
 
 	/* Hide browser track (we use custom track) */
 	.ml-slider__input::-webkit-slider-runnable-track {
-		height: 20px;
+		height: var(--ml-slider-thumb-size);
 		background: transparent;
 	}
 
 	.ml-slider__input::-moz-range-track {
-		height: 20px;
+		height: var(--ml-slider-thumb-size);
 		background: transparent;
 		border: none;
 	}
@@ -155,14 +196,14 @@ export const sliderStyles = () => css `
 	.ml-slider__hint {
 		display: block;
 		margin-top: var(--ml-space-2);
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-tertiary);
+		font-size: var(--ml-slider-hint-font-size);
+		color: var(--ml-slider-hint-color);
 	}
 
 	.ml-slider__error {
 		display: block;
 		margin-top: var(--ml-space-2);
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-danger);
+		font-size: var(--ml-slider-hint-font-size);
+		color: var(--ml-slider-error-color);
 	}
 `;

package/lib/components/forms/textarea/textarea.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/textarea/textarea.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;;;;GAcG;AACH,qBAMa,iBAAkB,YAAW,WAAW,EAAE,MAAM;IAC5D,UAAU,EAAG,WAAW,CAAC;IAEzB,oBAAoB;IACpB,KAAK,SAAM;IAEX,uBAAuB;IACvB,WAAW,SAAM;IAEjB,iBAAiB;IACjB,KAAK,SAAM;IAEX,qCAAqC;IACrC,IAAI,SAAM;IAEV,iDAAiD;IACjD,KAAK,SAAM;IAEX,iBAAiB;IACjB,IAAI,EAAE,IAAI,CAAQ;IAElB,mCAAmC;IACnC,IAAI,SAAK;IAET,+BAA+B;IAC/B,SAAS,SAAK;IAEd,2BAA2B;IAC3B,QAAQ,UAAS;IAEjB,6BAA6B;IAC7B,QAAQ,UAAS;IAEjB,uBAAuB;IACvB,QAAQ,UAAS;IAEjB,4BAA4B;IAC5B,MAAM,UAAS;IAEf,2BAA2B;IAC3B,OAAO,UAAS;IAEhB,MAAM,IAAI,IAAI;IAMd,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWhC;IAEF,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWjC;IAEF,WAAW,QAAO,IAAI,CAQpB;IAEF,UAAU,QAAO,IAAI,CAQnB;CACF"}
+{"version":3,"file":"textarea.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/textarea/textarea.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;;;;GAcG;AACH,qBAMa,iBAAkB,YAAW,WAAW,EAAE,MAAM;IACrD,UAAU,EAAG,WAAW,CAAC;IAEhC,oBAAoB;IACb,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAM;IAExB,iBAAiB;IACV,KAAK,SAAM;IAElB,qCAAqC;IAC9B,IAAI,SAAM;IAEjB,iDAAiD;IAC1C,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,CAAQ;IAEzB,mCAAmC;IAC5B,IAAI,SAAK;IAEhB,+BAA+B;IACxB,SAAS,SAAK;IAErB,2BAA2B;IACpB,QAAQ,UAAS;IAExB,6BAA6B;IACtB,QAAQ,UAAS;IAExB,uBAAuB;IAChB,QAAQ,UAAS;IAExB,4BAA4B;IACrB,MAAM,UAAS;IAEtB,2BAA2B;IACpB,OAAO,UAAS;IAEhB,MAAM,IAAI,IAAI;IAMd,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWvC;IAEK,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWxC;IAEK,WAAW,QAAO,IAAI,CAQ3B;IAEK,UAAU,QAAO,IAAI,CAQ1B;CACF"}

package/lib/components/forms/textarea/textarea.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/textarea/textarea.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAgH1B,CAAC"}
+{"version":3,"file":"textarea.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/textarea/textarea.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAgK1B,CAAC"}