@sveltia/ui 0.10.2 → 0.10.3

package/package/components/button/button.svelte

@@ -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-input.svelte

@@ -164,6 +164,7 @@ 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;
 }

package/package.json

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