@sveltia/ui 0.10.0 → 0.10.2

package/package/components/button/button.svelte

@@ -231,12 +231,12 @@ button:global(.primary) {
   font-weight: var(--sui-button-primary-font-weight, normal);
 }
 button:global(.primary):hover, button:global(.primary):focus-visible, button:global(.primary)[aria-expanded=true] {
-  color: var(--sui-button-primary-foreground-color-focus, initial);
-  background-color: var(--sui-button-primary-background-color-focus, var(--sui-primary-accent-color-light, initial));
+  color: var(--sui-button-primary-foreground-color-focus);
+  background-color: var(--sui-button-primary-background-color-focus, var(--sui-primary-accent-color-light));
 }
 button:global(.primary):active {
-  color: var(--sui-button-primary-foreground-color-active, initial);
-  background-color: var(--sui-button-primary-background-color-active, var(--sui-primary-accent-color-dark, initial));
+  color: var(--sui-button-primary-foreground-color-active);
+  background-color: var(--sui-button-primary-background-color-active, var(--sui-primary-accent-color-dark));
 }
 button:global(.secondary) {
   border-width: var(--sui-button-secondary-border-width, 1px);
@@ -247,16 +247,16 @@ button:global(.secondary) {
   font-weight: var(--sui-button-secondary-font-weight, normal);
 }
 button:global(.secondary):hover, button:global(.secondary):focus-visible, button:global(.secondary)[aria-expanded=true] {
-  color: var(--sui-button-secondary-foreground-color-focus, initial);
-  background-color: var(--sui-button-secondary-background-color-focus, var(--sui-hover-background-color, initial));
+  color: var(--sui-button-secondary-foreground-color-focus);
+  background-color: var(--sui-button-secondary-background-color-focus, var(--sui-hover-background-color));
 }
 button:global(.secondary):active {
-  color: var(--sui-button-secondary-foreground-color-active, initial);
+  color: var(--sui-button-secondary-foreground-color-active);
   background-color: var(--sui-button-secondary-background-color-active, var(--sui-active-background-color));
 }
 button:global(.secondary)[aria-pressed=true] {
-  color: var(--sui-button-secondary-foreground-color-pressed, initial);
-  background-color: var(--sui-button-secondary-background-color-pressed, var(--sui-primary-accent-color, initial));
+  color: var(--sui-button-secondary-foreground-color-pressed);
+  background-color: var(--sui-button-secondary-background-color-pressed, var(--sui-primary-accent-color));
 }
 button:global(.tertiary) {
   border-width: var(--sui-button-tertiary-border-width, 1px);
@@ -267,31 +267,31 @@ button:global(.tertiary) {
   font-weight: var(--sui-button-tertiary-font-weight, normal);
 }
 button:global(.tertiary):hover, button:global(.tertiary):focus-visible, button:global(.tertiary)[aria-expanded=true] {
-  color: var(--sui-button-tertiary-foreground-color-focus, initial);
-  background-color: var(--sui-button-tertiary-background-color-focus, var(--sui-hover-background-color, initial));
+  color: var(--sui-button-tertiary-foreground-color-focus);
+  background-color: var(--sui-button-tertiary-background-color-focus, var(--sui-hover-background-color));
 }
 button:global(.tertiary):active {
-  color: var(--sui-button-tertiary-foreground-color-active, initial);
-  background-color: var(--sui-button-tertiary-background-color-active, var(--sui-active-background-color, initial));
+  color: var(--sui-button-tertiary-foreground-color-active);
+  background-color: var(--sui-button-tertiary-background-color-active, var(--sui-active-background-color));
 }
 button:global(.tertiary)[aria-pressed=true] {
-  color: var(--sui-button-tertiary-foreground-color-pressed, initial);
-  background-color: var(--sui-button-tertiary-background-color-pressed, var(--sui-selected-background-color, initial));
+  color: var(--sui-button-tertiary-foreground-color-pressed);
+  background-color: var(--sui-button-tertiary-background-color-pressed, var(--sui-selected-background-color));
 }
 button:global(.ghost) {
   font-weight: var(--sui-button-ghost-font-weight, normal);
 }
 button:global(.ghost):hover, button:global(.ghost):focus-visible, button:global(.ghost)[aria-expanded=true] {
-  color: var(--sui-button-ghost-foreground-color-focus, initial);
-  background-color: var(--sui-button-ghost-background-color-focus, var(--sui-hover-background-color, initial));
+  color: var(--sui-button-ghost-foreground-color-focus);
+  background-color: var(--sui-button-ghost-background-color-focus, var(--sui-hover-background-color));
 }
 button:global(.ghost):active {
-  color: var(--sui-button-ghost-foreground-color-active, initial);
-  background-color: var(--sui-button-ghost-background-color-active, var(--sui-active-background-color, initial));
+  color: var(--sui-button-ghost-foreground-color-active);
+  background-color: var(--sui-button-ghost-background-color-active, var(--sui-active-background-color));
 }
 button:global(.ghost)[aria-pressed=true] {
-  color: var(--sui-button-ghost-foreground-color-pressed, initial);
-  background-color: var(--sui-button-ghost-background-color-pressed, var(--sui-selected-background-color, initial));
+  color: var(--sui-button-ghost-foreground-color-pressed);
+  background-color: var(--sui-button-ghost-background-color-pressed, var(--sui-selected-background-color));
 }
 button:global(.link) {
   outline: 0;

package/package/components/text-field/text-area.svelte

@@ -107,7 +107,7 @@ textarea,
   grid-area: 1/1/2/2;
   display: block;
   margin: 0;
-  border-width: 1px;
+  border-width: var(--sui-textbox-border-width, 1px);
   border-color: var(--sui-textbox-border-color);
   border-radius: var(--sui-textbox-border-radius);
   padding: 8px;
@@ -126,7 +126,9 @@ textarea.resizing,
 }
 textarea:focus,
 .clone:focus {
-  border-color: var(--sui-primary-accent-color);
+  border-color: var(--sui-textbox-border-color-focus, var(--sui-primary-accent-color));
+  color: var(--sui-textbox-foreground-color-focus, var(--sui-textbox-foreground-color));
+  background-color: var(--sui-textbox-background-color-focus, var(--sui-textbox-background-color));
 }
 textarea:disabled, textarea:read-only,
 .clone:disabled,

package/package/components/text-field/text-input.svelte

@@ -150,7 +150,7 @@ input:-webkit-autofill:focus {
 input {
   display: inline-block;
   flex: auto;
-  border-width: 1px;
+  border-width: var(--sui-textbox-border-width, 1px);
   border-color: var(--sui-textbox-border-color);
   border-radius: var(--sui-textbox-border-radius);
   padding: var(--sui-textbox-padding, 0 8px);
@@ -168,7 +168,9 @@ input {
   transition: all 200ms;
 }
 input:focus {
-  border-color: var(--sui-primary-accent-color);
+  border-color: var(--sui-textbox-border-color-focus, var(--sui-primary-accent-color));
+  color: var(--sui-textbox-foreground-color-focus, var(--sui-textbox-foreground-color));
+  background-color: var(--sui-textbox-background-color-focus, var(--sui-textbox-background-color));
 }
 input:read-only {
   color: var(--sui-tertiary-foreground-color);
@@ -180,17 +182,6 @@ input:disabled, input:read-only {
 input[aria-invalid=true] {
   border-color: var(--sui-error-foreground-color);
 }
-input::placeholder {
-  color: var(--sui-textbox-placeholder-foreground-color, var(--sui-textbox-foreground-color));
-  opacity: var(--sui-textbox-placeholder-opacity, 0.5);
-  font-family: var(--sui-textbox-placeholder-font-family, var(--sui-textbox-font-family));
-  font-size: var(--sui-textbox-placeholder-font-size, var(--sui-textbox-font-size));
-  line-height: var(--sui-textbox-placeholder-singleline-line-height, var(--sui-textbox-singleline-line-height));
-  font-weight: var(--sui-textbox-placeholder-font-weight, var(--sui-textbox-font-weight, normal));
-  text-align: var(--sui-textbox-placeholder-text-align, var(--sui-textbox-text-align, left));
-  text-indent: var(--sui-textbox-placeholder-text-indent, var(--sui-textbox-text-indent, 0));
-  letter-spacing: var(--sui-textbox-placeholder-letter-spacing, var(--sui-textbox-letter-spacing, normal));
-}
 input ~ :global(button) {
   flex: none;
   margin-left: -1px;
@@ -208,13 +199,12 @@ input ~ :global(button) :global(.icon) {
 
 .label {
   position: absolute;
-  inset: 0 8px;
+  inset: var(--sui-textbox-padding, 0 8px);
   z-index: 2;
   display: flex;
-  justify-content: var(--sui-textbox-label-align, flex-start);
   align-items: center;
-  color: var(--sui-primary-foreground-color);
-  opacity: 0.5;
+  justify-content: var(--sui-textbox-placeholder-text-align, var(--sui-textbox-text-align, left));
+  white-space: nowrap;
   pointer-events: none;
 }
 .label.hidden {
@@ -223,4 +213,17 @@ input ~ :global(button) :global(.icon) {
 
 input:focus + .label {
   opacity: 0;
+}
+
+input::placeholder,
+.label {
+  color: var(--sui-textbox-placeholder-foreground-color, var(--sui-textbox-foreground-color));
+  opacity: var(--sui-textbox-placeholder-opacity, 0.5);
+  font-family: var(--sui-textbox-placeholder-font-family, var(--sui-textbox-font-family));
+  font-size: var(--sui-textbox-placeholder-font-size, var(--sui-textbox-font-size));
+  line-height: var(--sui-textbox-placeholder-singleline-line-height, var(--sui-textbox-singleline-line-height));
+  font-weight: var(--sui-textbox-placeholder-font-weight, var(--sui-textbox-font-weight, normal));
+  text-align: var(--sui-textbox-placeholder-text-align, var(--sui-textbox-text-align, left));
+  text-indent: var(--sui-textbox-placeholder-text-indent, var(--sui-textbox-text-indent, 0));
+  letter-spacing: var(--sui-textbox-placeholder-letter-spacing, var(--sui-textbox-letter-spacing, normal));
 }</style>

package/package/services/group.js

@@ -96,7 +96,17 @@ class Group {
         controlTarget.setAttribute('aria-hidden', String(!isSelected));
 
         if (isSelected) {
-          controlTarget.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
+          window.setTimeout(() => {
+            try {
+              controlTarget.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest',
+                behavior: 'auto',
+              });
+            } catch {
+              controlTarget.scrollIntoView(true);
+            }
+          }, 300);
         }
       }
     });
@@ -245,13 +255,30 @@ class Group {
         controlTarget.setAttribute('aria-hidden', String(!isTarget));
 
         if (isTarget) {
-          controlTarget.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
+          window.setTimeout(() => {
+            try {
+              controlTarget.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest',
+                behavior: 'auto',
+              });
+            } catch {
+              controlTarget.scrollIntoView(true);
+            }
+          }, 300);
         }
       }
 
       if (isTarget) {
         this.parent.setAttribute('aria-activedescendant', element.id);
-        element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
+
+        window.setTimeout(() => {
+          try {
+            element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
+          } catch {
+            element.scrollIntoView(true);
+          }
+        }, 300);
       }
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "license": "MIT",
   "type": "module",
   "publishConfig": {