noph-ui 0.26.8 → 0.26.9

package/dist/badge/Badge.svelte

@@ -23,8 +23,8 @@
 		border-radius: var(--np-shape-corner-full);
 		position: var(--np-badge-position, absolute);
 		top: var(--np-badge-top, 0);
-		left: var(--np-badge-left, auto);
-		right: var(--np-badge-right, auto);
+		inset-inline-start: var(--np-badge-start, auto);
+		inset-inline-end: var(--np-badge-end, auto);
 	}
 	.np-badge-container-label {
 		height: 1rem;

package/dist/button/Button.svelte

@@ -119,7 +119,7 @@
 		--np-circular-progress-color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
 		position: absolute;
 		top: 50%;
-		left: 50%;
+		inset-inline-start: 50%;
 		transform: translate(-50%, -50%);
 	}
 	.np-loading .button-icon,
@@ -137,7 +137,7 @@
 		display: inline-flex;
 		user-select: none;
 		align-items: center;
-		text-align: left;
+		text-align: start;
 		overflow: hidden;
 		font-weight: 500;
 		text-decoration: none;

package/dist/button/SegmentedButton.svelte

@@ -119,7 +119,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		border-right: 1px solid var(--np-color-outline);
+		border-inline-end: 1px solid var(--np-color-outline);
 		position: relative;
 		transition: all 0.15s linear;
 	}
