@revikornmann/muka-ui 0.7.0 → 0.9.0

package/dist/styles/tokens-wireframe-dark.css

@@ -1168,11 +1168,11 @@
   --alias-font-brand-weight-medium: 500;
   --alias-font-brand-weight-semibold: 600;
   --alias-font-brand-weight-bold: 700;
-  --alias-radius-sm: 0.1875rem;
-  --alias-radius-md: 0.375rem;
-  --alias-radius-lg: 0.75rem;
-  --alias-radius-xl: 1.5rem;
-  --alias-radius-2xl: 3rem;
+  --alias-radius-sm: 0px;
+  --alias-radius-md: 0px;
+  --alias-radius-lg: 0px;
+  --alias-radius-xl: 0px;
+  --alias-radius-2xl: 0px;
   --alias-radius-full: 999rem;
   --alias-motion-duration-none: 0ms;
   --alias-motion-duration-instant: 100ms;
@@ -1194,11 +1194,11 @@
   --wrapper-gap-default: 1rem;
   --wrapper-gap-compact: 0.75rem;
   --wrapper-gap-spacious: 2rem;
-  --border-radius-sm: 0.1875rem;
-  --border-radius-md: 0.375rem;
-  --border-radius-lg: 0.75rem;
-  --border-radius-xl: 1.5rem;
-  --border-radius-2xl: 3rem;
+  --border-radius-sm: 0px;
+  --border-radius-md: 0px;
+  --border-radius-lg: 0px;
+  --border-radius-xl: 0px;
+  --border-radius-2xl: 0px;
   --border-radius-full: 999rem;
   --border-width-regular: 0.0625rem;
   --border-width-bold: 0.125rem;
@@ -1434,6 +1434,18 @@
   --button-color-ghost-border-hover: #313131;
   --button-color-ghost-border-pressed: #313131;
   --button-color-ghost-border-disabled: transparent;
+  --button-color-muted-background-default: transparent;
+  --button-color-muted-background-hover: transparent;
+  --button-color-muted-background-pressed: transparent;
+  --button-color-muted-background-disabled: transparent;
+  --button-color-muted-foreground-default: #7b7b7b;
+  --button-color-muted-foreground-hover: #eeeeee;
+  --button-color-muted-foreground-pressed: #eeeeee;
+  --button-color-muted-foreground-disabled: #7b7b7b;
+  --button-color-muted-border-default: transparent;
+  --button-color-muted-border-hover: #313131;
+  --button-color-muted-border-pressed: #313131;
+  --button-color-muted-border-disabled: transparent;
   --button-color-tertiary-background-default: #111111;
   --button-color-tertiary-background-hover: #111111;
   --button-color-tertiary-background-pressed: #2a2a2a;
@@ -1446,10 +1458,10 @@
   --button-color-tertiary-border-hover: #606060;
   --button-color-tertiary-border-pressed: #606060;
   --button-color-tertiary-border-disabled: #313131;
-  --button-radius-sm: 0.75rem;
-  --button-radius-md: 0.75rem;
-  --button-radius-lg: 0.75rem;
-  --button-radius-xl: 0.75rem;
+  --button-radius-sm: 0px;
+  --button-radius-md: 0px;
+  --button-radius-lg: 0px;
+  --button-radius-xl: 0px;
   --button-padding-sm-x: 0.75rem;
   --button-padding-md-x: 0.75rem;
   --button-padding-lg-x: 1rem;
@@ -1474,9 +1486,9 @@
   --card-color-selected-background: #2a2a2a;
   --card-color-selected-foreground: #eeeeee;
   --card-color-selected-border: #b4b4b4;
-  --card-radius-sm: 0.1875rem;
-  --card-radius-md: 0.375rem;
-  --card-radius-lg: 0.75rem;
+  --card-radius-sm: 0px;
+  --card-radius-md: 0px;
+  --card-radius-lg: 0px;
   --card-padding-sm: 0.75rem;
   --card-padding-md: 1rem;
   --card-padding-lg: 1.5rem;
@@ -1503,9 +1515,9 @@
   --input-field-color-disabled-background: #313131;
   --input-field-color-disabled-foreground: #7b7b7b;
   --input-field-color-disabled-border: #313131;
