@sveltia/ui 0.10.1 → 0.10.3

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;
@@ -299,15 +299,16 @@ button:global(.link) {
   border-radius: 0 !important;
   padding: 0 !important;
   height: auto !important;
-  color: var(--sui-primary-accent-color-text);
+  color: var(--sui-button-link-foreground-color, var(--sui-primary-accent-color-text));
 }
 button:global(.link) :global(.label) {
   padding: 0;
   line-height: var(--sui-line-height-compact);
+  text-decoration: var(--sui-button-link-text-decoration, none);
   white-space: normal;
 }
 button:global(.link):hover :global(.label), button:global(.link):focus :global(.label), button:global(.link):active :global(.label) {
-  text-decoration: underline;
+  text-decoration: var(--sui-button-link-text-decoration-focus, underline);
 }
 button:global(.small) {
   border-radius: var(--sui-button-small-border-radius);

package/package/components/dialog/dialog.svelte

@@ -200,8 +200,8 @@
   transform: scale(90%);
 }
 .content.small {
-  width: 400px;
-  max-height: 400px;
+  width: var(--sui-dialog-small-content-width, 400px);
+  max-height: var(--sui-dialog-small-content-max-height, 400px);
 }
 @media (max-height: 400px) {
   .content.small {
@@ -209,8 +209,8 @@
   }
 }
 .content.medium {
-  width: 600px;
-  max-height: 600px;
+  width: var(--sui-dialog-medium-content-width, 600px);
+  max-height: var(--sui-dialog-medium-content-max-height, 600px);
 }
 @media (max-height: 600px) {
   .content.medium {
@@ -218,8 +218,8 @@
   }
 }
 .content.large {
-  width: 800px;
-  max-height: 800px;
+  width: var(--sui-dialog-large-content-width, 800px);
+  max-height: var(--sui-dialog-large-content-max-height, 800px);
 }
 @media (max-height: 800px) {
   .content.large {
@@ -227,8 +227,8 @@
   }
 }
 .content.x-large {
-  width: 1000px;
-  max-height: 1000px;
+  width: var(--sui-dialog-x-large-content-width, 1000px);
+  max-height: var(--sui-dialog-x-large-content-max-height, 1000px);
 }
 @media (max-height: 1000px) {
   .content.x-large {

package/package/components/drawer/drawer.svelte

@@ -174,6 +174,9 @@
   inset: 0 0 0 auto;
   border-radius: var(--sui-drawer-right-content-border-radius, var(--sui-drawer-content-border-radius, 4px 0 0 4px));
 }
+.content.right.full {
+  border-radius: var(--sui-drawer-right-full-content-border-radius, 0);
+}
 .content.right .extra-control {
   inset: 0 100% auto auto;
 }
@@ -184,6 +187,9 @@
   inset: 0 auto 0 0;
   border-radius: var(--sui-drawer-left-content-border-radius, var(--sui-drawer-content-border-radius, 0 4px 4px 0));
 }
+.content.left.full {
+  border-radius: var(--sui-drawer-left-full-content-border-radius, 0);
+}
 .content.left .extra-control {
   inset: 0 auto auto 100%;
 }
@@ -191,34 +197,36 @@
   transform: translateX(-105%);
 }
 .content.vertical {
-  height: 100%;
-  max-width: 100dvw;
+  max-width: var(--sui-drawer-vertical-max-width, calc(100dvw - 56px));
+  height: var(--sui-drawer-vertical-height, 100dvh);
 }
 :global(dialog.open) .content.vertical {
-  max-width: calc(100dvw - 56px);
   transform: translateX(0%);
 }
 .content.vertical.small {
-  width: 400px;
+  width: var(--sui-drawer-vertical-small-width, 400px);
 }
 .content.vertical.medium {
-  width: 600px;
+  width: var(--sui-drawer-vertical-medium-width, 600px);
 }
 .content.vertical.large {
-  width: 800px;
+  width: var(--sui-drawer-vertical-large-width, 800px);
 }
 .content.vertical.x-large {
-  width: 1000px;
+  width: var(--sui-drawer-vertical-x-large-width, 1000px);
 }
 .content.vertical.full {
-  border-radius: 0 !important;
   width: 100dvw;
-  max-width: none !important;
+  max-width: 100dvw;
+  height: 100dvh;
 }
 .content.top {
   inset: 0 0 auto 0;
   border-radius: var(--sui-drawer-top-content-border-radius, var(--sui-drawer-content-border-radius, 0 0 4px 4px));
 }
+.content.top.full {
+  border-radius: var(--sui-drawer-top-full-content-border-radius, 0);
+}
 .content.top .extra-control {
   inset: 100% 0 auto auto;
 }
@@ -229,6 +237,9 @@
   inset: auto 0 0 0;
   border-radius: var(--sui-drawer-bottom-content-border-radius, var(--sui-drawer-content-border-radius, 4px 4px 0 0));
 }
+.content.bottom.full {
+  border-radius: var(--sui-drawer-bottom-full-content-border-radius, 0);
+}
 .content.bottom .extra-control {
   inset: auto 0 100% auto;
 }
@@ -236,29 +247,28 @@
   transform: translateY(105%);
 }
 .content.horizontal {
-  width: 100%;
-  max-height: 100dvh;
+  width: var(--sui-drawer-horizontal-width, 100dvw);
+  max-height: var(--sui-drawer-horizontal-max-height, calc(100dvh - 56px));
 }
 :global(dialog.open) .content.horizontal {
-  max-height: calc(100dvh - 56px);
   transform: translateY(0%);
 }
 .content.horizontal.small {
-  height: 400px;
+  height: var(--sui-drawer-horizontal-small-height, 400px);
 }
 .content.horizontal.medium {
-  height: 600px;
+  height: var(--sui-drawer-horizontal-medium-height, 600px);
 }
 .content.horizontal.large {
-  height: 800px;
+  height: var(--sui-drawer-horizontal-large-height, 800px);
 }
 .content.horizontal.x-large {
-  height: 1000px;
+  height: var(--sui-drawer-horizontal-x-large-height, 1000px);
 }
 .content.horizontal.full {
-  border-radius: 0 !important;
+  width: 100dvw;
   height: 100dvh;
-  max-height: none !important;
+  max-height: 100dvh;
 }
 
 .header,

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);
@@ -164,11 +164,14 @@ input {
   font-weight: var(--sui-textbox-font-weight, normal);
   text-align: var(--sui-textbox-text-align, left);
   text-indent: var(--sui-textbox-text-indent, 0);
+  text-transform: var(--sui-textbox-text-transform, none);
   letter-spacing: var(--sui-textbox-letter-spacing, normal);
   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 +183,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 +200,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 +214,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.json

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