@mezzanine-ui/core 1.0.0-beta.5 → 1.0.0-beta.6

package/_styles.scss

@@ -28,7 +28,6 @@
 
   // Utility
   @include _load-styles($options, backdrop);
-  @include _load-styles($options, popover);
   @include _load-styles($options, tooltip);
   @include _load-styles($options, calendar);
   @include _load-styles($options, time-panel);
@@ -49,7 +48,6 @@
   @include _load-styles($options, pagination);
   @include _load-styles($options, drawer);
   @include _load-styles($options, navigation);
-  @include _load-styles($options, app-bar);
   @include _load-styles($options, page-footer);
   @include _load-styles($options, page-header);
   @include _load-styles($options, content-header);
@@ -65,6 +63,7 @@
   @include _load-styles($options, tree);
   @include _load-styles($options, table);
   @include _load-styles($options, inline-message);
+  @include _load-styles($options, section);
 
   // Data Entry
   @include _load-styles($options, checkbox);
@@ -80,8 +79,8 @@
   @include _load-styles($options, upload, upload-item);
   @include _load-styles($options, upload, upload-picture-card);
   @include _load-styles($options, picker);
-  @include _load-styles($options, date-range-picker);
-  @include _load-styles($options, date-time-picker);
+  @include _load-styles($options, multiple-date-picker);
+  @include _load-styles($options, date-time-range-picker);
   @include _load-styles($options, slider);
   @include _load-styles($options, dropdown);
 
@@ -95,7 +94,6 @@
   @include _load-styles($options, message);
   @include _load-styles($options, modal);
   @include _load-styles($options, notification-center);
-  @include _load-styles($options, popconfirm);
   @include _load-styles($options, progress);
   @include _load-styles($options, spin);
   @include _load-styles($options, skeleton);

package/autocomplete/_autocomplete-styles.scss

@@ -1,9 +1,18 @@
 @use '../select/select' as select;
 @use './autocomplete' as *;
+@use '~@mezzanine-ui/system/spacing' as spacing;
 
 .#{$prefix} {
   position: relative;
 
+  &--single {
+    min-width: spacing.semantic-variable(size, container, snug);
+  }
+
+  &--multiple {
+    min-width: spacing.semantic-variable(size, container, slim);
+  }
+
   &--full-width {
     width: 100%;
   }

package/autocomplete/autocomplete.d.ts

@@ -8,4 +8,5 @@ export declare const autocompleteClasses: {
     readonly host: "mzn-autocomplete";
     readonly hostFullWidth: "mzn-autocomplete--full-width";
     readonly hostInsideClosed: "mzn-autocomplete--inside-closed";
+    readonly hostMode: (mode: AutoCompleteMode) => string;
 };

package/autocomplete/autocomplete.js

@@ -3,6 +3,7 @@ const autocompleteClasses = {
     host: autocompletePrefix,
     hostFullWidth: `${autocompletePrefix}--full-width`,
     hostInsideClosed: `${autocompletePrefix}--inside-closed`,
+    hostMode: (mode) => `${autocompletePrefix}--${mode}`,
 };
 
 export { autocompleteClasses, autocompletePrefix };

package/breadcrumb/_breadcrumb-styles.scss

@@ -45,9 +45,7 @@
     width: spacing.semantic-variable(size, container, tight);
 
     &__content {
-      margin: spacing.semantic-variable(padding, vertical, tight) 0;
       background-color: palette.semantic-variable('background', base);
-      padding: 0 spacing.semantic-variable(padding, horizontal, tight);
       width: 100%;
       display: grid;
     }
@@ -119,6 +117,10 @@
     &:focus-visible {
       box-shadow: effect.variable(focus, primary);
     }
+
+    &:hover {
+      background-color: palette.semantic-variable('background', neutral-faint);
+    }
   }
 
   &__icon {

package/calendar/_calendar-styles.scss

@@ -350,6 +350,7 @@
 }
 
 .#{$footer-actions-prefix} {
+  box-sizing: border-box;
   width: 100%;
   border-top: 1px solid palette.semantic-variable(separator, neutral-faint);
   padding: spacing.semantic-variable(padding, vertical, base) spacing.semantic-variable(padding, horizontal, comfort);

package/date-time-range-picker/_date-time-range-picker-styles.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use '~@mezzanine-ui/system/spacing';
+@use '~@mezzanine-ui/system/palette';
+@use './date-time-range-picker' as *;
+
+.#{$prefix} {
+  display: inline-flex;
+  align-items: center;
+  gap: spacing.semantic-variable(gap, base);
+
+  &--row {
+    flex-direction: row;
+  }
+
+  &--column {
+    flex-direction: column;
+  }
+
+  &__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: palette.semantic-variable(icon, neutral-light);
+  }
+}

package/date-time-range-picker/_date-time-range-picker.scss

@@ -0,0 +1 @@
+$prefix: mzn-date-time-range-picker;

package/date-time-range-picker/_index.scss

@@ -0,0 +1 @@
+@forward './date-time-range-picker';

package/date-time-range-picker/dateTimeRangePicker.d.ts

@@ -0,0 +1,7 @@
+export declare const dateTimeRangePickerPrefix = "mzn-date-time-range-picker";
+export declare const dateTimeRangePickerClasses: {
+    readonly host: "mzn-date-time-range-picker";
+    readonly row: "mzn-date-time-range-picker--row";
+    readonly column: "mzn-date-time-range-picker--column";
+    readonly arrow: "mzn-date-time-range-picker__arrow";
+};

package/date-time-range-picker/dateTimeRangePicker.js

@@ -0,0 +1,9 @@
+const dateTimeRangePickerPrefix = 'mzn-date-time-range-picker';
+const dateTimeRangePickerClasses = {
+    host: dateTimeRangePickerPrefix,
+    row: `${dateTimeRangePickerPrefix}--row`,
+    column: `${dateTimeRangePickerPrefix}--column`,
+    arrow: `${dateTimeRangePickerPrefix}__arrow`,
+};
+
+export { dateTimeRangePickerClasses, dateTimeRangePickerPrefix };

package/date-time-range-picker/index.d.ts

@@ -0,0 +1 @@
+export { dateTimeRangePickerPrefix, dateTimeRangePickerClasses, } from './dateTimeRangePicker';

package/date-time-range-picker/index.js

@@ -0,0 +1 @@
+export { dateTimeRangePickerClasses, dateTimeRangePickerPrefix } from './dateTimeRangePicker.js';

package/drawer/_drawer-styles.scss

@@ -5,7 +5,6 @@
 @use '~@mezzanine-ui/system/spacing';
 @use '~@mezzanine-ui/system/radius';
 
-@use '../app-bar';
 @use './drawer' as *;
 
 $drawer-size: 256px !default;
@@ -70,11 +69,24 @@ $drawer-size-config: (
     }
   }
 
+  &__control-bar {
+    align-items: center;
+    border-block-end: 1px solid palette.semantic-variable(separator, neutral-faint);
+    display: flex;
+    justify-content: space-between;
+    padding-block: spacing.semantic-variable(padding, vertical, base) spacing.semantic-variable(padding, vertical, comfort);
+    padding-inline: spacing.semantic-variable(padding, horizontal, spacious);
+
+    &--button-only {
+      justify-content: flex-end;
+    }
+  }
+
   &__content {
+    flex-grow: 1;
+    overflow: auto;
     padding-block: spacing.semantic-variable(padding, vertical, comfort);
     padding-inline: spacing.semantic-variable(padding, horizontal, spacious);
-    overflow: auto;
-    flex-grow: 1;
   }
 
   &__bottom {
@@ -94,10 +106,6 @@ $drawer-size-config: (
     }
   }
 
-  .#{app-bar.$prefix} {
-    border: none;
-  }
-
   &__overlay {
     z-index: z-index.get(drawer);
   }

package/drawer/drawer.d.ts

@@ -14,4 +14,6 @@ export declare const drawerClasses: {
     readonly bottom__actions: "mzn-drawer__bottom__actions";
     readonly size: (size: DrawerSize) => string;
     readonly content: "mzn-drawer__content";
+    readonly controlBar: "mzn-drawer__control-bar";
+    readonly controlBarButtonOnly: "mzn-drawer__control-bar--button-only";
 };

package/drawer/drawer.js

@@ -8,6 +8,8 @@ const drawerClasses = {
     bottom__actions: `${drawerPrefix}__bottom__actions`,
     size: (size) => `${drawerPrefix}--${size}`,
     content: `${drawerPrefix}__content`,
+    controlBar: `${drawerPrefix}__control-bar`,
+    controlBarButtonOnly: `${drawerPrefix}__control-bar--button-only`,
 };
 
 export { drawerClasses, drawerPrefix };

package/filter-area/_filter-area-styles.scss

@@ -3,6 +3,7 @@
 @use '~@mezzanine-ui/system/radius' as radius;
 @use '~@mezzanine-ui/system/transition' as transition;
 @use './filter-area' as *;
+@use '../form/form-field' as formField;
 
 // Actions alignment configs
 $actions-align-configs: (
@@ -135,6 +136,12 @@ $layout-configs: (
     min-width: 0;
     grid-column: span var(--#{$prefix}-filter-span);
 
+    .#{formField.$prefix}__data-entry {
+      max-width: none;
+      min-width: 0;
+      width: 100%;
+    }
+    
     @include _apply-filter-align(stretch);
 
     @each $span, $value in $filter-span-configs {

package/form/_form-field-styles.scss

@@ -64,6 +64,23 @@ $form-field-counter-colors: (
 .#{$prefix}__label-area {
   padding-top: spacing.semantic-variable(padding, vertical, calm);
   padding-bottom: spacing.semantic-variable(padding, vertical, calm);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+
+  &--horizontal-main {
+    padding-top: spacing.semantic-variable(padding, vertical, calm);
+    min-height: spacing.semantic-variable(size, container, micro);
+  }
+
+  &--horizontal-sub {
+    padding-top: spacing.semantic-variable(padding, vertical, tight);
+    min-height: spacing.semantic-variable(size, container, atomic);
+  }
+
+  &--vertical {
+    padding-top: spacing.semantic-variable(padding, vertical, tiny);
+  }
 }
 
 @each $size in $form-field-sizes {
@@ -174,6 +191,16 @@ $form-field-counter-colors: (
   gap: spacing.semantic-variable(gap, slim);
 }
 
+.#{$prefix}__control-field-slot {
+  &--main {
+    min-height: spacing.semantic-variable(size, container, micro);
+  }
+
+  &--sub {
+    min-height: spacing.semantic-variable(size, container, atomic);
+  }
+}
+
 .#{$prefix}__hint-text-and-counter-area {
   display: flex;
   flex-flow: row nowrap;

package/form/formField.d.ts

@@ -15,12 +15,22 @@ export declare enum FormFieldSize {
     STRETCH_WIDE = "stretch-wide",
     VERTICAL = "vertical"
 }
+export declare enum LabelLayout {
+    HORIZONTAL_MAIN = "horizontal-main",
+    HORIZONTAL_SUB = "horizontal-sub",
+    VERTICAL = "vertical"
+}
+export declare enum ControlFieldSlotLayout {
+    MAIN = "main",
+    SUB = "sub"
+}
 export declare const formFieldPrefix = "mzn-form-field";
 export declare const formHintIcons: Record<SeverityWithInfo, IconDefinition>;
 export declare const formFieldClasses: {
     readonly host: "mzn-form-field";
     readonly counter: "mzn-form-field__counter";
     readonly counterColor: (color: FormFieldCounterColor) => string;
+    readonly controlFieldSlot: "mzn-form-field__control-field-slot";
     readonly dataEntry: "mzn-form-field__data-entry";
     readonly disabled: "mzn-form-field--disabled";
     readonly fullWidth: "mzn-form-field--full-width";

package/form/formField.js

@@ -18,6 +18,17 @@ var FormFieldSize;
     FormFieldSize["STRETCH_WIDE"] = "stretch-wide";
     FormFieldSize["VERTICAL"] = "vertical";
 })(FormFieldSize || (FormFieldSize = {}));
+var LabelLayout;
+(function (LabelLayout) {
+    LabelLayout["HORIZONTAL_MAIN"] = "horizontal-main";
+    LabelLayout["HORIZONTAL_SUB"] = "horizontal-sub";
+    LabelLayout["VERTICAL"] = "vertical";
+})(LabelLayout || (LabelLayout = {}));
+var ControlFieldSlotLayout;
+(function (ControlFieldSlotLayout) {
+    ControlFieldSlotLayout["MAIN"] = "main";
+    ControlFieldSlotLayout["SUB"] = "sub";
+})(ControlFieldSlotLayout || (ControlFieldSlotLayout = {}));
 const formFieldPrefix = `${formPrefix}-field`;
 const formHintIcons = {
     success: CheckedFilledIcon,
@@ -29,6 +40,7 @@ const formFieldClasses = {
     host: formFieldPrefix,
     counter: `${formFieldPrefix}__counter`,
     counterColor: (color) => `${formFieldPrefix}__counter--${color}`,
+    controlFieldSlot: `${formFieldPrefix}__control-field-slot`,
     dataEntry: `${formFieldPrefix}__data-entry`,
     disabled: `${formFieldPrefix}--disabled`,
     fullWidth: `${formFieldPrefix}--full-width`,
@@ -46,4 +58,4 @@ const formFieldClasses = {
     size: (size) => `${formFieldPrefix}--${size}`,
 };
 
-export { FormFieldCounterColor, FormFieldSize, formFieldClasses, formFieldPrefix, formHintIcons };
+export { ControlFieldSlotLayout, FormFieldCounterColor, FormFieldSize, LabelLayout, formFieldClasses, formFieldPrefix, formHintIcons };

package/form/index.js

@@ -1,2 +1,2 @@
 export { formPrefix } from './form.js';
-export { FormFieldCounterColor, FormFieldSize, formFieldClasses, formFieldPrefix, formHintIcons } from './formField.js';
+export { ControlFieldSlotLayout, FormFieldCounterColor, FormFieldSize, LabelLayout, formFieldClasses, formFieldPrefix, formHintIcons } from './formField.js';

package/modal/_modal-styles.scss

@@ -37,10 +37,7 @@ $modalSizes: (
 }
 
 .#{$prefix} {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  position: relative;
   display: flex;
   flex-direction: column;
   background-color: palette.semantic-variable("background", base);
@@ -81,12 +78,15 @@ $modalSizes: (
   }
 
   &__overlay {
+    z-index: z-index.get(modal);
+  }
+
+  &__content-wrapper {
     display: flex;
-    width: 100%;
-    height: 100%;
     justify-content: center;
     align-items: center;
-    z-index: z-index.get(modal);
+    width: 100%;
+    height: 100%;
   }
 
   &__close-icon {
@@ -436,7 +436,7 @@ $modalSizes: (
     color: palette.semantic-variable(text, fixed-light);
     z-index: z-index.get(modal);
 
-    @include typography.variant(body1);
+    @include typography.semantic-variable(body);
   }
 
   &__media-preview-close-button {

package/modal/modal.d.ts

@@ -14,6 +14,7 @@ export declare const modalStatusTypeIcons: {
 export declare const modalClasses: {
     readonly host: "mzn-modal";
     readonly overlay: "mzn-modal__overlay";
+    readonly contentWrapper: "mzn-modal__content-wrapper";
     readonly closeIcon: "mzn-modal__close-icon";
     readonly modalStatusType: (severity: ModalStatusType) => string;
     readonly size: (size: ModalSize) => string;

package/modal/modal.js

@@ -12,6 +12,7 @@ const modalStatusTypeIcons = {
 const modalClasses = {
     host: modalPrefix,
     overlay: `${modalPrefix}__overlay`,
+    contentWrapper: `${modalPrefix}__content-wrapper`,
     closeIcon: `${modalPrefix}__close-icon`,
     modalStatusType: (severity) => `${modalPrefix}--${severity}`,
     size: (size) => `${modalPrefix}--${size}`,

package/multiple-date-picker/_index.scss

@@ -0,0 +1 @@
+@forward './multiple-date-picker';

package/multiple-date-picker/_multiple-date-picker-styles.scss

@@ -0,0 +1,77 @@
+@use '~@mezzanine-ui/system/palette';
+@use '~@mezzanine-ui/system/spacing';
+@use '~@mezzanine-ui/system/transition';
+@use '../text-field';
+@use './multiple-date-picker' as *;
+
+.#{$prefix} {
+  position: relative;
+  min-width: spacing.semantic-variable(size, container, slim);
+
+  &--full-width {
+    width: 100%;
+  }
+}
+
+.#{$prefix}-trigger {
+  cursor: pointer;
+
+  &--readonly {
+    cursor: default;
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
+
+  &--selected {
+    padding: spacing.semantic-variable(padding, vertical, tiny)
+      spacing.semantic-variable(padding, horizontal, cozy)
+      spacing.semantic-variable(padding, horizontal, tiny)
+      spacing.semantic-variable(padding, vertical, tiny);
+    gap: spacing.semantic-variable(gap, slim);
+  }
+
+  &__input {
+    appearance: none;
+    min-width: 0;
+    padding: 0;
+
+    &--absolute {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+    }
+  }
+
+  &__tags-wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 1;
+    flex-wrap: wrap;
+
+    &--ellipsis {
+      flex-wrap: nowrap;
+    }
+  }
+
+  &__tags {
+    width: auto;
+    max-width: calc(
+      100% - var(--#{text-field.$prefix}-prefix-x-gap) - var(
+          --#{text-field.$prefix}-icon-size
+        )
+    );
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-self: flex-start;
+    position: relative;
+
+    &--ellipsis {
+      flex-wrap: unset;
+    }
+  }
+}

package/multiple-date-picker/_multiple-date-picker.scss

@@ -0,0 +1 @@
+$prefix: mzn-multiple-date-picker;

package/multiple-date-picker/index.d.ts

@@ -0,0 +1 @@
+export { multipleDatePickerClasses, multipleDatePickerPrefix, type MultipleDatePickerValue, } from './multipleDatePicker';

package/multiple-date-picker/index.js

@@ -0,0 +1 @@
+export { multipleDatePickerClasses, multipleDatePickerPrefix } from './multipleDatePicker.js';

package/multiple-date-picker/multipleDatePicker.d.ts

@@ -0,0 +1,20 @@
+import { DateType } from '../calendar';
+/** Prefix */
+export declare const multipleDatePickerPrefix = "mzn-multiple-date-picker";
+/** Classes */
+export declare const multipleDatePickerClasses: {
+    readonly host: "mzn-multiple-date-picker";
+    readonly hostFullWidth: "mzn-multiple-date-picker--full-width";
+    readonly trigger: "mzn-multiple-date-picker-trigger";
+    readonly triggerSelected: "mzn-multiple-date-picker-trigger--selected";
+    readonly triggerDisabled: "mzn-multiple-date-picker-trigger--disabled";
+    readonly triggerReadOnly: "mzn-multiple-date-picker-trigger--readonly";
+    readonly triggerTagsWrapper: "mzn-multiple-date-picker-trigger__tags-wrapper";
+    readonly triggerTagsWrapperEllipsis: "mzn-multiple-date-picker-trigger__tags-wrapper--ellipsis";
+    readonly triggerTags: "mzn-multiple-date-picker-trigger__tags";
+    readonly triggerTagsEllipsis: "mzn-multiple-date-picker-trigger__tags--ellipsis";
+    readonly triggerInput: "mzn-multiple-date-picker-trigger__input";
+    readonly triggerInputAbsolute: "mzn-multiple-date-picker-trigger__input--absolute";
+};
+/** Types */
+export type MultipleDatePickerValue = DateType[];

package/multiple-date-picker/multipleDatePicker.js

@@ -0,0 +1,19 @@
+/** Prefix */
+const multipleDatePickerPrefix = 'mzn-multiple-date-picker';
+/** Classes */
+const multipleDatePickerClasses = {
+    host: multipleDatePickerPrefix,
+    hostFullWidth: `${multipleDatePickerPrefix}--full-width`,
+    trigger: `${multipleDatePickerPrefix}-trigger`,
+    triggerSelected: `${multipleDatePickerPrefix}-trigger--selected`,
+    triggerDisabled: `${multipleDatePickerPrefix}-trigger--disabled`,
+    triggerReadOnly: `${multipleDatePickerPrefix}-trigger--readonly`,
+    triggerTagsWrapper: `${multipleDatePickerPrefix}-trigger__tags-wrapper`,
+    triggerTagsWrapperEllipsis: `${multipleDatePickerPrefix}-trigger__tags-wrapper--ellipsis`,
+    triggerTags: `${multipleDatePickerPrefix}-trigger__tags`,
+    triggerTagsEllipsis: `${multipleDatePickerPrefix}-trigger__tags--ellipsis`,
+    triggerInput: `${multipleDatePickerPrefix}-trigger__input`,
+    triggerInputAbsolute: `${multipleDatePickerPrefix}-trigger__input--absolute`,
+};
+
+export { multipleDatePickerClasses, multipleDatePickerPrefix };

package/notification-center/_notification-center-styles.scss

@@ -51,6 +51,7 @@ $drawer-container-config: (
 
   @if $severity-map {
     $value: map.get($severity-map, $property);
+
     @return $value;
   }
 
@@ -60,12 +61,14 @@ $drawer-container-config: (
 // Get drawer type configuration value
 @function _get-drawer-type-value($property) {
   $value: map.get($drawer-type-config, $property);
+
   @return $value;
 }
 
 // Get drawer container configuration value
 @function _get-drawer-container-value($property) {
   $value: map.get($drawer-container-config, $property);
+
   @return $value;
 }
 
@@ -160,7 +163,7 @@ $drawer-container-config: (
   height: fit-content;
   padding: spacing.semantic-variable(padding, vertical, comfort) spacing.semantic-variable(padding, vertical, comfort) spacing.semantic-variable(padding, vertical, spacious);
   border-radius: radius.variable(roomy);
-  background-color: palette.semantic-variable(background, base);
+  background-color: palette.semantic-variable("background", base);
   box-shadow: effect.variable(shadow, floating);
   box-sizing: border-box;
   pointer-events: auto;
@@ -184,6 +187,7 @@ $drawer-container-config: (
   &__prepend-tips {
     color: palette.semantic-variable(text, neutral);
     @include typography.semantic-variable(body);
+
     padding-top: spacing.semantic-variable(padding, vertical, comfort);
     padding-bottom: spacing.semantic-variable(padding, vertical, micro);
     padding-inline: spacing.semantic-variable(padding, horizontal, comfort);
@@ -254,7 +258,7 @@ $drawer-container-config: (
   &__severity-icon {
     padding: spacing.semantic-variable(padding, vertical, micro) 0;
     color: var(--#{$prefix}-color);
-    font-size: typography.prop(h1, font-size);
+    font-size: typography.semantic-prop(h1, font-size);
   }
 
   &__close-icon {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/core",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "description": "Core for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -40,8 +40,8 @@
     }
   },
   "dependencies": {
-    "@mezzanine-ui/icons": "1.0.0-beta.5",
-    "@mezzanine-ui/system": "1.0.0-beta.5",
+    "@mezzanine-ui/icons": "1.0.0-beta.6",
+    "@mezzanine-ui/system": "1.0.0-beta.6",
     "lodash": "^4.17.21",
     "tslib": "^2.8.1"
   },

package/picker/_picker-styles.scss

@@ -11,8 +11,7 @@
   &__arrow-icon {
     display: flex;
     align-items: center;
-    margin: 0 4px;
-    color: palette.color(action-inactive);
+    color: palette.semantic-variable(icon, neutral-light);
   }
 
   &__input-mono {

package/section/_index.scss

@@ -0,0 +1 @@
+@forward './section';

package/section/_section-styles.scss

@@ -0,0 +1,18 @@
+@use '~@mezzanine-ui/system/palette' as palette;
+@use '~@mezzanine-ui/system/radius' as radius;
+@use '~@mezzanine-ui/system/spacing' as spacing;
+@use './section' as *;
+
+.#{$prefix} {
+  width: 100%;
+  box-sizing: border-box;
+  padding: spacing.semantic-variable(padding, vertical, spacious) spacing.semantic-variable(padding, horizontal, spacious);
+  border-radius: radius.variable(base);
+  background-color: palette.semantic-variable('background', base);
+  
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  gap: spacing.semantic-variable(gap, calm);
+}

package/section/_section.scss

@@ -0,0 +1 @@
+$prefix: mzn-section;

package/section/index.d.ts

@@ -0,0 +1 @@
+export * from './section';

package/section/index.js

@@ -0,0 +1 @@
+export { sectionClasses, sectionPrefix } from './section.js';

package/section/section.d.ts

@@ -0,0 +1,4 @@
+export declare const sectionPrefix = "mzn-section";
+export declare const sectionClasses: {
+    readonly host: "mzn-section";
+};