-  --input-field-radius-sm: 0.1875rem;
-  --input-field-radius-md: 0.375rem;
-  --input-field-radius-lg: 0.75rem;
+  --input-field-radius-sm: 0px;
+  --input-field-radius-md: 0px;
+  --input-field-radius-lg: 0px;
   --input-field-padding-x: 0.75rem;
   --input-field-padding-y: 0.5rem;
   --input-field-border-default: 0.125rem solid #606060;
@@ -1587,7 +1599,7 @@
   --checkbox-size-sm: 1.25rem;
   --checkbox-size-default: 1.5rem;
   --checkbox-size-lg: 2rem;
-  --checkbox-radius: 0.1875rem;
+  --checkbox-radius: 0px;
   --checkbox-icon-size-sm: 1rem;
   --checkbox-icon-size-default: 1.25rem;
   --checkbox-icon-size-lg: 1.5rem;
@@ -1624,7 +1636,7 @@
   --alert-padding-md-y: 0.75rem;
   --alert-padding-lg-x: 1.25rem;
   --alert-padding-lg-y: 1rem;
-  --alert-radius: 0.375rem;
+  --alert-radius: 0px;
   --alert-gap: 0.75rem;
   --alert-icon-size: 1rem;
   --alert-border-width: 0.0625rem;
@@ -1643,9 +1655,9 @@
   --select-field-color-disabled-background: #313131;
   --select-field-color-disabled-foreground: #7b7b7b;
   --select-field-color-disabled-border: #313131;
-  --select-field-radius-sm: 0.1875rem;
-  --select-field-radius-md: 0.375rem;
-  --select-field-radius-lg: 0.75rem;
+  --select-field-radius-sm: 0px;
+  --select-field-radius-md: 0px;
+  --select-field-radius-lg: 0px;
   --select-field-padding-x: 0.75rem;
   --select-field-padding-y: 0.5rem;
   --select-field-height-sm: 2rem;
@@ -1654,8 +1666,8 @@
   --dialog-color-backdrop: rgba(0, 0, 0, 0.565);
   --dialog-color-background: #111111;
   --dialog-color-body-background: #111111;
-  --dialog-border-radius: 1.5rem;
-  --dialog-border-radius-desktop: 1.5rem;
+  --dialog-border-radius: 0px;
+  --dialog-border-radius-desktop: 0px;
   --dialog-shadow-default: 0 48px 96px 0 rgba(0, 0, 0, 0.220), inset 0 0 1px 0 rgba(0, 0, 0, 0.220);
   --dialog-width-sm: 35rem;
   --dialog-width-md: 54.5rem;
@@ -1675,7 +1687,7 @@
   --dialog-padding-x: 1rem;
   --menu-content-color-background: #111111;
   --menu-content-color-border: #2a2a2a;
-  --menu-content-border-radius: 0.75rem;
+  --menu-content-border-radius: 0px;
   --menu-content-border-width: 0.0625rem;
   --menu-content-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.090), 0 8px 16px 0 rgba(0, 0, 0, 0.090);
   --menu-content-padding: 0.25rem;
@@ -1698,7 +1710,7 @@
   --menu-item-color-destructive-hover-background: #3d181e;
   --menu-item-color-destructive-hover-foreground: #fea6a6;
   --menu-item-color-destructive-hover-icon: #fea6a6;
-  --menu-item-border-radius: 0.1875rem;
+  --menu-item-border-radius: 0px;
   --menu-item-padding-x: 0.75rem;
   --menu-item-padding-y: 0.5rem;
   --menu-item-gap: 0.5rem;
@@ -1732,7 +1744,7 @@
   --tabs-trigger-padding-x: 0.75rem;
   --tabs-trigger-padding-y: 0.5rem;
   --tabs-trigger-height: 3rem;
-  --tabs-trigger-radius: 0.75rem;
+  --tabs-trigger-radius: 0px;
   --tabs-panel-background: #111111;
   --tabs-panel-border: #606060;
   --separator-color-default: #313131;
@@ -1782,7 +1794,7 @@
   --avatar-color-status-busy: #e54d4e;
   --avatar-color-status-away: #ffc53d;
   --avatar-radius-circle: 999rem;
-  --avatar-radius-square: 0.75rem;
+  --avatar-radius-square: 0px;
   --avatar-font-size-xs: 0.75rem;
   --avatar-font-size-sm: 0.875rem;
   --avatar-font-size-md: 1.125rem;
@@ -1810,7 +1822,7 @@
   --toast-color-error-accent: #3d181e;
   --toast-padding-x: 1rem;
   --toast-padding-y: 0.75rem;
-  --toast-radius: 0.75rem;
+  --toast-radius: 0px;
   --toast-gap: 0.75rem;
   --toast-icon-size: 1rem;
   --toast-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.090), 0 8px 16px 0 rgba(0, 0, 0, 0.090);
@@ -1856,13 +1868,13 @@
   --controlbar-padding-bottom-lg: 1rem;
   --controlbar-gap-sm: 0.5rem;
   --controlbar-gap-lg: 1rem;
-  --controlbar-content-radius-sm: 0.75rem;
-  --controlbar-content-radius-lg: 0.375rem;
+  --controlbar-content-radius-sm: 0px;
+  --controlbar-content-radius-lg: 0px;
   --bottombar-color-background: #111111;
   --bottombar-color-border: #313131;
   --bottombar-color-tab-active: #eeeeee;
   --bottombar-color-tab-inactive: #7b7b7b;
-  --bottombar-floating-radius: 1.5rem;
+  --bottombar-floating-radius: 0px;
   --bottombar-floating-padding: 0.75rem;
   --bottombar-floating-margin-x: 0.75rem;
   --bottombar-floating-margin-bottom: 0.75rem;
@@ -1944,7 +1956,7 @@
   --segmentgroup-segment-color-hover-foreground: #eeeeee;
   --segmentgroup-segment-shadow-selected: 0px 0px 1px 0px rgba(0, 0, 0, 0.090), 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
   --segmentgroup-segment-shadow-unselected: none;
-  --segmentgroup-segment-radius: 1.5rem;
+  --segmentgroup-segment-radius: 0px;
   --segmentgroup-segment-padding-sm-x: 1rem;
   --segmentgroup-segment-padding-sm-y: 0;
   --segmentgroup-segment-padding-md-x: 1.25rem;
@@ -1966,7 +1978,7 @@
   --emptystate-actions-gap: 0.75rem;
   --emptystate-actions-marginTop: 1rem;
   --documentviewer-container-background: #111111;
-  --documentviewer-container-borderRadius: 0.75rem;
+  --documentviewer-container-borderRadius: 0px;
   --documentviewer-toolbar-height: 3rem;
   --documentviewer-toolbar-padding-x: 1rem;
   --documentviewer-toolbar-padding-y: 0.5rem;
@@ -1979,7 +1991,7 @@
   --documentviewer-thumbnails-background: #313131;
   --documentviewer-thumbnails-border: #313131;
   --documentviewer-thumbnails-item-padding: 0.5rem;
-  --documentviewer-thumbnails-item-borderRadius: 0.1875rem;
+  --documentviewer-thumbnails-item-borderRadius: 0px;
   --documentviewer-thumbnails-item-gap: 0.25rem;
   --documentviewer-thumbnails-item-background-default: transparent;
   --documentviewer-thumbnails-item-background-hover: #2a2a2a;
@@ -1989,7 +2001,7 @@
   --documentviewer-page-background: #ffffff;
   --documentviewer-page-foreground: #000000;
   --documentviewer-page-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.090), 0 2px 4px 0 rgba(0, 0, 0, 0.090);
-  --documentviewer-page-borderRadius: 0.1875rem;
+  --documentviewer-page-borderRadius: 0px;
   --documentviewer-zoom-button-width: 2rem;
   --documentviewer-loading-overlay-background: rgba(0, 0, 0, 0.565);
   --documentviewer-error-background: #313131;
@@ -2009,7 +2021,7 @@
   --fileupload-dropzone-padding-sm: 1rem;
   --fileupload-dropzone-padding-md: 1.5rem;
   --fileupload-dropzone-padding-lg: 2rem;
-  --fileupload-dropzone-radius: 0.75rem;
+  --fileupload-dropzone-radius: 0px;
   --fileupload-dropzone-border-width: 0.125rem;
   --fileupload-dropzone-border-style: dashed;
   --fileupload-dropzone-gap: 0.75rem;
@@ -2021,10 +2033,10 @@
   --fileupload-item-color-success-foreground: #30a46c;
   --fileupload-item-padding-x: 0.75rem;
   --fileupload-item-padding-y: 0.75rem;
-  --fileupload-item-radius: 0.375rem;
+  --fileupload-item-radius: 0px;
   --fileupload-item-gap: 0.75rem;
   --fileupload-preview-size: 2.5rem;
-  --fileupload-preview-radius: 0.1875rem;
+  --fileupload-preview-radius: 0px;
   --piechart-color-categorical-1: #0091ff;
   --piechart-color-categorical-2: #f76808;
   --piechart-color-categorical-3: #30a46c;
@@ -2068,6 +2080,20 @@
   }
 }
 
+/* Responsive overrides: xl (min-width: 1280px) */
+@media (min-width: 1280px) {
+  :root {
+    --section-padding-vertical-default: 3rem;
+    --section-padding-vertical-compact: 2.5rem;
+    --section-padding-vertical-spacious: 4rem;
+    --section-padding-horizontal-default: 2.5rem;
+    --section-padding-horizontal-compact: 1.5rem;
+    --section-padding-horizontal-spacious: 3rem;
+    --container-gap-default: 2rem;
+    --container-gap-spacious: 3rem;
+  }
+}
+
 /* Layout mode: tablet (forced via data-layout attribute) */
 [data-layout="tablet"] {
   --section-padding-vertical-default: 2.5rem;
@@ -2093,6 +2119,18 @@
   --container-gap-spacious: 3rem;
 }
 
