@mond-design-system/react 1.0.0-alpha.3 → 1.0.0-alpha.4

package/dist/index.css

@@ -1,103 +1,103 @@
-/* src/components/Text/Text.module.css */
-.Text_text {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Text/Text.module.css?mds-scoped */
+.mds-Text__text {
   margin: 0;
 }
-.Text_variant-body {
+.mds-Text__variant-body {
   font: var(--mds-type-body);
 }
-.Text_variant-label {
+.mds-Text__variant-label {
   font: var(--mds-type-label);
 }
-.Text_variant-note {
+.mds-Text__variant-note {
   font: var(--mds-type-note);
 }
-.Text_variant-meta {
+.mds-Text__variant-meta {
   font: var(--mds-type-meta);
 }
-.Text_variant-eyebrow {
+.mds-Text__variant-eyebrow {
   font: var(--mds-type-eyebrow);
   letter-spacing: var(--mds-tracking-eyebrow);
   text-transform: uppercase;
 }
-.Text_tone-primary {
+.mds-Text__tone-primary {
   color: var(--mds-text-primary);
 }
-.Text_tone-secondary {
+.mds-Text__tone-secondary {
   color: var(--mds-text-secondary);
 }
-.Text_tone-muted {
+.mds-Text__tone-muted {
   color: var(--mds-text-muted);
 }
-.Text_tone-inverse {
+.mds-Text__tone-inverse {
   color: var(--mds-text-inverse);
 }
-.Text_tone-accent {
+.mds-Text__tone-accent {
   color: var(--mds-text-accent);
 }
-.Text_tone-on-media {
+.mds-Text__tone-on-media {
   color: var(--mds-text-on-media);
 }
-.Text_tone-danger {
+.mds-Text__tone-danger {
   color: var(--mds-status-danger);
 }
-.Text_tone-warning {
+.mds-Text__tone-warning {
   color: var(--mds-status-warning);
 }
-.Text_tone-success {
+.mds-Text__tone-success {
   color: var(--mds-status-success);
 }
-.Text_align-left {
+.mds-Text__align-left {
   text-align: left;
 }
-.Text_align-center {
+.mds-Text__align-center {
   text-align: center;
 }
-.Text_align-right {
+.mds-Text__align-right {
   text-align: right;
 }
-.Text_truncate {
+.mds-Text__truncate {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-/* src/components/Heading/Heading.module.css */
-.Heading_heading {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Heading/Heading.module.css?mds-scoped */
+.mds-Heading__heading {
   margin: 0;
 }
-.Heading_variant-display {
+.mds-Heading__variant-display {
   font: var(--mds-type-display);
   letter-spacing: var(--mds-tracking-display);
 }
-.Heading_variant-title {
+.mds-Heading__variant-title {
   font: var(--mds-type-title);
 }
-.Heading_variant-subtitle {
+.mds-Heading__variant-subtitle {
   font: var(--mds-type-subtitle);
 }
-.Heading_tone-primary {
+.mds-Heading__tone-primary {
   color: var(--mds-text-primary);
 }
-.Heading_tone-secondary {
+.mds-Heading__tone-secondary {
   color: var(--mds-text-secondary);
 }
-.Heading_tone-inverse {
+.mds-Heading__tone-inverse {
   color: var(--mds-text-inverse);
 }
-.Heading_tone-accent {
+.mds-Heading__tone-accent {
   color: var(--mds-text-accent);
 }
-.Heading_tone-on-media {
+.mds-Heading__tone-on-media {
   color: var(--mds-text-on-media);
 }
 
-/* src/components/Spinner/Spinner.module.css */
-@keyframes Spinner_spin {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Spinner/Spinner.module.css?mds-scoped */
+@keyframes mds-Spinner__spin {
   to {
     transform: rotate(360deg);
   }
 }
-.Spinner_spinner {
+.mds-Spinner__spinner {
   display: inline-block;
   flex: none;
   width: var(--spinner-size);
@@ -105,32 +105,32 @@
   border: var(--spinner-border) solid var(--mds-border-strong);
   border-top-color: currentcolor;
   border-radius: var(--mds-radius-pill);
-  animation: Spinner_spin 0.7s linear infinite;
+  animation: mds-Spinner__spin 0.7s linear infinite;
 }
 
-/* src/components/Icon/Icon.module.css */
-.Icon_icon {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Icon/Icon.module.css?mds-scoped */
+.mds-Icon__icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
   color: inherit;
 }
-.Icon_size-sm {
+.mds-Icon__size-sm {
   width: var(--mds-icon-sm);
   height: var(--mds-icon-sm);
 }
-.Icon_size-md {
+.mds-Icon__size-md {
   width: var(--mds-icon-md);
   height: var(--mds-icon-md);
 }
-.Icon_size-lg {
+.mds-Icon__size-lg {
   width: var(--mds-icon-lg);
   height: var(--mds-icon-lg);
 }
 
-/* src/components/Button/Button.module.css */
-.Button_button {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Button/Button.module.css?mds-scoped */
+.mds-Button__button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -145,126 +145,140 @@
   text-decoration: none;
   transition: background-color var(--mds-transition-control), color var(--mds-transition-control);
 }
-.Button_size-sm {
+.mds-Button__size-sm {
   height: var(--mds-control-h-sm);
   padding: 0 var(--mds-space-3);
   font-size: var(--mds-text-sm);
 }
-.Button_size-md {
+.mds-Button__size-md {
   height: var(--mds-control-h-md);
   padding: 0 var(--mds-space-4);
   font-size: var(--mds-text-base);
 }
-.Button_size-lg {
+.mds-Button__size-lg {
   height: var(--mds-control-h-lg);
   padding: 0 var(--mds-space-5);
   font-size: var(--mds-text-lg);
 }
-.Button_variant-primary {
+.mds-Button__variant-primary {
   background: var(--mds-action-bg);
   color: var(--mds-action-fg);
 }
-.Button_variant-primary:hover:not(:disabled) {
+.mds-Button__variant-primary:hover:not(:disabled) {
   background: var(--mds-action-bg-hover);
 }
-.Button_variant-primary:active:not(:disabled) {
+.mds-Button__variant-primary:active:not(:disabled) {
   background: var(--mds-action-bg-active);
 }
-.Button_variant-secondary {
+.mds-Button__variant-secondary {
   background: transparent;
   color: var(--mds-text-primary);
   border-color: var(--mds-control-border);
 }
-.Button_variant-ghost {
+.mds-Button__variant-ghost {
   background: transparent;
   color: var(--mds-text-primary);
 }
-.Button_variant-secondary:hover:not(:disabled),
-.Button_variant-ghost:hover:not(:disabled) {
+.mds-Button__variant-secondary:hover:not(:disabled),
+.mds-Button__variant-ghost:hover:not(:disabled) {
   background: var(--mds-surface-sunken);
 }
-.Button_variant-highlight {
+.mds-Button__variant-highlight {
   background: var(--mds-highlight);
   color: var(--mds-highlight-contrast);
 }
-.Button_variant-highlight:hover:not(:disabled) {
+.mds-Button__variant-highlight:hover:not(:disabled) {
   background: var(--mds-highlight-hover);
 }
-.Button_variant-danger {
+.mds-Button__variant-danger {
   background: var(--mds-status-danger);
   color: var(--mds-status-danger-contrast);
 }
-.Button_variant-danger:hover:not(:disabled) {
+.mds-Button__variant-danger:hover:not(:disabled) {
   filter: brightness(0.94);
 }
-.Button_button:disabled {
+.mds-Button__variant-warning {
+  background: var(--mds-status-warning);
+  color: var(--mds-status-warning-contrast);
+}
+.mds-Button__variant-warning:hover:not(:disabled) {
+  filter: brightness(0.94);
+}
+.mds-Button__button:disabled {
   background: var(--mds-action-disabled-bg);
   color: var(--mds-action-disabled-fg);
   border-color: transparent;
   cursor: not-allowed;
 }
-.Button_fullWidth {
+.mds-Button__fullWidth {
   width: 100%;
 }
-.Button_icon-only {
+.mds-Button__icon-only {
   padding: 0;
   border-radius: var(--mds-radius-pill);
 }
-.Button_icon-only.Button_size-sm {
+.mds-Button__icon-only.mds-Button__size-sm {
   width: var(--mds-control-h-sm);
 }
-.Button_icon-only.Button_size-md {
+.mds-Button__icon-only.mds-Button__size-md {
   width: var(--mds-control-h-md);
 }
-.Button_icon-only.Button_size-lg {
+.mds-Button__icon-only.mds-Button__size-lg {
   width: var(--mds-control-h-lg);
 }
 
-/* src/components/Link/Link.module.css */
-.Link_link {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Link/Link.module.css?mds-scoped */
+.mds-Link__link {
   color: var(--mds-text-accent);
   border-radius: var(--mds-radius-1);
   transition: color var(--mds-transition-control);
 }
-.Link_variant-inline {
+button.mds-Link__link {
+  border: none;
+  background: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+}
+.mds-Link__variant-inline {
   text-decoration: underline;
   text-underline-offset: 0.15em;
 }
-.Link_variant-standalone {
+.mds-Link__variant-standalone {
   text-decoration: none;
   font-weight: var(--mds-weight-medium);
 }
-.Link_link:hover {
+.mds-Link__link:hover {
   color: var(--mds-accent-hover);
 }
-.Link_variant-plain {
+.mds-Link__variant-plain {
   color: inherit;
   font-weight: inherit;
   text-decoration: none;
 }
-.Link_variant-plain:hover {
+.mds-Link__variant-plain:hover {
   color: inherit;
   text-decoration: underline;
   text-underline-offset: 0.15em;
 }
-.Link_size-xs {
+.mds-Link__size-xs {
   font-size: var(--mds-text-xs);
 }
-.Link_size-sm {
+.mds-Link__size-sm {
   font-size: var(--mds-text-sm);
 }
-.Link_size-base {
+.mds-Link__size-base {
   font-size: var(--mds-text-base);
 }
-.Link_size-lg {
+.mds-Link__size-lg {
   font-size: var(--mds-text-lg);
 }
-.Link_size-xl {
+.mds-Link__size-xl {
   font-size: var(--mds-text-xl);
 }
 
-/* src/components/Avatar/Avatar.module.css */
-.Avatar_avatar {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Avatar/Avatar.module.css?mds-scoped */
+.mds-Avatar__avatar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -277,74 +291,74 @@
   font-weight: var(--mds-weight-semibold);
   user-select: none;
 }
-.Avatar_size-xs {
+.mds-Avatar__size-xs {
   width: var(--mds-avatar-xs);
   height: var(--mds-avatar-xs);
   font-size: var(--mds-text-xs);
 }
-.Avatar_size-sm {
+.mds-Avatar__size-sm {
   width: var(--mds-avatar-sm);
   height: var(--mds-avatar-sm);
   font-size: var(--mds-text-xs);
 }
-.Avatar_size-md {
+.mds-Avatar__size-md {
   width: var(--mds-avatar-md);
   height: var(--mds-avatar-md);
   font-size: var(--mds-text-sm);
 }
-.Avatar_size-lg {
+.mds-Avatar__size-lg {
   width: var(--mds-avatar-lg);
   height: var(--mds-avatar-lg);
   font-size: var(--mds-text-xl);
 }
-.Avatar_size-xl {
+.mds-Avatar__size-xl {
   width: var(--mds-avatar-xl);
   height: var(--mds-avatar-xl);
   font-size: var(--mds-text-2xl);
 }
-.Avatar_tone-1 {
+.mds-Avatar__tone-1 {
   background: var(--mds-avatar-tone-1);
   color: var(--mds-text-primary);
 }
-.Avatar_tone-2 {
+.mds-Avatar__tone-2 {
   background: var(--mds-avatar-tone-2);
   color: var(--mds-text-primary);
 }
-.Avatar_tone-3 {
+.mds-Avatar__tone-3 {
   background: var(--mds-avatar-tone-3);
   color: var(--mds-text-primary);
 }
-.Avatar_tone-4 {
+.mds-Avatar__tone-4 {
   background: var(--mds-avatar-tone-4);
   color: var(--mds-text-primary);
 }
-.Avatar_tone-5 {
+.mds-Avatar__tone-5 {
   background: var(--mds-avatar-tone-5);
   color: var(--mds-text-primary);
 }
-.Avatar_image {
+.mds-Avatar__image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.Avatar_initials {
+.mds-Avatar__initials {
   line-height: 1;
 }
 
-/* src/components/AvatarGroup/AvatarGroup.module.css */
-.AvatarGroup_group {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/AvatarGroup/AvatarGroup.module.css?mds-scoped */
+.mds-AvatarGroup__group {
   display: inline-flex;
   align-items: center;
 }
-.AvatarGroup_item {
+.mds-AvatarGroup__item {
   display: inline-flex;
   border-radius: var(--mds-radius-avatar);
   box-shadow: 0 0 0 var(--mds-focus-width) var(--mds-surface-card);
 }
-.AvatarGroup_item + .AvatarGroup_item {
+.mds-AvatarGroup__item + .mds-AvatarGroup__item {
   margin-left: calc(-1 * var(--mds-space-2));
 }
-.AvatarGroup_overflow {
+.mds-AvatarGroup__overflow {
   align-items: center;
   justify-content: center;
   flex: none;
@@ -354,24 +368,34 @@
   font-weight: var(--mds-weight-semibold);
   user-select: none;
 }
-.AvatarGroup_size-sm {
+.mds-AvatarGroup__size-xs {
+  width: var(--mds-avatar-xs);
+  height: var(--mds-avatar-xs);
+  font-size: var(--mds-text-xs);
+}
+.mds-AvatarGroup__size-sm {
   width: var(--mds-avatar-sm);
   height: var(--mds-avatar-sm);
   font-size: var(--mds-text-xs);
 }
-.AvatarGroup_size-md {
+.mds-AvatarGroup__size-md {
   width: var(--mds-avatar-md);
   height: var(--mds-avatar-md);
   font-size: var(--mds-text-sm);
 }
-.AvatarGroup_size-lg {
+.mds-AvatarGroup__size-lg {
   width: var(--mds-avatar-lg);
   height: var(--mds-avatar-lg);
   font-size: var(--mds-text-xl);
 }
+.mds-AvatarGroup__size-xl {
+  width: var(--mds-avatar-xl);
+  height: var(--mds-avatar-xl);
+  font-size: var(--mds-text-2xl);
+}
 
-/* src/components/Badge/Badge.module.css */
-.Badge_badge {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Badge/Badge.module.css?mds-scoped */
+.mds-Badge__badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -383,33 +407,33 @@
   font-weight: var(--mds-weight-semibold);
   white-space: nowrap;
 }
-.Badge_tone-neutral {
+.mds-Badge__tone-neutral {
   background: var(--mds-surface-sunken);
   color: var(--mds-text-primary);
 }
-.Badge_tone-accent {
+.mds-Badge__tone-accent {
   background: var(--mds-accent-soft);
   color: var(--mds-text-primary);
 }
-.Badge_tone-highlight {
+.mds-Badge__tone-highlight {
   background: var(--mds-highlight);
   color: var(--mds-highlight-contrast);
 }
-.Badge_tone-danger {
+.mds-Badge__tone-danger {
   background: var(--mds-status-danger-soft);
   color: var(--mds-text-primary);
 }
-.Badge_tone-warning {
+.mds-Badge__tone-warning {
   background: var(--mds-status-warning-soft);
   color: var(--mds-text-primary);
 }
-.Badge_tone-success {
+.mds-Badge__tone-success {
   background: var(--mds-status-success-soft);
   color: var(--mds-text-primary);
 }
 
-/* src/components/Chip/Chip.module.css */
-.Chip_chip {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Chip/Chip.module.css?mds-scoped */
+.mds-Chip__chip {
   display: inline-flex;
   align-items: center;
   gap: var(--mds-gap-hairline);
@@ -420,89 +444,89 @@
   cursor: default;
   transition: var(--mds-transition-control);
 }
-.Chip_variant-soft {
+.mds-Chip__variant-soft {
   background: var(--mds-accent-soft);
   border: var(--mds-border-width) solid transparent;
   color: var(--mds-text-accent);
 }
-.Chip_variant-outline {
+.mds-Chip__variant-outline {
   background: transparent;
   border: var(--mds-border-width) solid var(--mds-border-subtle);
   color: var(--mds-text-secondary);
 }
-.Chip_variant-highlight {
+.mds-Chip__variant-highlight {
   background: var(--mds-highlight);
   border: var(--mds-border-width) solid transparent;
   color: var(--mds-highlight-contrast);
 }
-.Chip_selected {
+.mds-Chip__selected {
   background: var(--mds-accent);
   border-color: transparent;
   color: var(--mds-accent-contrast);
 }
-.Chip_interactive {
+.mds-Chip__interactive {
   cursor: pointer;
 }
-.Chip_interactive:not(.Chip_selected):hover {
+.mds-Chip__interactive:not(.mds-Chip__selected):hover {
   filter: brightness(0.97);
 }
-.Chip_disabled {
+.mds-Chip__disabled {
   opacity: 0.5;
 }
 
-/* src/components/Chip/ChipGroup.module.css */
-.ChipGroup_group {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Chip/ChipGroup.module.css?mds-scoped */
+.mds-ChipGroup__group {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.ChipGroup_gap-hairline {
+.mds-ChipGroup__gap-hairline {
   gap: var(--mds-gap-hairline);
 }
-.ChipGroup_gap-tight {
+.mds-ChipGroup__gap-tight {
   gap: var(--mds-gap-tight);
 }
-.ChipGroup_gap-base {
+.mds-ChipGroup__gap-base {
   gap: var(--mds-gap);
 }
 
-/* src/components/Chip/ChipBar.module.css */
-.ChipBar_bar {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Chip/ChipBar.module.css?mds-scoped */
+.mds-ChipBar__bar {
   display: flex;
   align-items: center;
   overflow-x: auto;
   scrollbar-width: none;
   min-width: 0;
 }
-.ChipBar_gap-hairline {
+.mds-ChipBar__gap-hairline {
   gap: var(--mds-gap-hairline);
 }
-.ChipBar_gap-tight {
+.mds-ChipBar__gap-tight {
   gap: var(--mds-gap-tight);
 }
-.ChipBar_gap-base {
+.mds-ChipBar__gap-base {
   gap: var(--mds-gap);
 }
-.ChipBar_bordered {
+.mds-ChipBar__bordered {
   padding: var(--mds-space-1) var(--mds-space-3);
   border-radius: var(--mds-radius-pill);
   border: var(--mds-border-width) solid var(--mds-border-subtle);
   background: var(--mds-surface-sunken);
 }
-.ChipBar_fade {
+.mds-ChipBar__fade {
   mask-image:
     linear-gradient(
       to right,
       black calc(100% - var(--mds-space-6)),
       transparent);
 }
-.ChipBar_item {
+.mds-ChipBar__item {
   flex: none;
   display: flex;
 }
 
-/* src/components/CountButton/CountButton.module.css */
-.CountButton_button {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/CountButton/CountButton.module.css?mds-scoped */
+.mds-CountButton__button {
   display: inline-flex;
   align-items: center;
   gap: var(--mds-gap-hairline);
@@ -516,56 +540,56 @@
   cursor: pointer;
   transition: var(--mds-transition-control);
 }
-.CountButton_button:hover:not(:disabled) {
+.mds-CountButton__button:hover:not(:disabled) {
   background: var(--mds-surface-sunken);
 }
-.CountButton_button:active:not(:disabled) {
+.mds-CountButton__button:active:not(:disabled) {
   background: var(--mds-surface-selected);
 }
-.CountButton_button:disabled {
+.mds-CountButton__button:disabled {
   cursor: default;
   opacity: 0.6;
 }
-.CountButton_tone-accent {
+.mds-CountButton__tone-accent {
   color: var(--mds-accent);
 }
-.CountButton_tone-danger {
+.mds-CountButton__tone-danger {
   color: var(--mds-status-danger);
 }
-.CountButton_glyph {
+.mds-CountButton__glyph {
   display: inline-flex;
   align-items: center;
 }
 
-/* src/components/Field/Field.module.css */
-.Field_field {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Field/Field.module.css?mds-scoped */
+.mds-Field__field {
   display: flex;
   flex-direction: column;
   gap: var(--mds-gap-hairline);
 }
-.Field_label {
+.mds-Field__label {
   font: var(--mds-type-label);
   color: var(--mds-text-primary);
 }
-.Field_required {
+.mds-Field__required {
   color: var(--mds-status-danger);
   margin-left: var(--mds-space-1);
 }
-.Field_message {
+.mds-Field__message {
   font: var(--mds-type-note);
   color: var(--mds-text-secondary);
 }
-.Field_error {
+.mds-Field__error {
   color: var(--mds-status-danger);
 }
 
-/* src/components/Select/Select.module.css */
-.Select_wrap {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Select/Select.module.css?mds-scoped */
+.mds-Select__wrap {
   position: relative;
   display: inline-flex;
   width: 100%;
 }
-.Select_select {
+.mds-Select__select {
   appearance: none;
   width: 100%;
   border: var(--mds-border-width) solid var(--mds-control-border);
@@ -576,30 +600,30 @@
   cursor: pointer;
   transition: border-color var(--mds-transition-control);
 }
-.Select_select:disabled {
+.mds-Select__select:disabled {
   background: var(--mds-action-disabled-bg);
   color: var(--mds-action-disabled-fg);
   cursor: not-allowed;
 }
-.Select_select[aria-invalid=true] {
+.mds-Select__select[aria-invalid=true] {
   border-color: var(--mds-status-danger);
 }
-.Select_size-sm {
+.mds-Select__size-sm {
   height: var(--mds-control-h-sm);
   padding: 0 var(--mds-space-7) 0 var(--mds-space-2);
   font-size: var(--mds-text-sm);
 }
-.Select_size-md {
+.mds-Select__size-md {
   height: var(--mds-control-h-md);
   padding: 0 var(--mds-space-8) 0 var(--mds-space-3);
   font-size: var(--mds-text-base);
 }
-.Select_size-lg {
+.mds-Select__size-lg {
   height: var(--mds-control-h-lg);
   padding: 0 var(--mds-space-8) 0 var(--mds-space-4);
   font-size: var(--mds-text-base);
 }
-.Select_chevron {
+.mds-Select__chevron {
   position: absolute;
   right: var(--mds-space-2);
   top: 50%;
@@ -610,45 +634,47 @@
   pointer-events: none;
 }
 
-/* src/components/Overlay/Overlay.module.css */
-.Overlay_scrim {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Overlay/Overlay.module.css?mds-scoped */
+.mds-Overlay__scrim {
   position: fixed;
   inset: 0;
+  height: var(--mds-vvh, 100dvh);
   display: flex;
   background: var(--mds-scrim);
   opacity: 0;
   transition: opacity var(--mds-dur-base) var(--mds-ease-standard);
 }
-.Overlay_scrim[data-open] {
+.mds-Overlay__scrim[data-open] {
   opacity: 1;
 }
-.Overlay_variant-modal {
+.mds-Overlay__variant-modal {
   z-index: var(--mds-z-modal);
   align-items: center;
   justify-content: center;
   padding: var(--mds-pad-page-x);
 }
-.Overlay_variant-sheet {
+.mds-Overlay__variant-sheet {
   z-index: var(--mds-z-sheet);
   align-items: flex-end;
 }
 
-/* src/components/Sheet/Sheet.module.css */
-.Sheet_panel {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Sheet/Sheet.module.css?mds-scoped */
+.mds-Sheet__panel {
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-height: 85dvh;
+  max-height: 85%;
+  padding-bottom: var(--mds-safe-bottom);
   background: var(--mds-surface-raised);
   border-radius: var(--mds-radius-sheet) var(--mds-radius-sheet) 0 0;
   box-shadow: var(--mds-elevation-sheet);
   transform: translateY(100%);
   transition: var(--mds-transition-sheet);
 }
-.Sheet_panel[data-open] {
+.mds-Sheet__panel[data-open] {
   transform: none;
 }
-.Sheet_header {
+.mds-Sheet__header {
   display: flex;
   align-items: center;
   gap: var(--mds-gap);
@@ -656,21 +682,44 @@
   font: var(--mds-type-subtitle);
   color: var(--mds-text-primary);
 }
-.Sheet_body {
+.mds-Sheet__body {
   flex: 1;
   overflow-y: auto;
   padding: var(--mds-pad-card);
 }
-.Sheet_footer {
+.mds-Sheet__footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--mds-gap);
   padding: 0 var(--mds-pad-card) var(--mds-pad-card);
 }
+.mds-Sheet__headerTitle {
+  flex: 1;
+  min-width: 0;
+}
+.mds-Sheet__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--mds-tap-min);
+  height: var(--mds-tap-min);
+  margin: calc((var(--mds-tap-min) - var(--mds-icon-lg)) / -2);
+  margin-left: 0;
+  border: none;
+  border-radius: var(--mds-radius-pill);
+  background: transparent;
+  color: var(--mds-text-secondary);
+  cursor: pointer;
+}
+.mds-Sheet__closeGlyph {
+  width: var(--mds-icon-sm);
+  height: var(--mds-icon-sm);
+}
 
-/* src/components/DateTimePicker/DateTimePicker.module.css */
-.DateTimePicker_trigger {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/DateTimePicker/DateTimePicker.module.css?mds-scoped */
+.mds-DateTimePicker__trigger {
   display: flex;
   align-items: center;
   gap: var(--mds-gap-tight);
@@ -686,67 +735,67 @@
   cursor: pointer;
   transition: var(--mds-transition-control);
 }
-.DateTimePicker_trigger:disabled {
+.mds-DateTimePicker__trigger:disabled {
   cursor: default;
   opacity: 0.5;
 }
-.DateTimePicker_hasValue {
+.mds-DateTimePicker__hasValue {
   color: var(--mds-text-primary);
 }
-.DateTimePicker_triggerLabel {
+.mds-DateTimePicker__triggerLabel {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.DateTimePicker_glyph {
+.mds-DateTimePicker__glyph {
   flex: none;
   width: var(--mds-icon-sm);
   height: var(--mds-icon-sm);
 }
-.DateTimePicker_timeRow {
+.mds-DateTimePicker__timeRow {
   display: flex;
   align-items: center;
   gap: var(--mds-gap-tight);
   margin-bottom: var(--mds-stack-group);
   color: var(--mds-text-secondary);
 }
-.DateTimePicker_grow {
+.mds-DateTimePicker__grow {
   flex: 1;
 }
-.DateTimePicker_meridiem {
+.mds-DateTimePicker__meridiem {
   flex: none;
 }
-.DateTimePicker_colon {
+.mds-DateTimePicker__colon {
   color: var(--mds-text-muted);
 }
-.DateTimePicker_calendarHeader {
+.mds-DateTimePicker__calendarHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--mds-gap-tight);
 }
-.DateTimePicker_monthLabel {
+.mds-DateTimePicker__monthLabel {
   font: var(--mds-type-subtitle);
   color: var(--mds-text-primary);
 }
-.DateTimePicker_weekdays {
+.mds-DateTimePicker__weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   margin-bottom: var(--mds-space-1);
 }
-.DateTimePicker_weekday {
+.mds-DateTimePicker__weekday {
   text-align: center;
   font: var(--mds-type-meta);
   color: var(--mds-text-muted);
 }
-.DateTimePicker_grid {
+.mds-DateTimePicker__grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   grid-auto-rows: var(--mds-tap-min);
   min-height: calc(6 * var(--mds-tap-min));
   align-items: stretch;
 }
-.DateTimePicker_day {
+.mds-DateTimePicker__day {
   border: none;
   background: transparent;
   border-radius: var(--mds-radius-control);
@@ -755,31 +804,31 @@
   cursor: pointer;
   transition: var(--mds-transition-control);
 }
-.DateTimePicker_day:hover:not(:disabled) {
+.mds-DateTimePicker__day:hover:not(:disabled) {
   background: var(--mds-surface-sunken);
 }
-.DateTimePicker_day:disabled {
+.mds-DateTimePicker__day:disabled {
   color: var(--mds-text-muted);
   opacity: 0.5;
   cursor: default;
 }
-.DateTimePicker_today {
+.mds-DateTimePicker__today {
   font-weight: var(--mds-weight-semibold);
   color: var(--mds-text-accent);
 }
-.DateTimePicker_selected {
+.mds-DateTimePicker__selected {
   background: var(--mds-accent);
   color: var(--mds-accent-contrast);
 }
-.DateTimePicker_selected:hover:not(:disabled) {
+.mds-DateTimePicker__selected:hover:not(:disabled) {
   background: var(--mds-accent-hover);
 }
-.DateTimePicker_outside {
+.mds-DateTimePicker__outside {
   visibility: hidden;
 }
 
-/* src/components/Tag/Tag.module.css */
-.Tag_tag {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Tag/Tag.module.css?mds-scoped */
+.mds-Tag__tag {
   display: inline-flex;
   align-items: center;
   gap: var(--mds-gap-hairline);
@@ -791,12 +840,12 @@
   font: var(--mds-type-label);
   white-space: nowrap;
 }
-.Tag_tone-accent {
+.mds-Tag__tone-accent {
   background: var(--mds-accent-soft);
   border-color: transparent;
   color: var(--mds-text-primary);
 }
-.Tag_remove {
+.mds-Tag__remove {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -810,49 +859,49 @@
   color: inherit;
   cursor: pointer;
 }
-.Tag_remove:hover {
+.mds-Tag__remove:hover {
   background: var(--mds-surface-sunken);
 }
-.Tag_removeGlyph {
+.mds-Tag__removeGlyph {
   width: var(--mds-icon-sm);
   height: var(--mds-icon-sm);
 }
 
-/* src/components/Divider/Divider.module.css */
-.Divider_divider {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Divider/Divider.module.css?mds-scoped */
+.mds-Divider__divider {
   background: var(--mds-border-subtle);
   flex: none;
 }
-.Divider_horizontal {
+.mds-Divider__horizontal {
   height: var(--mds-border-width);
   width: 100%;
 }
-.Divider_vertical {
+.mds-Divider__vertical {
   width: var(--mds-border-width);
   align-self: stretch;
 }
 
-/* src/components/Skeleton/Skeleton.module.css */
-.Skeleton_skeleton {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Skeleton/Skeleton.module.css?mds-scoped */
+.mds-Skeleton__skeleton {
   display: block;
   background: var(--mds-surface-sunken);
-  animation: Skeleton_pulse var(--mds-dur-pulse) var(--mds-ease-standard) infinite;
+  animation: mds-Skeleton__pulse var(--mds-dur-pulse) var(--mds-ease-standard) infinite;
   width: var(--skeleton-w, 100%);
 }
-.Skeleton_variant-text {
+.mds-Skeleton__variant-text {
   height: var(--skeleton-h, 1em);
   border-radius: var(--mds-radius-1);
 }
-.Skeleton_variant-rect {
+.mds-Skeleton__variant-rect {
   height: var(--skeleton-h, var(--mds-space-10));
   border-radius: var(--mds-radius-media);
 }
-.Skeleton_variant-circle {
+.mds-Skeleton__variant-circle {
   width: var(--skeleton-w, var(--mds-avatar-md));
   height: var(--skeleton-h, var(--mds-avatar-md));
   border-radius: var(--mds-radius-pill);
 }
-@keyframes Skeleton_pulse {
+@keyframes mds-Skeleton__pulse {
   0%, 100% {
     opacity: 1;
   }
@@ -861,8 +910,8 @@
   }
 }
 
-/* src/components/ProgressBar/ProgressBar.module.css */
-.ProgressBar_track {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/ProgressBar/ProgressBar.module.css?mds-scoped */
+.mds-ProgressBar__track {
   display: block;
   width: 100%;
   height: var(--mds-space-2);
@@ -870,7 +919,7 @@
   background: var(--mds-surface-sunken);
   overflow: hidden;
 }
-.ProgressBar_fill {
+.mds-ProgressBar__fill {
   display: block;
   height: 100%;
   width: var(--progress, 0%);
@@ -878,11 +927,11 @@
   background: var(--mds-accent);
   transition: width var(--mds-transition-control);
 }
-.ProgressBar_indeterminate .ProgressBar_fill {
+.mds-ProgressBar__indeterminate .mds-ProgressBar__fill {
   width: 40%;
-  animation: ProgressBar_slide var(--mds-dur-pulse) var(--mds-ease-standard) infinite;
+  animation: mds-ProgressBar__slide var(--mds-dur-pulse) var(--mds-ease-standard) infinite;
 }
-@keyframes ProgressBar_slide {
+@keyframes mds-ProgressBar__slide {
   from {
     transform: translateX(-100%);
   }
@@ -891,8 +940,8 @@
   }
 }
 
-/* src/components/Input/Input.module.css */
-.Input_input {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Input/Input.module.css?mds-scoped */
+.mds-Input__input {
   width: 100%;
   border: var(--mds-border-width) solid var(--mds-control-border);
   border-radius: var(--mds-radius-control);
@@ -901,38 +950,38 @@
   font-family: var(--mds-font-body);
   transition: border-color var(--mds-transition-control);
 }
-.Input_input::placeholder {
+.mds-Input__input::placeholder {
   color: var(--mds-text-muted);
 }
-.Input_input:disabled {
+.mds-Input__input:disabled {
   background: var(--mds-action-disabled-bg);
   color: var(--mds-action-disabled-fg);
   cursor: not-allowed;
 }
-.Input_input[aria-invalid=true] {
+.mds-Input__input[aria-invalid=true] {
   border-color: var(--mds-status-danger);
 }
-.Input_size-sm {
+.mds-Input__size-sm {
   height: var(--mds-control-h-sm);
   padding: 0 var(--mds-space-2);
   font-size: var(--mds-text-sm);
 }
-.Input_size-md {
+.mds-Input__size-md {
   height: var(--mds-control-h-md);
   padding: 0 var(--mds-space-3);
   font-size: var(--mds-text-base);
 }
-.Input_size-lg {
+.mds-Input__size-lg {
   height: var(--mds-control-h-lg);
   padding: 0 var(--mds-space-4);
   font-size: var(--mds-text-base);
 }
-.Input_iconWrap {
+.mds-Input__iconWrap {
   position: relative;
   display: block;
   width: 100%;
 }
-.Input_icon {
+.mds-Input__icon {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -940,29 +989,29 @@
   color: var(--mds-text-muted);
   pointer-events: none;
 }
-.Input_iconLeft {
+.mds-Input__iconLeft {
   left: var(--mds-space-3);
 }
-.Input_iconRight {
+.mds-Input__iconRight {
   right: var(--mds-space-3);
 }
-.Input_with-icon-left {
+.mds-Input__with-icon-left {
   padding-left: calc(var(--mds-space-3) + var(--mds-icon-md) + var(--mds-space-2));
 }
-.Input_with-icon-right {
+.mds-Input__with-icon-right {
   padding-right: calc(var(--mds-space-3) + var(--mds-icon-md) + var(--mds-space-2));
 }
 
-/* src/components/PasswordInput/PasswordInput.module.css */
-.PasswordInput_wrap {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/PasswordInput/PasswordInput.module.css?mds-scoped */
+.mds-PasswordInput__wrap {
   position: relative;
   display: block;
 }
-.PasswordInput_input {
+.mds-PasswordInput__input {
   width: 100%;
   padding-right: calc(var(--mds-control-h-md) + var(--mds-space-1));
 }
-.PasswordInput_toggle {
+.mds-PasswordInput__toggle {
   position: absolute;
   top: 0;
   right: 0;
@@ -980,12 +1029,12 @@
   cursor: pointer;
   transition: color var(--mds-transition-control);
 }
-.PasswordInput_toggle:hover {
+.mds-PasswordInput__toggle:hover {
   color: var(--mds-text-primary);
 }
 
-/* src/components/Textarea/Textarea.module.css */
-.Textarea_textarea {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Textarea/Textarea.module.css?mds-scoped */
+.mds-Textarea__textarea {
   width: 100%;
   padding: var(--mds-space-2) var(--mds-space-3);
   border: var(--mds-border-width) solid var(--mds-control-border);
@@ -998,41 +1047,41 @@
   resize: vertical;
   transition: border-color var(--mds-transition-control);
 }
-.Textarea_textarea::placeholder {
+.mds-Textarea__textarea::placeholder {
   color: var(--mds-text-muted);
 }
-.Textarea_textarea:disabled {
+.mds-Textarea__textarea:disabled {
   background: var(--mds-action-disabled-bg);
   color: var(--mds-action-disabled-fg);
   cursor: not-allowed;
   resize: none;
 }
-.Textarea_textarea[aria-invalid=true] {
+.mds-Textarea__textarea[aria-invalid=true] {
   border-color: var(--mds-status-danger);
 }
-.Textarea_wrap {
+.mds-Textarea__wrap {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: var(--mds-gap-hairline);
 }
-.Textarea_count {
+.mds-Textarea__count {
   font: var(--mds-type-meta);
   color: var(--mds-text-muted);
 }
 
-/* src/components/Checkbox/Checkbox.module.css */
-.Checkbox_root {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Checkbox/Checkbox.module.css?mds-scoped */
+.mds-Checkbox__root {
   display: inline-flex;
   align-items: center;
   gap: var(--mds-gap-tight);
   cursor: pointer;
   min-height: var(--mds-tap-min);
 }
-.Checkbox_root:has(.Checkbox_box:disabled) {
+.mds-Checkbox__root:has(.mds-Checkbox__box:disabled) {
   cursor: not-allowed;
 }
-.Checkbox_box {
+.mds-Checkbox__box {
   appearance: none;
   flex: none;
   margin: 0;
@@ -1047,11 +1096,11 @@
   cursor: inherit;
   transition: var(--mds-transition-control);
 }
-.Checkbox_box:checked {
+.mds-Checkbox__box:checked {
   background: var(--mds-action-bg);
   border-color: var(--mds-action-bg);
 }
-.Checkbox_box:checked::after {
+.mds-Checkbox__box:checked::after {
   content: "";
   width: 0.32em;
   height: 0.6em;
@@ -1060,33 +1109,33 @@
   border-width: 0 calc(var(--mds-border-width) * 2) calc(var(--mds-border-width) * 2) 0;
   transform: rotate(45deg);
 }
-.Checkbox_box:disabled {
+.mds-Checkbox__box:disabled {
   background: var(--mds-action-disabled-bg);
   border-color: var(--mds-border-strong);
 }
-.Checkbox_box:disabled:checked::after {
+.mds-Checkbox__box:disabled:checked::after {
   border-color: var(--mds-action-disabled-fg);
 }
-.Checkbox_label {
+.mds-Checkbox__label {
   font: var(--mds-type-label);
   color: var(--mds-text-primary);
 }
-.Checkbox_box:disabled ~ .Checkbox_label {
+.mds-Checkbox__box:disabled ~ .mds-Checkbox__label {
   color: var(--mds-action-disabled-fg);
 }
 
-/* src/components/Radio/Radio.module.css */
-.Radio_root {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Radio/Radio.module.css?mds-scoped */
+.mds-Radio__root {
   display: inline-flex;
   align-items: center;
   gap: var(--mds-gap-tight);
   cursor: pointer;
   min-height: var(--mds-tap-min);
 }
-.Radio_root:has(.Radio_dot:disabled) {
+.mds-Radio__root:has(.mds-Radio__dot:disabled) {
   cursor: not-allowed;
 }
-.Radio_dot {
+.mds-Radio__dot {
   appearance: none;
   flex: none;
   margin: 0;
@@ -1100,43 +1149,43 @@
   cursor: inherit;
   transition: var(--mds-transition-control);
 }
-.Radio_dot:checked {
+.mds-Radio__dot:checked {
   border-color: var(--mds-action-bg);
 }
-.Radio_dot:checked::after {
+.mds-Radio__dot:checked::after {
   content: "";
   width: 50%;
   height: 50%;
   border-radius: var(--mds-radius-pill);
   background: var(--mds-action-bg);
 }
-.Radio_dot:disabled {
+.mds-Radio__dot:disabled {
   background: var(--mds-action-disabled-bg);
   border-color: var(--mds-border-strong);
 }
-.Radio_dot:disabled:checked::after {
+.mds-Radio__dot:disabled:checked::after {
   background: var(--mds-action-disabled-fg);
 }
-.Radio_label {
+.mds-Radio__label {
   font: var(--mds-type-label);
   color: var(--mds-text-primary);
 }
-.Radio_dot:disabled ~ .Radio_label {
+.mds-Radio__dot:disabled ~ .mds-Radio__label {
   color: var(--mds-action-disabled-fg);
 }
 
-/* src/components/Switch/Switch.module.css */
-.Switch_root {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Switch/Switch.module.css?mds-scoped */
+.mds-Switch__root {
   display: inline-flex;
   align-items: center;
   gap: var(--mds-gap-tight);
   cursor: pointer;
   min-height: var(--mds-tap-min);
 }
-.Switch_root:has(.Switch_track:disabled) {
+.mds-Switch__root:has(.mds-Switch__track:disabled) {
   cursor: not-allowed;
 }
-.Switch_track {
+.mds-Switch__track {
   appearance: none;
   flex: none;
   margin: 0;
@@ -1148,7 +1197,7 @@
   cursor: inherit;
   transition: background-color var(--mds-transition-control);
 }
-.Switch_track::after {
+.mds-Switch__track::after {
   content: "";
   position: absolute;
   top: 50%;
@@ -1160,24 +1209,24 @@
   background: var(--mds-surface-card);
   transition: transform var(--mds-transition-control);
 }
-.Switch_track:checked {
+.mds-Switch__track:checked {
   background: var(--mds-action-bg);
 }
-.Switch_track:checked::after {
+.mds-Switch__track:checked::after {
   transform: translateY(-50%) translateX(calc(var(--mds-switch-w) - var(--mds-switch-knob) - 2 * var(--mds-space-1)));
 }
-.Switch_track:disabled {
+.mds-Switch__track:disabled {
   background: var(--mds-action-disabled-bg);
 }
-.Switch_track:disabled::after {
+.mds-Switch__track:disabled::after {
   background: var(--mds-action-disabled-fg);
 }
-.Switch_trackWrap {
+.mds-Switch__trackWrap {
   position: relative;
   display: inline-flex;
   flex: none;
 }
-.Switch_spinner {
+.mds-Switch__spinner {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -1185,28 +1234,28 @@
   color: var(--mds-text-secondary);
   pointer-events: none;
 }
-.Switch_label {
+.mds-Switch__label {
   font: var(--mds-type-label);
   color: var(--mds-text-primary);
 }
-.Switch_root:has(.Switch_track:disabled) .Switch_label {
+.mds-Switch__root:has(.mds-Switch__track:disabled) .mds-Switch__label {
   color: var(--mds-action-disabled-fg);
 }
 
-/* src/components/SegmentedControl/SegmentedControl.module.css */
-.SegmentedControl_group {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SegmentedControl/SegmentedControl.module.css?mds-scoped */
+.mds-SegmentedControl__group {
   display: inline-flex;
   padding: var(--mds-space-1);
   gap: var(--mds-space-1);
   background: var(--mds-surface-sunken);
   border-radius: var(--mds-radius-control);
 }
-.SegmentedControl_segment {
+.mds-SegmentedControl__segment {
   display: inline-flex;
   position: relative;
   cursor: pointer;
 }
-.SegmentedControl_input {
+.mds-SegmentedControl__input {
   appearance: none;
   margin: 0;
   position: absolute;
@@ -1216,7 +1265,7 @@
   opacity: 0;
   cursor: inherit;
 }
-.SegmentedControl_face {
+.mds-SegmentedControl__face {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1228,35 +1277,35 @@
   white-space: nowrap;
   transition: var(--mds-transition-control);
 }
-.SegmentedControl_input:checked + .SegmentedControl_face {
+.mds-SegmentedControl__input:checked + .mds-SegmentedControl__face {
   background: var(--mds-surface-card);
   color: var(--mds-text-primary);
   box-shadow: var(--mds-elevation-card);
 }
-.SegmentedControl_input:disabled + .SegmentedControl_face {
+.mds-SegmentedControl__input:disabled + .mds-SegmentedControl__face {
   color: var(--mds-action-disabled-fg);
   cursor: not-allowed;
 }
-.SegmentedControl_input:disabled:checked + .SegmentedControl_face {
+.mds-SegmentedControl__input:disabled:checked + .mds-SegmentedControl__face {
   background: var(--mds-action-disabled-bg);
   box-shadow: none;
 }
-.SegmentedControl_segment:has(.SegmentedControl_input:disabled) {
+.mds-SegmentedControl__segment:has(.mds-SegmentedControl__input:disabled) {
   cursor: not-allowed;
 }
-.SegmentedControl_input:focus-visible + .SegmentedControl_face {
+.mds-SegmentedControl__input:focus-visible + .mds-SegmentedControl__face {
   outline: var(--mds-focus-width) solid var(--mds-focus-ring-color);
   outline-offset: var(--mds-focus-offset);
 }
 
-/* src/components/SearchField/SearchField.module.css */
-.SearchField_wrap {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SearchField/SearchField.module.css?mds-scoped */
+.mds-SearchField__wrap {
   position: relative;
   display: inline-flex;
   align-items: center;
   width: 100%;
 }
-.SearchField_glass {
+.mds-SearchField__glass {
   position: absolute;
   left: var(--mds-space-3);
   width: var(--mds-icon-sm);
@@ -1264,7 +1313,7 @@
   color: var(--mds-text-muted);
   pointer-events: none;
 }
-.SearchField_input {
+.mds-SearchField__input {
   width: 100%;
   height: var(--mds-control-h-md);
   padding: 0 var(--mds-space-9) 0 var(--mds-space-8);
@@ -1276,13 +1325,13 @@
   font-size: var(--mds-text-base);
   transition: border-color var(--mds-transition-control);
 }
-.SearchField_input::placeholder {
+.mds-SearchField__input::placeholder {
   color: var(--mds-text-muted);
 }
-.SearchField_input::-webkit-search-cancel-button {
+.mds-SearchField__input::-webkit-search-cancel-button {
   display: none;
 }
-.SearchField_clear {
+.mds-SearchField__clear {
   position: absolute;
   right: var(--mds-space-2);
   display: inline-flex;
@@ -1296,16 +1345,16 @@
   color: var(--mds-text-secondary);
   cursor: pointer;
 }
-.SearchField_clear:hover {
+.mds-SearchField__clear:hover {
   background: var(--mds-surface-sunken);
 }
-.SearchField_clearGlyph {
+.mds-SearchField__clearGlyph {
   width: var(--mds-icon-sm);
   height: var(--mds-icon-sm);
 }
 
-/* src/components/List/List.module.css */
-.List_group {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/List/List.module.css?mds-scoped */
+.mds-List__group {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -1314,32 +1363,45 @@
   border-radius: var(--mds-radius-card);
   overflow: hidden;
 }
-.List_group > .List_item + .List_item {
+.mds-List__labelledGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-space-2);
+}
+.mds-List__label {
+  padding-inline: var(--mds-pad-card);
+  font-weight: var(--mds-weight-semibold);
+  font-size: var(--mds-text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--mds-text-secondary);
+}
+.mds-List__group > .mds-List__item + .mds-List__item {
   border-top: var(--mds-border-width) solid var(--mds-border-subtle);
 }
-.List_surface-card,
-.List_surface-sunken,
-.List_surface-accent {
+.mds-List__surface-card,
+.mds-List__surface-sunken,
+.mds-List__surface-accent {
   border: var(--mds-border-width) solid var(--mds-border-subtle);
   border-radius: var(--mds-radius-card);
 }
-.List_surface-card {
+.mds-List__surface-card {
   background: var(--mds-surface-card);
 }
-.List_surface-sunken {
+.mds-List__surface-sunken {
   background: var(--mds-surface-sunken);
 }
-.List_surface-accent {
+.mds-List__surface-accent {
   border-left-width: var(--mds-edge-width);
   border-left-color: var(--mds-accent);
   background: var(--mds-accent-soft);
 }
-.List_surface-plain {
+.mds-List__surface-plain {
   background: transparent;
   border: 0;
   border-radius: 0;
 }
-.List_row {
+.mds-List__row {
   display: flex;
   align-items: center;
   gap: var(--mds-gap);
@@ -1350,40 +1412,40 @@
   color: inherit;
   text-decoration: none;
 }
-.List_interactive {
+.mds-List__interactive {
   border: none;
   background: transparent;
   font: inherit;
   cursor: pointer;
   transition: background-color var(--mds-transition-control);
 }
-.List_interactive:hover {
+.mds-List__interactive:hover {
   background: var(--mds-surface-sunken);
 }
-.List_leading,
-.List_trailing {
+.mds-List__leading,
+.mds-List__trailing {
   display: inline-flex;
   flex: none;
   align-items: center;
 }
-.List_text {
+.mds-List__text {
   display: flex;
   flex-direction: column;
   gap: var(--mds-gap-hairline);
   min-width: 0;
   flex: 1;
 }
-.List_title {
+.mds-List__title {
   font: var(--mds-type-label);
   color: var(--mds-text-primary);
 }
-.List_description {
+.mds-List__description {
   font: var(--mds-type-note);
   color: var(--mds-text-secondary);
 }
 
-/* src/components/EmptyState/EmptyState.module.css */
-.EmptyState_root {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/EmptyState/EmptyState.module.css?mds-scoped */
+.mds-EmptyState__root {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1391,21 +1453,21 @@
   gap: var(--mds-stack-item);
   padding: var(--mds-space-10) var(--mds-pad-card);
 }
-.EmptyState_icon {
+.mds-EmptyState__icon {
   display: inline-flex;
   color: var(--mds-text-muted);
 }
-.EmptyState_action {
+.mds-EmptyState__action {
   margin-top: var(--mds-space-2);
 }
 
-/* src/components/Tabs/Tabs.module.css */
-.Tabs_list {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Tabs/Tabs.module.css?mds-scoped */
+.mds-Tabs__list {
   display: flex;
   gap: var(--mds-space-1);
   border-bottom: var(--mds-border-width) solid var(--mds-border-subtle);
 }
-.Tabs_tab {
+.mds-Tabs__tab {
   border: none;
   background: transparent;
   padding: var(--mds-space-2) var(--mds-space-3);
@@ -1417,21 +1479,21 @@
   white-space: nowrap;
   transition: color var(--mds-transition-control);
 }
-.Tabs_tab:hover {
+.mds-Tabs__tab:hover {
   color: var(--mds-text-primary);
 }
-.Tabs_selected {
+.mds-Tabs__selected {
   color: var(--mds-text-primary);
   border-bottom-color: var(--mds-accent);
 }
-.Tabs_panel {
+.mds-Tabs__panel {
   padding-top: var(--mds-stack-item);
 }
 
-/* src/components/Toast/Toast.module.css */
-.Toast_viewport {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Toast/Toast.module.css?mds-scoped */
+.mds-Toast__viewport {
   position: fixed;
-  bottom: var(--mds-space-4);
+  bottom: calc(var(--mds-space-4) + var(--mds-safe-bottom));
   left: 50%;
   transform: translateX(-50%);
   z-index: var(--mds-z-toast);
@@ -1441,7 +1503,7 @@
   width: min(var(--mds-modal-w), calc(100vw - 2 * var(--mds-space-4)));
   pointer-events: none;
 }
-.Toast_toast {
+.mds-Toast__toast {
   display: flex;
   align-items: flex-start;
   gap: var(--mds-gap);
@@ -1452,28 +1514,28 @@
   box-shadow: var(--mds-elevation-modal);
   pointer-events: auto;
 }
-.Toast_tone-success {
+.mds-Toast__tone-success {
   border-left-color: var(--mds-status-success);
 }
-.Toast_tone-danger {
+.mds-Toast__tone-danger {
   border-left-color: var(--mds-status-danger);
 }
-.Toast_body {
+.mds-Toast__body {
   display: flex;
   flex-direction: column;
   gap: var(--mds-gap-hairline);
   flex: 1;
   min-width: 0;
 }
-.Toast_title {
+.mds-Toast__title {
   font: var(--mds-type-label);
   color: var(--mds-text-primary);
 }
-.Toast_description {
+.mds-Toast__description {
   font: var(--mds-type-note);
   color: var(--mds-text-secondary);
 }
-.Toast_close {
+.mds-Toast__close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1486,107 +1548,107 @@
   color: var(--mds-text-secondary);
   cursor: pointer;
 }
-.Toast_close:hover {
+.mds-Toast__close:hover {
   background: var(--mds-surface-sunken);
 }
-.Toast_closeGlyph {
+.mds-Toast__closeGlyph {
   width: var(--mds-icon-sm);
   height: var(--mds-icon-sm);
 }
 
-/* src/components/Stack/Stack.module.css */
-.Stack_stack {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Stack/Stack.module.css?mds-scoped */
+.mds-Stack__stack {
   display: flex;
   flex-direction: column;
 }
-.Stack_gap-hairline {
+.mds-Stack__gap-hairline {
   gap: var(--mds-gap-hairline);
 }
-.Stack_gap-tight {
+.mds-Stack__gap-tight {
   gap: var(--mds-gap-tight);
 }
-.Stack_gap-base {
+.mds-Stack__gap-base {
   gap: var(--mds-gap);
 }
-.Stack_gap-loose {
+.mds-Stack__gap-loose {
   gap: var(--mds-gap-loose);
 }
-.Stack_gap-section {
+.mds-Stack__gap-section {
   gap: var(--mds-stack-section);
 }
-.Stack_align-start {
+.mds-Stack__align-start {
   align-items: flex-start;
 }
-.Stack_align-center {
+.mds-Stack__align-center {
   align-items: center;
 }
-.Stack_align-end {
+.mds-Stack__align-end {
   align-items: flex-end;
 }
-.Stack_align-stretch {
+.mds-Stack__align-stretch {
   align-items: stretch;
 }
 
-/* src/components/Inline/Inline.module.css */
-.Inline_inline {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Inline/Inline.module.css?mds-scoped */
+.mds-Inline__inline {
   display: flex;
   flex-direction: row;
 }
-.Inline_gap-hairline {
+.mds-Inline__gap-hairline {
   gap: var(--mds-gap-hairline);
 }
-.Inline_gap-tight {
+.mds-Inline__gap-tight {
   gap: var(--mds-gap-tight);
 }
-.Inline_gap-base {
+.mds-Inline__gap-base {
   gap: var(--mds-gap);
 }
-.Inline_gap-loose {
+.mds-Inline__gap-loose {
   gap: var(--mds-gap-loose);
 }
-.Inline_align-start {
+.mds-Inline__align-start {
   align-items: flex-start;
 }
-.Inline_align-center {
+.mds-Inline__align-center {
   align-items: center;
 }
-.Inline_align-end {
+.mds-Inline__align-end {
   align-items: flex-end;
 }
-.Inline_align-baseline {
+.mds-Inline__align-baseline {
   align-items: baseline;
 }
-.Inline_justify-start {
+.mds-Inline__justify-start {
   justify-content: flex-start;
 }
-.Inline_justify-center {
+.mds-Inline__justify-center {
   justify-content: center;
 }
-.Inline_justify-end {
+.mds-Inline__justify-end {
   justify-content: flex-end;
 }
-.Inline_justify-between {
+.mds-Inline__justify-between {
   justify-content: space-between;
 }
-.Inline_wrap {
+.mds-Inline__wrap {
   flex-wrap: wrap;
 }
 
-/* src/components/Container/Container.module.css */
-.Container_container {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Container/Container.module.css?mds-scoped */
+.mds-Container__container {
   width: 100%;
   margin-inline: auto;
   padding-inline: var(--mds-pad-page-x);
 }
-.Container_width-content {
+.mds-Container__width-content {
   max-width: var(--mds-content-max);
 }
-.Container_width-wide {
+.mds-Container__width-wide {
   max-width: var(--mds-content-max-wide);
 }
 
-/* src/components/Card/Card.module.css */
-.Card_card {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Card/Card.module.css?mds-scoped */
+.mds-Card__card {
   display: flex;
   flex-direction: column;
   background: var(--mds-surface-card);
@@ -1596,12 +1658,18 @@
   color: inherit;
   text-decoration: none;
 }
-.Card_variant-raised {
+.mds-Card__variant-raised {
   border-color: transparent;
   background: var(--mds-surface-raised);
   box-shadow: var(--mds-elevation-raised);
 }
-.Card_interactive {
+.mds-Card__variant-sunken {
+  background: var(--mds-surface-sunken);
+}
+.mds-Card__emphasis {
+  border: var(--mds-border-emphasis) solid var(--mds-accent);
+}
+.mds-Card__interactive {
   padding: 0;
   margin: 0;
   font: inherit;
@@ -1609,10 +1677,10 @@
   cursor: pointer;
   transition: box-shadow var(--mds-transition-surface), background-color var(--mds-transition-surface);
 }
-.Card_interactive:hover {
+.mds-Card__interactive:hover {
   box-shadow: var(--mds-elevation-hover);
 }
-.Card_header {
+.mds-Card__header {
   display: flex;
   align-items: center;
   gap: var(--mds-gap);
@@ -1620,19 +1688,19 @@
   font: var(--mds-type-subtitle);
   color: var(--mds-text-primary);
 }
-.Card_body {
+.mds-Card__body {
   flex: 1;
   padding: var(--mds-pad-card);
 }
-.Card_footer {
+.mds-Card__footer {
   display: flex;
   align-items: center;
   gap: var(--mds-gap);
   padding: 0 var(--mds-pad-card) var(--mds-pad-card);
 }
 
-/* src/components/Modal/Modal.module.css */
-.Modal_panel {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Modal/Modal.module.css?mds-scoped */
+.mds-Modal__panel {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -1645,11 +1713,11 @@
   transform: scale(0.96);
   transition: opacity var(--mds-dur-base) var(--mds-ease-standard), transform var(--mds-dur-base) var(--mds-ease-standard);
 }
-.Modal_panel[data-open] {
+.mds-Modal__panel[data-open] {
   opacity: 1;
   transform: none;
 }
-.Modal_header {
+.mds-Modal__header {
   display: flex;
   align-items: center;
   gap: var(--mds-gap);
@@ -1657,12 +1725,12 @@
   font: var(--mds-type-subtitle);
   color: var(--mds-text-primary);
 }
-.Modal_body {
+.mds-Modal__body {
   flex: 1;
   overflow-y: auto;
   padding: var(--mds-pad-card);
 }
-.Modal_footer {
+.mds-Modal__footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -1670,28 +1738,38 @@
   padding: 0 var(--mds-pad-card) var(--mds-pad-card);
 }
 
-/* src/components/ConfirmDialog/ConfirmDialog.module.css */
-.ConfirmDialog_description {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/ConfirmDialog/ConfirmDialog.module.css?mds-scoped */
+.mds-ConfirmDialog__description {
   margin: 0;
   font: var(--mds-type-body);
   color: var(--mds-text-secondary);
 }
+.mds-ConfirmDialog__error {
+  margin: 0;
+  font: var(--mds-type-body);
+  color: var(--mds-status-danger);
+}
 
-/* src/components/Screen/Screen.module.css */
-.Screen_screen {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Screen/Screen.module.css?mds-scoped */
+.mds-Screen__screen {
   display: flex;
   flex-direction: column;
-  min-height: 100dvh;
+  height: 100%;
+  min-height: 0;
   background: var(--mds-surface-page);
 }
-.Screen_content {
+.mds-Screen__content {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: var(--mds-pad-page-y) var(--mds-pad-page-x);
 }
+.mds-Screen__content.mds-Screen__flush {
+  padding: 0;
+}
 
-/* src/components/AppBar/AppBar.module.css */
-.AppBar_bar {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/AppBar/AppBar.module.css?mds-scoped */
+.mds-AppBar__bar {
   position: sticky;
   top: 0;
   z-index: var(--mds-z-header);
@@ -1703,7 +1781,7 @@
   background: var(--mds-surface-page);
   border-bottom: var(--mds-border-width) solid var(--mds-border-subtle);
 }
-.AppBar_title {
+.mds-AppBar__title {
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -1713,14 +1791,31 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.AppBar_slot {
+.mds-AppBar__text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.mds-AppBar__text .mds-AppBar__title {
+  flex: none;
+}
+.mds-AppBar__subtitle {
+  min-width: 0;
+  overflow: hidden;
+  font: var(--mds-type-note);
+  color: var(--mds-text-secondary);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.mds-AppBar__slot {
   display: flex;
   align-items: center;
   gap: var(--mds-gap-hairline);
 }
 
-/* src/components/TabBar/TabBar.module.css */
-.TabBar_bar {
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/TabBar/TabBar.module.css?mds-scoped */
+.mds-TabBar__bar {
   position: sticky;
   bottom: 0;
   z-index: var(--mds-z-tabbar);
@@ -1729,9 +1824,9 @@
   height: var(--mds-tabbar-h);
   background: var(--mds-surface-page);
   border-top: var(--mds-border-width) solid var(--mds-border-subtle);
-  padding-bottom: env(safe-area-inset-bottom);
+  padding-bottom: var(--mds-safe-bottom);
 }
-.TabBar_item {
+.mds-TabBar__item {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -1748,17 +1843,48 @@
   text-decoration: none;
   transition: color var(--mds-transition-control);
 }
-.TabBar_item:hover {
+.mds-TabBar__item:hover {
   color: var(--mds-text-secondary);
 }
-.TabBar_active,
-.TabBar_active:hover {
+.mds-TabBar__active,
+.mds-TabBar__active:hover {
   color: var(--mds-text-accent);
 }
-.TabBar_icon {
+.mds-TabBar__icon {
+  position: relative;
   display: inline-flex;
 }
-.TabBar_label {
+.mds-TabBar__badge {
+  position: absolute;
+  top: var(--mds-dot-offset-y);
+  right: var(--mds-dot-offset-x);
+  width: var(--mds-dot);
+  height: var(--mds-dot);
+  border-radius: var(--mds-radius-pill);
+  background: var(--mds-status-danger);
+  box-shadow: 0 0 0 var(--mds-dot-ring) var(--mds-surface-page);
+}
+.mds-TabBar__label {
   line-height: 1;
 }
+.mds-TabBar__action {
+  flex: none;
+  align-self: flex-start;
+  width: var(--mds-tabbar-action);
+  height: var(--mds-tabbar-action);
+  margin-top: calc(-1 * var(--mds-tabbar-action-lift));
+  border: none;
+  border-radius: var(--mds-radius-pill);
+  background: var(--mds-accent);
+  color: var(--mds-accent-contrast);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--mds-elevation-raised);
+  cursor: pointer;
+  transition: background-color var(--mds-transition-control);
+}
+.mds-TabBar__action:hover {
+  background: var(--mds-accent-hover);
+}
 /*# sourceMappingURL=index.css.map */