@mittwald/flow-react-components 1.1.22 → 1.1.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +11 -0
- package/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Modal/Modal.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/NotificationProvider/NotificationContainer/NotificationContainer.module.mjs.map +1 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeInput.module.mjs","names":[],"sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.dateRangeInput {\n display: flex;\n justify-content: space-between;\n\n @include formControl.formControl();\n\n > div {\n display: flex;\n align-items: center;\n }\n\n :global(.react-aria-DateInput) {\n display: flex;\n }\n\n :global(.react-aria-DateSegment) {\n border-radius: var(--date-picker--date-segment-corner-radius);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n &:focus {\n background: var(--date-picker--date-segment-background-color--focused);\n outline: none;\n }\n }\n\n > span {\n display: flex;\n align-items: center;\n }\n\n :global(.react-aria-DateInput):first-of-type {\n padding-inline-end:
|
|
1
|
+
{"version":3,"file":"DateRangeInput.module.mjs","names":[],"sources":["../../../../../../../../../src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.dateRangeInput {\n display: flex;\n justify-content: space-between;\n\n @include formControl.formControl();\n\n > div {\n display: flex;\n align-items: center;\n }\n\n :global(.react-aria-DateInput) {\n display: flex;\n }\n\n :global(.react-aria-DateSegment) {\n border-radius: var(--date-picker--date-segment-corner-radius);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n &:focus {\n background: var(--date-picker--date-segment-background-color--focused);\n outline: none;\n }\n }\n\n > span {\n display: flex;\n align-items: center;\n }\n\n :global(.react-aria-DateInput):first-of-type {\n padding-inline-end: var(--size-px--xxs);\n }\n\n :global(.react-aria-DateInput):last-of-type {\n padding-inline-start: var(--size-px--xxs);\n }\n\n :global(.flow--button) {\n margin-block: calc((var(--form-control--padding-y) - 1px) * -1);\n margin-inline-end: calc(var(--form-control--padding-x) * -1);\n padding: calc(\n var(--button--padding-icon-only) - var(--form-control--border-width)\n );\n outline-offset: calc(var(--size-px--xxxs) * -1);\n }\n\n [data-placeholder=\"true\"] ~ * {\n color: var(--form-control--placeholder-color--default);\n }\n\n [data-disabled=\"true\"] ~ * {\n color: var(--form-control--placeholder-color--disabled);\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n position: relative;\n cursor: default;\n background-color: var(--list-item--background-color--default);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &.item {\n outline-offset: calc(var(--size-px--xs) * -1);\n box-shadow: none;\n }\n\n &:where(.isSelected) {\n background-color: var(--list-item--background-color--pressed);\n }\n\n &:not(:last-child) {\n border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n var(--list-item--border-color);\n }\n\n &[data-href] {\n cursor: pointer;\n }\n\n &:where(.hasAction):not(\n &:has(:global(.flow--list--items--item--view--bottom-content):hover)\n ) {\n &:where(:not(.isSelected)) {\n &:hover {\n background-color: var(--list-item--background-color--hover);\n }\n }\n\n &[data-pressed] {\n background-color: var(--list-item--background-color--pressed);\n }\n }\n\n :global(.flow--avatar) {\n transition-property: filter;\n transition-duration: var(--transition--duration--default);\n }\n\n /* Elements */\n\n /*\n * Covers the whole item so a right-click anywhere on it hits a real link.\n * Interactive content is lifted back above the overlay, so buttons, context\n * menus and checkboxes keep receiving their own clicks.\n */\n .link {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n\n &:has(.link) {\n :where(\n a,\n button,\n input,\n label,\n select,\n summary,\n textarea,\n [role=\"button\"],\n [role=\"checkbox\"],\n [role=\"link\"],\n [role=\"switch\"],\n [tabindex]\n ):not(.link) {\n position: relative;\n z-index: 2;\n }\n\n /*\n * The bottom slot carries arbitrary consumer content (and the accordion's\n * expanded content), so it stays fully clickable and selectable.\n */\n :global(.flow--list--list-item-view--bottom-content) {\n position: relative;\n z-index: 2;\n }\n }\n\n &.tile {\n border: none;\n border-radius: var(--list-item--corner-radius);\n\n &.item {\n outline-offset: var(--size-px--xxs);\n }\n\n &:where(.hasAction) {\n &:not(.isSelected) {\n &:hover {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--hover));\n }\n }\n }\n\n &[data-pressed] {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--pressed));\n }\n }\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n position: relative;\n\n /* The link overlay and the interactive content lifted above it (see .link\n below) stack against each other only — never against anything outside the\n item. */\n isolation: isolate;\n cursor: default;\n background-color: var(--list-item--background-color--default);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &.item {\n outline-offset: calc(var(--size-px--xs) * -1);\n box-shadow: none;\n }\n\n &:where(.isSelected) {\n background-color: var(--list-item--background-color--pressed);\n }\n\n &:not(:last-child) {\n border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n var(--list-item--border-color);\n }\n\n &[data-href] {\n cursor: pointer;\n }\n\n &:where(.hasAction):not(\n &:has(:global(.flow--list--items--item--view--bottom-content):hover)\n ) {\n &:where(:not(.isSelected)) {\n &:hover {\n background-color: var(--list-item--background-color--hover);\n }\n }\n\n &[data-pressed] {\n background-color: var(--list-item--background-color--pressed);\n }\n }\n\n :global(.flow--avatar) {\n transition-property: filter;\n transition-duration: var(--transition--duration--default);\n }\n\n /* Elements */\n\n /*\n * Covers the whole item so a right-click anywhere on it hits a real link.\n * Interactive content is lifted back above the overlay, so buttons, context\n * menus and checkboxes keep receiving their own clicks.\n */\n .link {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n\n &:has(.link) {\n :where(\n a,\n button,\n input,\n label,\n select,\n summary,\n textarea,\n [role=\"button\"],\n [role=\"checkbox\"],\n [role=\"link\"],\n [role=\"switch\"],\n [tabindex]\n ):not(.link) {\n position: relative;\n z-index: 2;\n }\n\n /*\n * The bottom slot carries arbitrary consumer content (and the accordion's\n * expanded content), so it stays fully clickable and selectable.\n */\n :global(.flow--list--list-item-view--bottom-content) {\n position: relative;\n z-index: 2;\n }\n }\n\n &.tile {\n border: none;\n border-radius: var(--list-item--corner-radius);\n\n &.item {\n outline-offset: var(--size-px--xxs);\n }\n\n &:where(.hasAction) {\n &:not(.isSelected) {\n &:hover {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--hover));\n }\n }\n }\n\n &[data-pressed] {\n :global(.flow--avatar) {\n filter: brightness(var(--image-button--brightness--pressed));\n }\n }\n }\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.module.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Caps the dialog width per size token (`size-s` / `size-m` / `size-l`). */\n@mixin size($size) {\n &.size-#{$size} {\n [role=\"dialog\"] {\n width: inherit;\n max-width: var(--modal--size--#{$size});\n }\n }\n}\n\n/* ===========================================================================\n Base — shared by Modal (centered / bottom sheet) and OffCanvas (side panel).\n =========================================================================== */\n.modal,\n.offCanvas {\n /* Fixed full-viewport layer + centering wrapper. Sized to the visual\n viewport so it tracks the on-screen keyboard (Overlay sets the var). */\n > div {\n position: fixed;\n height: var(--visual-viewport-height);\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n\n > div {\n display: flex;\n justify-content: center;\n width: inherit;\n max-height: var(--visual-viewport-height);\n padding: var(--size-px--xl);\n }\n }\n\n /* Close button: hidden when an action group is present, unless forced. */\n &:has(.actionGroup) {\n .closeButton:not(.alwaysVisible) {\n display: none;\n }\n }\n\n .closeButton.alwaysHidden {\n display: none;\n }\n\n /* The dialog card itself — a flex column. */\n [role=\"dialog\"] {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n overflow: hidden;\n outline: none;\n pointer-events: all;\n background-color: var(--modal--background-color);\n border: var(--modal--border-width) var(--modal--border-style)\n var(--modal--border-color);\n\n > form {\n display: contents;\n }\n }\n\n /* Header */\n header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header {\n display: flex;\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n padding-top: var(--modal--header-padding-top);\n padding-inline: var(--modal--padding);\n\n /* Flatten the heading's text and content spans into the header row, so\n badges stay behind the title instead of wrapping onto their own line. */\n > span {\n display: contents;\n }\n\n .headerTitle {\n min-width: 0;\n }\n\n .closeButton {\n order: 1;\n margin-inline-start: auto;\n }\n }\n\n /* Content — the scrollable body */\n .content,\n .columnLayout {\n @include scrollbar.scrollbar;\n\n flex-grow: 1;\n min-height: var(--modal--content-min-height);\n padding: var(--modal--padding);\n overflow: hidden auto;\n background-color: var(--modal--background-color);\n }\n\n .columnLayout .accentBox {\n position: sticky;\n top: 0;\n height: fit-content;\n }\n\n /* Action group — the footer */\n .actionGroup {\n padding: var(--modal--padding);\n background-color: var(--modal--footer-background-color);\n }\n\n /* ActionGroup's \"sorted\" layout sets flex-grow:1 on itself; the modal footer\n must keep its natural height (otherwise it fills the full-height off-canvas\n panel). Scope via the dialog so flex-grow:0 wins the equal-specificity /\n source-order battle — without raising the specificity of the padding above,\n which the mobile rules override. */\n [role=\"dialog\"] .actionGroup {\n flex-grow: 0;\n }\n}\n\n/* ===========================================================================\n Modal — desktop (centered dialog, zoom in/out).\n =========================================================================== */\n@media (width > 768px) {\n .modal {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n border-radius: var(--modal--corner-radius);\n }\n\n > div > div {\n &[data-entering] {\n animation: modal-zoom var(--transition--duration--slow)\n cubic-bezier(0.1, 0.8, 0.3, 1.2);\n }\n\n &[data-exiting] {\n animation: modal-zoom var(--transition--duration--default)\n cubic-bezier(0.1, 0.8, 0.3, 1.2) reverse;\n }\n }\n }\n}\n\n/* ===========================================================================\n OffCanvas — side panel (all widths), full height, slides in from the side.\n =========================================================================== */\n.offCanvas {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n height: 100%;\n border-radius: 0;\n }\n\n > div {\n padding-inline-start: var(--size-px--m);\n\n > div {\n justify-content: flex-end;\n width: inherit;\n height: inherit;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-right var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-right\n var(--transition--duration--default) reverse;\n }\n }\n }\n\n &.left {\n > div {\n padding-inline: 0 var(--size-px--m);\n\n > div {\n justify-content: flex-start;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-left var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-left\n var(--transition--duration--default) reverse;\n }\n }\n }\n }\n}\n\n/* ===========================================================================\n Modal — mobile (bottom sheet), issue #2423.\n\n One scroll container: the dialog scrolls while the header sticks to the top\n and the footer to the bottom. While the virtual keyboard is open\n (.keyboardVisible) both un-stick so header + content + footer flow normally\n and the content gets the full available space.\n =========================================================================== */\n@media (max-width: 768px) {\n .modal {\n /* Bottom-anchored sheet: rounded top corners + slide-up animation. */\n > div > div {\n margin-top: auto;\n width: 100%;\n padding: unset;\n overflow: hidden;\n border-start-start-radius: var(--modal--corner-radius);\n border-start-end-radius: var(--modal--corner-radius);\n pointer-events: all;\n\n &[data-entering] {\n animation: modal-slide-up var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-up var(--transition--duration--default) reverse;\n }\n }\n\n /* The dialog is the single scroll container. Capped just below the visual\n viewport so a full-height sheet keeps a small gap from the top edge. */\n [role=\"dialog\"] {\n @include scrollbar.scrollbar;\n\n width: inherit;\n max-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n overflow: hidden auto;\n }\n\n [role=\"dialog\"] > form {\n width: inherit;\n }\n\n /* flex: 0 0 auto keeps natural heights; without flex-shrink:0 the flex\n column compresses the content box and the (overflow:visible) fields\n spill over the footer. */\n .header,\n .content,\n .columnLayout,\n .actionGroup {\n flex: 0 0 auto;\n }\n\n .content,\n .columnLayout {\n min-height: 0;\n overflow: visible;\n }\n\n /* Docked header + footer (sticky within the single scroll container). */\n .header {\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: var(--modal--background-color);\n }\n\n .actionGroup {\n position: sticky;\n bottom: 0;\n z-index: 1;\n }\n }\n\n /* Keyboard open: un-stick both so everything flows for maximum typing space.\n The dialog fills the available height and the footer uses margin-top:auto,\n so with SHORT content the footer still sits at the bottom (not mid-air) and\n with tall content it scrolls away with everything else. Never hidden. */\n .modal.keyboardVisible {\n [role=\"dialog\"] {\n min-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n }\n\n .header,\n .actionGroup {\n position: static;\n }\n\n .actionGroup {\n margin-top: auto;\n }\n }\n\n /* Shared mobile spacing + full-width stacked actions (Modal + OffCanvas). */\n .modal,\n .offCanvas {\n .header {\n padding-inline: var(--modal--padding-mobile);\n }\n\n .content,\n .columnLayout,\n .actionGroup {\n padding: var(--modal--padding-mobile);\n }\n\n .actionGroup {\n flex-direction: column;\n\n button {\n width: 100%;\n }\n }\n }\n}\n\n/* ===========================================================================\n Animations\n =========================================================================== */\n@keyframes modal-zoom {\n /* Start with scale(1) to let ResizeObservers take the correct width on mount. */\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n\n 0.1% {\n opacity: 1;\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes modal-slide-up {\n from {\n translate: 0 30%;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-right {\n from {\n translate: 30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-left {\n from {\n translate: -30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Modal.module.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Caps the dialog width per size token (`size-s` / `size-m` / `size-l`). */\n@mixin size($size) {\n &.size-#{$size} {\n [role=\"dialog\"] {\n width: inherit;\n max-width: var(--modal--size--#{$size});\n }\n }\n}\n\n/* ===========================================================================\n Base — shared by Modal (centered / bottom sheet) and OffCanvas (side panel).\n =========================================================================== */\n.modal,\n.offCanvas {\n /* Fixed full-viewport layer + centering wrapper. Sized to the visual\n viewport so it tracks the on-screen keyboard (Overlay sets the var). */\n > div {\n position: fixed;\n height: var(--visual-viewport-height);\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n\n > div {\n display: flex;\n justify-content: center;\n width: inherit;\n max-height: var(--visual-viewport-height);\n padding: var(--size-px--xl);\n }\n }\n\n /* Close button: hidden when an action group is present, unless forced. */\n &:has(.actionGroup) {\n .closeButton:not(.alwaysVisible) {\n display: none;\n }\n }\n\n .closeButton.alwaysHidden {\n display: none;\n }\n\n /* The dialog card itself — a flex column. It is also the scroll container on\n mobile, and the sticky header/footer stack against its content only. */\n [role=\"dialog\"] {\n display: flex;\n flex-direction: column;\n isolation: isolate;\n max-height: 100%;\n overflow: hidden;\n outline: none;\n pointer-events: all;\n background-color: var(--modal--background-color);\n border: var(--modal--border-width) var(--modal--border-style)\n var(--modal--border-color);\n\n > form {\n display: contents;\n }\n }\n\n /* Header */\n header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .header {\n display: flex;\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n padding-top: var(--modal--header-padding-top);\n padding-inline: var(--modal--padding);\n\n /* Flatten the heading's text and content spans into the header row, so\n badges stay behind the title instead of wrapping onto their own line. */\n > span {\n display: contents;\n }\n\n .headerTitle {\n min-width: 0;\n }\n\n .closeButton {\n order: 1;\n margin-inline-start: auto;\n }\n }\n\n /* Content — the scrollable body */\n .content,\n .columnLayout {\n @include scrollbar.scrollbar;\n\n flex-grow: 1;\n min-height: var(--modal--content-min-height);\n padding: var(--modal--padding);\n overflow: hidden auto;\n background-color: var(--modal--background-color);\n }\n\n .columnLayout .accentBox {\n position: sticky;\n top: 0;\n height: fit-content;\n }\n\n /* Action group — the footer */\n .actionGroup {\n padding: var(--modal--padding);\n background-color: var(--modal--footer-background-color);\n }\n\n /* ActionGroup's \"sorted\" layout sets flex-grow:1 on itself; the modal footer\n must keep its natural height (otherwise it fills the full-height off-canvas\n panel). Scope via the dialog so flex-grow:0 wins the equal-specificity /\n source-order battle — without raising the specificity of the padding above,\n which the mobile rules override. */\n [role=\"dialog\"] .actionGroup {\n flex-grow: 0;\n }\n}\n\n/* ===========================================================================\n Modal — desktop (centered dialog, zoom in/out).\n =========================================================================== */\n@media (width > 768px) {\n .modal {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n border-radius: var(--modal--corner-radius);\n }\n\n > div > div {\n &[data-entering] {\n animation: modal-zoom var(--transition--duration--slow)\n cubic-bezier(0.1, 0.8, 0.3, 1.2);\n }\n\n &[data-exiting] {\n animation: modal-zoom var(--transition--duration--default)\n cubic-bezier(0.1, 0.8, 0.3, 1.2) reverse;\n }\n }\n }\n}\n\n/* ===========================================================================\n OffCanvas — side panel (all widths), full height, slides in from the side.\n =========================================================================== */\n.offCanvas {\n @include size(s);\n @include size(m);\n @include size(l);\n\n [role=\"dialog\"] {\n height: 100%;\n border-radius: 0;\n }\n\n > div {\n padding-inline-start: var(--size-px--m);\n\n > div {\n justify-content: flex-end;\n width: inherit;\n height: inherit;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-right var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-right\n var(--transition--duration--default) reverse;\n }\n }\n }\n\n &.left {\n > div {\n padding-inline: 0 var(--size-px--m);\n\n > div {\n justify-content: flex-start;\n padding: unset;\n\n &[data-entering] {\n animation: modal-slide-in-from-left var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-in-from-left\n var(--transition--duration--default) reverse;\n }\n }\n }\n }\n}\n\n/* ===========================================================================\n Modal — mobile (bottom sheet), issue #2423.\n\n One scroll container: the dialog scrolls while the header sticks to the top\n and the footer to the bottom. While the virtual keyboard is open\n (.keyboardVisible) both un-stick so header + content + footer flow normally\n and the content gets the full available space.\n =========================================================================== */\n@media (max-width: 768px) {\n .modal {\n /* Bottom-anchored sheet: rounded top corners + slide-up animation. */\n > div > div {\n margin-top: auto;\n width: 100%;\n padding: unset;\n overflow: hidden;\n border-start-start-radius: var(--modal--corner-radius);\n border-start-end-radius: var(--modal--corner-radius);\n pointer-events: all;\n\n &[data-entering] {\n animation: modal-slide-up var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: modal-slide-up var(--transition--duration--default) reverse;\n }\n }\n\n /* The dialog is the single scroll container. Capped just below the visual\n viewport so a full-height sheet keeps a small gap from the top edge. */\n [role=\"dialog\"] {\n @include scrollbar.scrollbar;\n\n width: inherit;\n max-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n overflow: hidden auto;\n }\n\n [role=\"dialog\"] > form {\n width: inherit;\n }\n\n /* flex: 0 0 auto keeps natural heights; without flex-shrink:0 the flex\n column compresses the content box and the (overflow:visible) fields\n spill over the footer. */\n .header,\n .content,\n .columnLayout,\n .actionGroup {\n flex: 0 0 auto;\n }\n\n .content,\n .columnLayout {\n min-height: 0;\n overflow: visible;\n }\n\n /* Docked header + footer (sticky within the single scroll container). */\n .header {\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: var(--modal--background-color);\n }\n\n .actionGroup {\n position: sticky;\n bottom: 0;\n z-index: 1;\n }\n }\n\n /* Keyboard open: un-stick both so everything flows for maximum typing space.\n The dialog fills the available height and the footer uses margin-top:auto,\n so with SHORT content the footer still sits at the bottom (not mid-air) and\n with tall content it scrolls away with everything else. Never hidden. */\n .modal.keyboardVisible {\n [role=\"dialog\"] {\n min-height: calc(\n var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n );\n }\n\n .header,\n .actionGroup {\n position: static;\n }\n\n .actionGroup {\n margin-top: auto;\n }\n }\n\n /* Shared mobile spacing + full-width stacked actions (Modal + OffCanvas). */\n .modal,\n .offCanvas {\n .header {\n padding-inline: var(--modal--padding-mobile);\n }\n\n .content,\n .columnLayout,\n .actionGroup {\n padding: var(--modal--padding-mobile);\n }\n\n .actionGroup {\n flex-direction: column;\n\n button {\n width: 100%;\n }\n }\n }\n}\n\n/* ===========================================================================\n Animations\n =========================================================================== */\n@keyframes modal-zoom {\n /* Start with scale(1) to let ResizeObservers take the correct width on mount. */\n 0% {\n opacity: 0;\n transform: scale(1);\n }\n\n 0.1% {\n opacity: 1;\n transform: scale(0.8);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes modal-slide-up {\n from {\n translate: 0 30%;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-right {\n from {\n translate: 30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n\n@keyframes modal-slide-in-from-left {\n from {\n translate: -30% 0;\n }\n\n to {\n translate: 0 0;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationContainer.module.mjs","names":[],"sources":["../../../../../../../../src/components/NotificationProvider/NotificationContainer/NotificationContainer.module.scss"],"sourcesContent":[".notificationContainer {\n position: fixed;\n top: var(--notification-provider--window-to-provider-spacing);\n inset-inline-end: var(--notification-provider--window-to-provider-spacing);\n display: flex;\n flex-direction: column;\n z-index: 1;\n\n .notification {\n padding-bottom: var(\n --notification-provider--notification-to-notification-spacing\n );\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"NotificationContainer.module.mjs","names":[],"sources":["../../../../../../../../src/components/NotificationProvider/NotificationContainer/NotificationContainer.module.scss"],"sourcesContent":["/* This container is portalled into `document.body`, so its z-index lives in the\n root stacking context and cannot be isolated. It has to: overlays render into\n a container that is kept as body's *last* child (see\n `OverlayContent.getOverlayContainer`), and this is what keeps a notification\n painted over an open modal. */\n.notificationContainer {\n position: fixed;\n top: var(--notification-provider--window-to-provider-spacing);\n inset-inline-end: var(--notification-provider--window-to-provider-spacing);\n display: flex;\n flex-direction: column;\n z-index: 1;\n\n .notification {\n padding-bottom: var(\n --notification-provider--notification-to-notification-spacing\n );\n }\n}\n"],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.24",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -78,9 +78,9 @@
|
|
|
78
78
|
"@internationalized/string-compiler": "^3.4.1",
|
|
79
79
|
"@lezer/common": "^1.5.2",
|
|
80
80
|
"@lezer/highlight": "^1.2.3",
|
|
81
|
-
"@mittwald/flow-icons": "1.1.
|
|
81
|
+
"@mittwald/flow-icons": "1.1.24",
|
|
82
82
|
"@mittwald/password-tools-js": "3.0.0-alpha.31",
|
|
83
|
-
"@mittwald/react-tunnel": "1.1.
|
|
83
|
+
"@mittwald/react-tunnel": "1.1.24",
|
|
84
84
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
85
85
|
"@react-aria/form": "^3.2.1",
|
|
86
86
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -134,12 +134,12 @@
|
|
|
134
134
|
"@internationalized/date": "^3.12.3",
|
|
135
135
|
"@lezer/generator": "^1.8.0",
|
|
136
136
|
"@lezer/lr": "^1.4.10",
|
|
137
|
-
"@mittwald/flow-core": "1.1.
|
|
138
|
-
"@mittwald/flow-design-tokens": "1.1.
|
|
139
|
-
"@mittwald/flow-icons-base": "1.1.
|
|
137
|
+
"@mittwald/flow-core": "1.1.24",
|
|
138
|
+
"@mittwald/flow-design-tokens": "1.1.24",
|
|
139
|
+
"@mittwald/flow-icons-base": "1.1.24",
|
|
140
140
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
141
141
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
142
|
-
"@mittwald/typescript-config": "1.1.
|
|
142
|
+
"@mittwald/typescript-config": "1.1.24",
|
|
143
143
|
"@nx/storybook": "^22.7.6",
|
|
144
144
|
"@storybook/addon-a11y": "^10.5.10",
|
|
145
145
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
},
|
|
191
191
|
"peerDependencies": {
|
|
192
192
|
"@internationalized/date": "^3.12.2",
|
|
193
|
-
"@mittwald/flow-icons-pro": "1.1.
|
|
193
|
+
"@mittwald/flow-icons-pro": "1.1.24",
|
|
194
194
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
195
195
|
"next": "^16.2.3",
|
|
196
196
|
"react": "^19.2.0",
|
|
@@ -211,5 +211,5 @@
|
|
|
211
211
|
"optional": true
|
|
212
212
|
}
|
|
213
213
|
},
|
|
214
|
-
"gitHead": "
|
|
214
|
+
"gitHead": "ba1e55c2472bfb8c8ce20e900cc5a41b00bf2f5a"
|
|
215
215
|
}
|