+/* Layout mode: widescreen (forced via data-layout attribute) */
+[data-layout="widescreen"] {
+  --section-padding-vertical-default: 3rem;
+  --section-padding-vertical-compact: 2.5rem;
+  --section-padding-vertical-spacious: 4rem;
+  --section-padding-horizontal-default: 2.5rem;
+  --section-padding-horizontal-compact: 1.5rem;
+  --section-padding-horizontal-spacious: 3rem;
+  --container-gap-default: 2rem;
+  --container-gap-spacious: 3rem;
+}
+
 /* Accessibility: disable motion for users who prefer reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :root {

package/dist/styles/tokens-wireframe-light.css

@@ -1168,11 +1168,11 @@
   --alias-font-brand-weight-medium: 500;
   --alias-font-brand-weight-semibold: 600;
   --alias-font-brand-weight-bold: 700;
-  --alias-radius-sm: 0.1875rem;
-  --alias-radius-md: 0.375rem;
-  --alias-radius-lg: 0.75rem;
-  --alias-radius-xl: 1.5rem;
-  --alias-radius-2xl: 3rem;
+  --alias-radius-sm: 0px;
+  --alias-radius-md: 0px;
+  --alias-radius-lg: 0px;
+  --alias-radius-xl: 0px;
+  --alias-radius-2xl: 0px;
   --alias-radius-full: 999rem;
   --alias-motion-duration-none: 0ms;
   --alias-motion-duration-instant: 100ms;
@@ -1194,11 +1194,11 @@
   --wrapper-gap-default: 1rem;
   --wrapper-gap-compact: 0.75rem;
   --wrapper-gap-spacious: 2rem;
-  --border-radius-sm: 0.1875rem;
-  --border-radius-md: 0.375rem;
-  --border-radius-lg: 0.75rem;
-  --border-radius-xl: 1.5rem;
-  --border-radius-2xl: 3rem;
+  --border-radius-sm: 0px;
+  --border-radius-md: 0px;
+  --border-radius-lg: 0px;
+  --border-radius-xl: 0px;
+  --border-radius-2xl: 0px;
   --border-radius-full: 999rem;
   --border-width-regular: 0.0625rem;
   --border-width-bold: 0.125rem;
@@ -1434,6 +1434,18 @@
   --button-color-ghost-border-hover: #e0e0e0;
   --button-color-ghost-border-pressed: #e0e0e0;
   --button-color-ghost-border-disabled: transparent;
+  --button-color-muted-background-default: transparent;
+  --button-color-muted-background-hover: transparent;
+  --button-color-muted-background-pressed: transparent;
+  --button-color-muted-background-disabled: transparent;
+  --button-color-muted-foreground-default: #838383;
+  --button-color-muted-foreground-hover: #202020;
+  --button-color-muted-foreground-pressed: #202020;
+  --button-color-muted-foreground-disabled: #838383;
+  --button-color-muted-border-default: transparent;
+  --button-color-muted-border-hover: #e0e0e0;
+  --button-color-muted-border-pressed: #e0e0e0;
+  --button-color-muted-border-disabled: transparent;
   --button-color-tertiary-background-default: #fcfcfc;
   --button-color-tertiary-background-hover: #fcfcfc;
   --button-color-tertiary-background-pressed: #e8e8e8;
@@ -1446,10 +1458,10 @@
   --button-color-tertiary-border-hover: #bbbbbb;
   --button-color-tertiary-border-pressed: #bbbbbb;
   --button-color-tertiary-border-disabled: #e0e0e0;
-  --button-radius-sm: 0.75rem;
-  --button-radius-md: 0.75rem;
-  --button-radius-lg: 0.75rem;
-  --button-radius-xl: 0.75rem;
+  --button-radius-sm: 0px;
+  --button-radius-md: 0px;
+  --button-radius-lg: 0px;
+  --button-radius-xl: 0px;
   --button-padding-sm-x: 0.75rem;
   --button-padding-md-x: 0.75rem;
   --button-padding-lg-x: 1rem;
@@ -1474,9 +1486,9 @@
   --card-color-selected-background: #e8e8e8;
   --card-color-selected-foreground: #202020;
   --card-color-selected-border: #113264;
-  --card-radius-sm: 0.1875rem;
-  --card-radius-md: 0.375rem;
-  --card-radius-lg: 0.75rem;
+  --card-radius-sm: 0px;
+  --card-radius-md: 0px;
+  --card-radius-lg: 0px;
   --card-padding-sm: 0.75rem;
   --card-padding-md: 1rem;
   --card-padding-lg: 1.5rem;
@@ -1503,9 +1515,9 @@
   --input-field-color-disabled-background: #e0e0e0;
   --input-field-color-disabled-foreground: #838383;
   --input-field-color-disabled-border: #e0e0e0;
-  --input-field-radius-sm: 0.1875rem;
-  --input-field-radius-md: 0.375rem;
-  --input-field-radius-lg: 0.75rem;
+  --input-field-radius-sm: 0px;
+  --input-field-radius-md: 0px;
+  --input-field-radius-lg: 0px;
   --input-field-padding-x: 0.75rem;
   --input-field-padding-y: 0.5rem;
   --input-field-border-default: 0.125rem solid #bbbbbb;
@@ -1587,7 +1599,7 @@
   --checkbox-size-sm: 1.25rem;
   --checkbox-size-default: 1.5rem;
   --checkbox-size-lg: 2rem;
-  --checkbox-radius: 0.1875rem;
+  --checkbox-radius: 0px;
   --checkbox-icon-size-sm: 1rem;
   --checkbox-icon-size-default: 1.25rem;
   --checkbox-icon-size-lg: 1.5rem;
@@ -1624,7 +1636,7 @@
   --alert-padding-md-y: 0.75rem;
   --alert-padding-lg-x: 1.25rem;
   --alert-padding-lg-y: 1rem;
-  --alert-radius: 0.375rem;
+  --alert-radius: 0px;
   --alert-gap: 0.75rem;
   --alert-icon-size: 1rem;
   --alert-border-width: 0.0625rem;
@@ -1643,9 +1655,9 @@
   --select-field-color-disabled-background: #e0e0e0;
   --select-field-color-disabled-foreground: #838383;
   --select-field-color-disabled-border: #e0e0e0;
-  --select-field-radius-sm: 0.1875rem;
-  --select-field-radius-md: 0.375rem;
-  --select-field-radius-lg: 0.75rem;
+  --select-field-radius-sm: 0px;
+  --select-field-radius-md: 0px;
+  --select-field-radius-lg: 0px;
   --select-field-padding-x: 0.75rem;
   --select-field-padding-y: 0.5rem;
   --select-field-height-sm: 2rem;
@@ -1654,8 +1666,8 @@
   --dialog-color-backdrop: rgba(0, 0, 0, 0.565);
   --dialog-color-background: #fcfcfc;
   --dialog-color-body-background: #fcfcfc;
-  --dialog-border-radius: 1.5rem;
-  --dialog-border-radius-desktop: 1.5rem;
+  --dialog-border-radius: 0px;
+  --dialog-border-radius-desktop: 0px;
   --dialog-shadow-default: 0 48px 96px 0 rgba(0, 0, 0, 0.220), inset 0 0 1px 0 rgba(0, 0, 0, 0.220);
   --dialog-width-sm: 35rem;
   --dialog-width-md: 54.5rem;
@@ -1675,7 +1687,7 @@
   --dialog-padding-x: 1rem;
   --menu-content-color-background: #fcfcfc;
   --menu-content-color-border: #e8e8e8;
-  --menu-content-border-radius: 0.75rem;
+  --menu-content-border-radius: 0px;
   --menu-content-border-width: 0.0625rem;
   --menu-content-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.090), 0 8px 16px 0 rgba(0, 0, 0, 0.090);
   --menu-content-padding: 0.25rem;
@@ -1698,7 +1710,7 @@
   --menu-item-color-destructive-hover-background: #ffefef;
   --menu-item-color-destructive-hover-foreground: #cd2b31;
   --menu-item-color-destructive-hover-icon: #cd2b31;
-  --menu-item-border-radius: 0.1875rem;
+  --menu-item-border-radius: 0px;
   --menu-item-padding-x: 0.75rem;
   --menu-item-padding-y: 0.5rem;
   --menu-item-gap: 0.5rem;
@@ -1732,7 +1744,7 @@
   --tabs-trigger-padding-x: 0.75rem;
   --tabs-trigger-padding-y: 0.5rem;
   --tabs-trigger-height: 3rem;
-  --tabs-trigger-radius: 0.75rem;
+  --tabs-trigger-radius: 0px;
   --tabs-panel-background: #fcfcfc;
   --tabs-panel-border: #bbbbbb;
   --separator-color-default: #e0e0e0;
@@ -1782,7 +1794,7 @@
   --avatar-color-status-busy: #e5484d;
   --avatar-color-status-away: #ffc53d;
   --avatar-radius-circle: 999rem;
-  --avatar-radius-square: 0.75rem;
+  --avatar-radius-square: 0px;
   --avatar-font-size-xs: 0.75rem;
   --avatar-font-size-sm: 0.875rem;
   --avatar-font-size-md: 1.125rem;
@@ -1810,7 +1822,7 @@
   --toast-color-error-accent: #ffefef;
   --toast-padding-x: 1rem;
   --toast-padding-y: 0.75rem;
-  --toast-radius: 0.75rem;
+  --toast-radius: 0px;
   --toast-gap: 0.75rem;
   --toast-icon-size: 1rem;
   --toast-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.090), 0 8px 16px 0 rgba(0, 0, 0, 0.090);
@@ -1856,13 +1868,13 @@
   --controlbar-padding-bottom-lg: 1rem;
   --controlbar-gap-sm: 0.5rem;
   --controlbar-gap-lg: 1rem;
-  --controlbar-content-radius-sm: 0.75rem;
-  --controlbar-content-radius-lg: 0.375rem;
+  --controlbar-content-radius-sm: 0px;
+  --controlbar-content-radius-lg: 0px;
   --bottombar-color-background: #fcfcfc;
   --bottombar-color-border: #e0e0e0;
   --bottombar-color-tab-active: #202020;
   --bottombar-color-tab-inactive: #838383;
-  --bottombar-floating-radius: 1.5rem;
+  --bottombar-floating-radius: 0px;
   --bottombar-floating-padding: 0.75rem;
   --bottombar-floating-margin-x: 0.75rem;
   --bottombar-floating-margin-bottom: 0.75rem;
@@ -1944,7 +1956,7 @@
   --segmentgroup-segment-color-hover-foreground: #202020;
   --segmentgroup-segment-shadow-selected: 0px 0px 1px 0px rgba(0, 0, 0, 0.090), 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
   --segmentgroup-segment-shadow-unselected: none;
-  --segmentgroup-segment-radius: 1.5rem;
+  --segmentgroup-segment-radius: 0px;
   --segmentgroup-segment-padding-sm-x: 1rem;
   --segmentgroup-segment-padding-sm-y: 0;
   --segmentgroup-segment-padding-md-x: 1.25rem;
@@ -1966,7 +1978,7 @@
   --emptystate-actions-gap: 0.75rem;
   --emptystate-actions-marginTop: 1rem;
   --documentviewer-container-background: #fcfcfc;
-  --documentviewer-container-borderRadius: 0.75rem;
+  --documentviewer-container-borderRadius: 0px;
   --documentviewer-toolbar-height: 3rem;
   --documentviewer-toolbar-padding-x: 1rem;
   --documentviewer-toolbar-padding-y: 0.5rem;
@@ -1979,7 +1991,7 @@
   --documentviewer-thumbnails-background: #e0e0e0;
   --documentviewer-thumbnails-border: #e0e0e0;
   --documentviewer-thumbnails-item-padding: 0.5rem;
-  --documentviewer-thumbnails-item-borderRadius: 0.1875rem;
+  --documentviewer-thumbnails-item-borderRadius: 0px;
   --documentviewer-thumbnails-item-gap: 0.25rem;
   --documentviewer-thumbnails-item-background-default: transparent;
   --documentviewer-thumbnails-item-background-hover: #e8e8e8;
@@ -1989,7 +2001,7 @@
   --documentviewer-page-background: #ffffff;
   --documentviewer-page-foreground: #000000;
   --documentviewer-page-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.090), 0 2px 4px 0 rgba(0, 0, 0, 0.090);
-  --documentviewer-page-borderRadius: 0.1875rem;
+  --documentviewer-page-borderRadius: 0px;
   --documentviewer-zoom-button-width: 2rem;
   --documentviewer-loading-overlay-background: rgba(0, 0, 0, 0.565);
   --documentviewer-error-background: #e0e0e0;
@@ -2009,7 +2021,7 @@
   --fileupload-dropzone-padding-sm: 1rem;
   --fileupload-dropzone-padding-md: 1.5rem;
   --fileupload-dropzone-padding-lg: 2rem;
-  --fileupload-dropzone-radius: 0.75rem;
+  --fileupload-dropzone-radius: 0px;
   --fileupload-dropzone-border-width: 0.125rem;
   --fileupload-dropzone-border-style: dashed;
   --fileupload-dropzone-gap: 0.75rem;
@@ -2021,10 +2033,10 @@
   --fileupload-item-color-success-foreground: #30a46c;
   --fileupload-item-padding-x: 0.75rem;
   --fileupload-item-padding-y: 0.75rem;
-  --fileupload-item-radius: 0.375rem;
+  --fileupload-item-radius: 0px;
   --fileupload-item-gap: 0.75rem;
   --fileupload-preview-size: 2.5rem;
-  --fileupload-preview-radius: 0.1875rem;
+  --fileupload-preview-radius: 0px;
   --piechart-color-categorical-1: #0091ff;
   --piechart-color-categorical-2: #f76808;
   --piechart-color-categorical-3: #30a46c;
@@ -2068,6 +2080,20 @@
   }
 }
 
+/* Responsive overrides: xl (min-width: 1280px) */
+@media (min-width: 1280px) {
+  :root {
+    --section-padding-vertical-default: 3rem;
+    --section-padding-vertical-compact: 2.5rem;
+    --section-padding-vertical-spacious: 4rem;
+    --section-padding-horizontal-default: 2.5rem;
+    --section-padding-horizontal-compact: 1.5rem;
+    --section-padding-horizontal-spacious: 3rem;
+    --container-gap-default: 2rem;
+    --container-gap-spacious: 3rem;
+  }
+}
+
 /* Layout mode: tablet (forced via data-layout attribute) */
 [data-layout="tablet"] {
   --section-padding-vertical-default: 2.5rem;
@@ -2093,6 +2119,18 @@
   --container-gap-spacious: 3rem;
 }
 
+/* Layout mode: widescreen (forced via data-layout attribute) */
+[data-layout="widescreen"] {
+  --section-padding-vertical-default: 3rem;
+  --section-padding-vertical-compact: 2.5rem;
+  --section-padding-vertical-spacious: 4rem;
+  --section-padding-horizontal-default: 2.5rem;
+  --section-padding-horizontal-compact: 1.5rem;
+  --section-padding-horizontal-spacious: 3rem;
+  --container-gap-default: 2rem;
+  --container-gap-spacious: 3rem;
+}
+
 /* Accessibility: disable motion for users who prefer reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :root {