@@ -140,7 +140,7 @@
 	}
 
 	.np-segmented-button:last-child {
-		border-right: none;
+		border-inline-end: none;
 	}
 
 	.np-segmented-button input {

package/dist/checkbox/Checkbox.svelte

@@ -86,7 +86,7 @@
 		opacity: 0;
 		inset: 0;
 		top: -4px;
-		left: -4px;
+		inset-inline-start: -4px;
 		position: absolute;
 		outline: none;
 		cursor: inherit;

package/dist/chip/FilterChip.svelte

@@ -131,8 +131,7 @@
 		fill: currentColor;
 		gap: 0.5rem;
 		z-index: 1;
-		padding-left: 1rem;
-		padding-right: 1rem;
+		padding-inline: 1rem;
 		overflow: hidden;
 	}
 	.np-chip-icon-checked {
@@ -154,13 +153,13 @@
 	}
 	.np-filter-chip:has(input:checked) .np-filter-chip-label,
 	.np-filter-chip-icon .np-filter-chip-label {
-		padding-left: 0.5rem;
+		padding-inline-start: 0.5rem;
 	}
 	.np-filter-chip-removable {
-		padding-right: 1px;
+		padding-inline-end: 1px;
 	}
 	.np-filter-chip-removable .np-filter-chip-label {
-		padding-right: 1px;
+		padding-inline-end: 1px;
 	}
 	.np-chip-label {
 		line-height: 1.25rem;

package/dist/chip/InputChip.svelte

@@ -104,8 +104,8 @@
 		opacity: 0;
 		display: flex;
 		align-items: center;
-		padding-left: 1rem;
-		padding-right: 2rem;
+		padding-inline-start: 1rem;
+		padding-inline-end: 2rem;
 	}
 	.np-input-chip {
 		position: relative;
@@ -115,7 +115,7 @@
 		border-radius: var(--np-input-chip-container-shape, var(--np-shape-corner-small));
 		--np-icon-button-icon-color: var(--np-color-on-surface-variant);
 		--np-icon-size: 1.125rem;
-		padding-right: 1px;
+		padding-inline-end: 1px;
 		min-width: 0;
 	}
 	.np-input-chip-label input {
@@ -133,7 +133,7 @@
 		fill: currentColor;
 		gap: 0.5rem;
 		z-index: 1;
-		padding-left: 1rem;
+		padding-inline-start: 1rem;
 		overflow: hidden;
 	}
 	.np-chip-icon {
@@ -141,13 +141,13 @@
 		display: flex;
 	}
 	.np-input-chip-icon .np-input-chip-label {
-		padding-left: 0.5rem;
+		padding-inline-start: 0.5rem;
 	}
 	.np-chip-label {
 		line-height: 1.25rem;
 		font-size: 0.875rem;
 		font-weight: 500;
-		padding-right: 1px;
+		padding-inline-end: 1px;
 		white-space: pre;
 		overflow: hidden;
 		text-overflow: ellipsis;

package/dist/divider/Divider.svelte

@@ -10,12 +10,11 @@
 <style>
 	.inset {
 		width: calc(100% - 1rem);
-		margin-left: 1rem;
+		margin-inline-start: 1rem;
 	}
 	.inset-middle {
 		width: calc(100% - 2rem);
-		margin-left: 1rem;
-		margin-right: 1rem;
+		margin-inline: 1rem;
 	}
 	.full {
 		width: 100%;

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -50,8 +50,8 @@
 	}
 	.np-navigation-wrapper {
 		background-color: var(--np-navigation-drawer-background, var(--np-color-surface-container-low));
-		border-top-right-radius: var(--np-shape-corner-large);
-		border-bottom-right-radius: var(--np-shape-corner-large);
+		border-start-end-radius: var(--np-shape-corner-large);
+		border-end-end-radius: var(--np-shape-corner-large);
 		width: var(--np-navigation-drawer-width, 22.5rem);
 		height: var(--np-navigation-drawer-height, 100dvh);
 		overflow-y: auto;

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -72,7 +72,7 @@
 	.np-navigation-drawer-item::before {
 		content: '';
 		position: absolute;
-		left: 0;
+		inset-inline-start: 0;
 		width: 100%;
 		height: 100%;
 		opacity: 0;
@@ -128,7 +128,7 @@
 		line-height: 1.25rem;
 		font-weight: var(--np-navigation-drawer-item-font-weight, 500);
 		flex: 1;
-		text-align: left;
+		text-align: start;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		text-wrap: nowrap;

package/dist/tabs/Tab.svelte

@@ -163,13 +163,13 @@
 		min-width: 1.5rem;
 	}
 	.np-tab-label-badge {
-		margin-right: 4px;
+		margin-inline-end: 4px;
 	}
 	.np-tab-icon-badge {
 		height: 1.5rem;
 		width: 1.5rem;
 		position: relative;
-		--np-badge-left: 1.125rem;
+		--np-badge-start: 1.125rem;
 	}
 
 	.np-tab-no-inline {
@@ -184,22 +184,20 @@
 	.np-indicator {
 		position: absolute;
 		bottom: 0;
-		left: var(--_indicator-gap, 2px);
-		right: var(--_indicator-gap, 2px);
+		inset-inline: var(--_indicator-gap, 2px);
 		height: 3px;
 	}
 
 	.fallback .np-indicator {
 		background-color: var(--np-color-primary);
-		border-top-left-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
-		border-top-right-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
+		border-start-start-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
+		border-start-end-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
 	}
 
 	.focus-area {
 		position: absolute;
 		top: 0;
-		left: 0;
-		right: 0;
+		inset-inline: 0;
 		bottom: var(--_focus-bottom, 0);
 		border-radius: var(--np-shape-corner-medium);
 		transition: height 0.3s ease;

package/dist/tabs/Tabs.svelte

@@ -87,8 +87,8 @@
 			right: anchor(right);
 			bottom: anchor(bottom);
 			background-color: var(--np-color-primary);
-			border-top-left-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
-			border-top-right-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
+			border-start-start-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
+			border-start-end-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
 			position-anchor: --np-tab-indicator;
 			transition: cubic-bezier(0.33, 1, 0.68, 1) 0.3s;
 		}

package/dist/text-field/TextField.svelte

@@ -137,7 +137,7 @@
 
 <label
 	style={(variant === 'outlined'
-		? '--_label-text-color:var(--np-outlined-text-field-label-text-color);--top-space:1rem;--bottom-space:1rem;--floating-label-top:-0.5rem;--floating-label-left:-2.25rem;--_focus-outline-width:3px;'
+		? '--_label-text-color:var(--np-outlined-text-field-label-text-color);--top-space:1rem;--bottom-space:1rem;--floating-label-top:-0.5rem;--floating-label-inline-start:-2.25rem;--_focus-outline-width:3px;'
 		: !label?.length
 			? '--_label-text-color:var(--np-filled-text-field-label-text-color);--np-input-chip-outline-color:var(--np-color-outline);--top-space:1rem;--bottom-space:1rem; '
 			: '--_label-text-color:var(--np-filled-text-field-label-text-color);--np-input-chip-outline-color:var(--np-color-outline); ' +
@@ -307,6 +307,9 @@
 	.error .active-indicator::after {
 		border-bottom-color: var(--np-color-error);
 	}
+	.error:hover .active-indicator::after {
+		border-bottom-color: var(--np-color-on-error-container);
+	}
 	.disabled .active-indicator::before {
 		border-bottom-color: var(--np-color-on-surface);
 		border-bottom-width: 1px;
@@ -548,18 +551,21 @@
 	}
 	.start {
 		color: var(--np-color-on-surface-variant);
-		margin-left: 0.75rem;
-		margin-right: 1rem;
+		margin-inline-start: 0.75rem;
+		margin-inline-end: 1rem;
 	}
 	.end {
 		color: var(--np-color-on-surface-variant);
-		margin-left: 1rem;
-		margin-right: 0.75rem;
+		margin-inline-start: 1rem;
+		margin-inline-end: 0.75rem;
 	}
-	.error .start,
 	.error .end {
 		color: var(--np-color-error);
 	}
+
+	.error:hover .end {
+		color: var(--np-color-on-error-container);
+	}
 	.disabled .start,
 	.disabled .end {
 		color: var(--np-color-on-surface);
@@ -604,14 +610,14 @@
 		margin-inline-start: 1rem;
 	}
 	.with-start .np-outline .label-wrapper {
-		left: 3.25rem;
+		inset-inline-start: 3.25rem;
 	}
 	.with-end .np-outline .label-wrapper {
 		margin-inline-end: 3.25rem;
 	}
 	.with-start.populated .with-start:has(input:focus-visible) .label-wrapper,
 	.with-start:has(textarea:focus-visible) .label-wrapper {
-		right: -2.25rem;
+		inset-inline-end: -2.25rem;
 	}
 
 	.with-end.populated .with-end:has(input:focus-visible) .label-wrapper,
@@ -637,7 +643,7 @@
 	.field:not(.populated) .label {
 		position: absolute;
 		top: 1rem;
-		left: 0rem;
+		inset-inline-start: 0rem;
 	}
 	.field.populated .label,
 	.field:has(input:focus-visible) .label,
@@ -651,7 +657,7 @@
 	.with-start.populated .label,
 	.with-start:has(input:focus-visible) .label,
 	.with-start:has(textarea:focus-visible) .label {
-		left: var(--floating-label-left, 0);
+		inset-inline-start: var(--floating-label-inline-start, 0);
 	}
 	.label {
 		transition-property: all;
@@ -677,6 +683,12 @@
 	.error:has(textarea:focus-visible) .label {
 		color: var(--np-color-error);
 	}
+	.error:hover .label,
+	.error:has(input:focus-visible):hover .label,
+	.error:has(textarea:focus-visible):hover .label {
+		color: var(--np-color-on-error-container);
+	}
+
 	.disabled .label {
 		color: var(--np-color-on-surface);
 	}
@@ -826,11 +838,24 @@
 		border-color: var(--np-outlined-text-field-focus-outline-color, var(--np-color-primary));
 		color: var(--np-color-primary);
 	}
+
+	.field:hover .np-outline {
+		border-color: var(--np-color-on-surface);
+		color: var(--np-color-on-surface);
+	}
+
 	.error .np-outline,
 	.error:has(input:focus-visible) .np-outline,
 	.error:has(textarea:focus-visible) .np-outline {
 		border-color: var(--np-color-error);
 	}
+
+	.error:hover .np-outline,
+	.error:has(input:focus-visible):hover .np-outline,
+	.error:has(textarea:focus-visible):hover .np-outline {
+		border-color: var(--np-color-on-error-container);
+	}
+
 	.disabled .np-outline {
 		border-color: var(--np-color-on-surface);
 		color: var(--np-color-on-surface);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.26.8",
+  "version": "0.26.9",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {