@mittwald/flow-react-components 1.3.0-next.18 → 1.3.0-next.19

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.
@@ -1 +1 @@
1
- {"version":3,"file":"List.module.mjs","names":[],"sources":["../../../../../../../src/components/List/List.module.scss"],"sourcesContent":[".list {\n display: flex;\n flex-direction: column;\n row-gap: var(--list--block-to-block-spacing);\n container-type: inline-size;\n\n :has(:global(.flow--list--list-summary--top)) {\n :global(.flow--list--items),\n :global(.flow--list--table) {\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n }\n\n :has(:global(.flow--list--list-summary--bottom)) {\n :global(.flow--list--items),\n :global(.flow--list--table) {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n }\n\n .listWrapper {\n display: flex;\n flex-direction: column;\n\n .hideVisuallyEmptyView {\n display: none;\n }\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"List.module.mjs","names":[],"sources":["../../../../../../../src/components/List/List.module.scss"],"sourcesContent":[".list {\n display: flex;\n flex-direction: column;\n row-gap: var(--list--block-to-block-spacing);\n min-width: 0;\n\n :has(:global(.flow--list--list-summary--top)) {\n :global(.flow--list--items),\n :global(.flow--list--table) {\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n }\n\n :has(:global(.flow--list--list-summary--bottom)) {\n :global(.flow--list--items),\n :global(.flow--list--table) {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n }\n\n .listWrapper {\n display: flex;\n flex-direction: column;\n\n .hideVisuallyEmptyView {\n display: none;\n }\n }\n}\n"],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemView.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.module.scss"],"sourcesContent":["@use \"@/styles/mixins/containerBreakpointSizes\";\n\n.view {\n display: flex;\n flex-direction: column;\n\n .checkboxContainer {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n\n &:empty {\n display: none;\n }\n }\n\n .content {\n min-width: 0;\n display: flex;\n gap: var(--list-item--spacing);\n flex-grow: 1;\n flex-wrap: wrap;\n }\n\n .topContent {\n overflow-wrap: anywhere;\n display: flex;\n }\n\n .bottomContent {\n width: 100%;\n overflow-wrap: anywhere;\n display: flex;\n flex-direction: column;\n }\n\n .heading {\n color: var(--text--color--default);\n overflow-wrap: anywhere;\n }\n\n .header {\n overflow-wrap: anywhere;\n display: flex;\n gap: var(--list-item--avatar-to-title-spacing);\n max-width: 100%;\n }\n\n .subTitle {\n font-size: var(--list-item--subtitle-font-size);\n\n .text:not(:last-child)::after {\n content: \"–\";\n display: inline-block;\n margin: 0 var(--size-rem--s);\n }\n }\n\n .badge {\n max-width: 100%;\n }\n\n &.listView {\n padding: var(--list-item--padding);\n gap: var(--list-item--spacing);\n\n .columnLayout {\n flex-grow: 1;\n\n > div {\n flex-grow: 1;\n align-items: center;\n }\n }\n\n .contentWrapper {\n display: flex;\n gap: var(--list-item--spacing);\n justify-content: space-between;\n flex-grow: 1;\n align-items: flex-start;\n }\n\n .content {\n align-items: center;\n align-self: center;\n max-width: 100%;\n }\n\n .title {\n max-width: 100%;\n min-width: 0;\n }\n\n .action {\n margin-inline-start: auto;\n\n button {\n margin-inline-end: 0;\n }\n }\n\n .header {\n order: 0;\n flex-grow: 1;\n align-items: center;\n\n &:empty,\n .subTitle:empty {\n display: none;\n }\n\n .avatar,\n .checkboxContainer {\n align-self: start;\n }\n\n .checkboxContainer {\n height: var(--avatar--size--m);\n }\n }\n\n &:has(.subTitle:not(:empty)) {\n .action,\n .avatar,\n .checkboxContainer {\n margin-top: var(--size-px--xxs);\n }\n }\n\n .topContent {\n order: 1;\n }\n\n :global(.flow--heading--heading-content) {\n max-width: 100%;\n }\n }\n\n &.tileView {\n gap: var(--list-item--padding);\n border-color: var(--list-item--border-color);\n border-width: var(--list-item--border-width);\n border-style: var(--list-item--border-style);\n border-radius: var(--list-item--corner-radius);\n align-content: flex-start;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n .content {\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n padding-inline: var(--list-item--padding);\n padding-bottom: var(--list-item--padding);\n width: 100%;\n }\n\n .avatarContainer {\n width: 100%;\n border-bottom: var(--list-item--border-width)\n var(--list-item--border-style) var(--list-item--border-color);\n aspect-ratio: 16 / 9;\n\n img {\n overflow-clip-margin: unset;\n aspect-ratio: 16 / 9;\n }\n }\n\n .avatar {\n width: 100%;\n height: 100%;\n border-radius: 0;\n\n :global(.flow--avatar--icon) {\n width: var(--size-px--xxl);\n height: var(--size-px--xxl);\n }\n\n :global(.flow--avatar--initials) {\n font-size: var(--size-px--xxl);\n }\n }\n\n .checkboxContainer {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline-start: var(--list-item--padding);\n background-color: var(--list-item--checkbox-background-color);\n border-radius: var(--list-item--checkbox-corner-radius);\n\n :global(.flow--checkbox .flow--checkbox--icon) {\n color: var(--list-item--checkbox-color);\n padding: var(--size-px--xxxs);\n }\n }\n\n .title {\n width: 100%;\n min-width: 0;\n\n :global(.flow--heading--heading-content) {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline: var(--list-item--padding);\n justify-content: end;\n }\n }\n\n &:has(.checkboxContainer:not(:empty)) {\n :global(.flow--heading--heading-content) {\n inset-inline-start: calc(var(--list-item--padding) * 2 + var(--icon--size--m));\n }\n }\n\n .topContent,\n .header {\n width: 100%;\n }\n\n .action {\n align-self: start;\n }\n\n .bottomContent {\n margin-top: auto;\n }\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"ListItemView.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.module.scss"],"sourcesContent":[".view {\n display: flex;\n flex-direction: column;\n\n .checkboxContainer {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n\n &:empty {\n display: none;\n }\n }\n\n .content {\n min-width: 0;\n display: flex;\n gap: var(--list-item--spacing);\n flex-grow: 1;\n flex-wrap: wrap;\n }\n\n .topContent {\n overflow-wrap: anywhere;\n display: flex;\n }\n\n .bottomContent {\n width: 100%;\n overflow-wrap: anywhere;\n display: flex;\n flex-direction: column;\n }\n\n .heading {\n color: var(--text--color--default);\n overflow-wrap: anywhere;\n }\n\n .header {\n overflow-wrap: anywhere;\n display: flex;\n gap: var(--list-item--avatar-to-title-spacing);\n max-width: 100%;\n }\n\n .subTitle {\n font-size: var(--list-item--subtitle-font-size);\n\n .text:not(:last-child)::after {\n content: \"–\";\n display: inline-block;\n margin: 0 var(--size-rem--s);\n }\n }\n\n .badge {\n max-width: 100%;\n }\n\n &.listView {\n padding: var(--list-item--padding);\n gap: var(--list-item--spacing);\n\n .columnLayout {\n flex-grow: 1;\n\n > div {\n flex-grow: 1;\n align-items: center;\n }\n }\n\n .contentWrapper {\n display: flex;\n gap: var(--list-item--spacing);\n justify-content: space-between;\n flex-grow: 1;\n align-items: flex-start;\n }\n\n .content {\n align-items: center;\n align-self: center;\n max-width: 100%;\n }\n\n .title {\n max-width: 100%;\n min-width: 0;\n }\n\n .action {\n margin-inline-start: auto;\n\n button {\n margin-inline-end: 0;\n }\n }\n\n .header {\n order: 0;\n flex-grow: 1;\n align-items: center;\n\n &:empty,\n .subTitle:empty {\n display: none;\n }\n\n .avatar,\n .checkboxContainer {\n align-self: start;\n }\n\n .checkboxContainer {\n height: var(--avatar--size--m);\n }\n }\n\n &:has(.subTitle:not(:empty)) {\n .action,\n .avatar,\n .checkboxContainer {\n margin-top: var(--size-px--xxs);\n }\n }\n\n .topContent {\n order: 1;\n }\n\n :global(.flow--heading--heading-content) {\n max-width: 100%;\n }\n }\n\n &.tileView {\n gap: var(--list-item--padding);\n border-color: var(--list-item--border-color);\n border-width: var(--list-item--border-width);\n border-style: var(--list-item--border-style);\n border-radius: var(--list-item--corner-radius);\n align-content: flex-start;\n height: 100%;\n position: relative;\n overflow: hidden;\n\n .content {\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n padding-inline: var(--list-item--padding);\n padding-bottom: var(--list-item--padding);\n width: 100%;\n }\n\n .avatarContainer {\n width: 100%;\n border-bottom: var(--list-item--border-width)\n var(--list-item--border-style) var(--list-item--border-color);\n aspect-ratio: 16 / 9;\n\n img {\n overflow-clip-margin: unset;\n aspect-ratio: 16 / 9;\n }\n }\n\n .avatar {\n width: 100%;\n height: 100%;\n border-radius: 0;\n\n :global(.flow--avatar--icon) {\n width: var(--size-px--xxl);\n height: var(--size-px--xxl);\n }\n\n :global(.flow--avatar--initials) {\n font-size: var(--size-px--xxl);\n }\n }\n\n .checkboxContainer {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline-start: var(--list-item--padding);\n background-color: var(--list-item--checkbox-background-color);\n border-radius: var(--list-item--checkbox-corner-radius);\n\n :global(.flow--checkbox .flow--checkbox--icon) {\n color: var(--list-item--checkbox-color);\n padding: var(--size-px--xxxs);\n }\n }\n\n .title {\n width: 100%;\n min-width: 0;\n\n :global(.flow--heading--heading-content) {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline: var(--list-item--padding);\n justify-content: end;\n }\n }\n\n &:has(.checkboxContainer:not(:empty)) {\n :global(.flow--heading--heading-content) {\n inset-inline-start: calc(var(--list-item--padding) * 2 + var(--icon--size--m));\n }\n }\n\n .topContent,\n .header {\n width: 100%;\n }\n\n .action {\n align-self: start;\n }\n\n .bottomContent {\n margin-top: auto;\n }\n }\n}\n"],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"file":"Section.module.mjs","names":[],"sources":["../../../../../../../src/components/Section/Section.module.scss"],"sourcesContent":[".section {\n display: flex;\n flex-direction: column;\n row-gap: var(--section--spacing);\n container-type: inline-size;\n width: 100%;\n\n > form {\n display: flex;\n flex-direction: column;\n row-gap: var(--section--spacing);\n }\n\n /* Children that render nothing still leave the element behind — the guard in\n Section.tsx only sees the child, not its output (a boundary returning null,\n an empty fragment, a map over an empty array). Collapse it so it neither\n draws its own separator nor claims section-to-section spacing, while\n staying in the sibling chain so the next section keeps exactly one\n separator. */\n &:empty {\n display: none;\n }\n\n + .section {\n margin-block-start: var(--section--section-to-section-spacing);\n }\n\n &:not(.hideSeparator) + .section {\n border-block-start: var(--separator--height) var(--border-style--default)\n var(--separator--color);\n padding-block-start: var(--section--section-to-section-spacing);\n }\n\n h2.heading:not(:first-child),\n h3.heading:not(:first-child) {\n margin-top: var(--section--sub-heading-spacing-m);\n }\n\n h4.heading:not(:first-child),\n h5.heading:not(:first-child),\n h6.heading:not(:first-child) {\n margin-top: var(--section--sub-heading-spacing-s);\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"Section.module.mjs","names":[],"sources":["../../../../../../../src/components/Section/Section.module.scss"],"sourcesContent":[".section {\n display: flex;\n flex-direction: column;\n row-gap: var(--section--spacing);\n width: 100%;\n min-width: 0;\n\n > form {\n display: flex;\n flex-direction: column;\n row-gap: var(--section--spacing);\n }\n\n /* Children that render nothing still leave the element behind — the guard in\n Section.tsx only sees the child, not its output (a boundary returning null,\n an empty fragment, a map over an empty array). Collapse it so it neither\n draws its own separator nor claims section-to-section spacing, while\n staying in the sibling chain so the next section keeps exactly one\n separator. */\n &:empty {\n display: none;\n }\n\n + .section {\n margin-block-start: var(--section--section-to-section-spacing);\n }\n\n &:not(.hideSeparator) + .section {\n border-block-start: var(--separator--height) var(--border-style--default)\n var(--separator--color);\n padding-block-start: var(--section--section-to-section-spacing);\n }\n\n h2.heading:not(:first-child),\n h3.heading:not(:first-child) {\n margin-top: var(--section--sub-heading-spacing-m);\n }\n\n h4.heading:not(:first-child),\n h5.heading:not(:first-child),\n h6.heading:not(:first-child) {\n margin-top: var(--section--sub-heading-spacing-s);\n }\n}\n"],"mappings":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-react-components",
3
- "version": "1.3.0-next.18",
3
+ "version": "1.3.0-next.19",
4
4
  "type": "module",
5
5
  "description": "A React implementation of Flow, mittwald’s design system",
6
6
  "homepage": "https://flow.mittwald.de",
@@ -83,9 +83,9 @@
83
83
  "@internationalized/string-compiler": "^3.4.1",
84
84
  "@lezer/common": "^1.5.2",
85
85
  "@lezer/highlight": "^1.2.3",
86
- "@mittwald/flow-icons": "^1.3.0-next.18",
86
+ "@mittwald/flow-icons": "^1.3.0-next.19",
87
87
  "@mittwald/password-tools-js": "^3.0.0",
88
- "@mittwald/react-tunnel": "^1.3.0-next.18",
88
+ "@mittwald/react-tunnel": "^1.3.0-next.19",
89
89
  "@mittwald/react-use-promise": "^4.2.2",
90
90
  "@react-aria/form": "^3.2.1",
91
91
  "@react-aria/i18n": "^3.13.1",
@@ -138,12 +138,12 @@
138
138
  "@internationalized/date": "^3.12.3",
139
139
  "@lezer/generator": "^1.8.0",
140
140
  "@lezer/lr": "^1.4.10",
141
- "@mittwald/flow-core": "1.3.0-next.18",
142
- "@mittwald/flow-design-tokens": "1.3.0-next.18",
143
- "@mittwald/flow-icons-base": "1.3.0-next.18",
141
+ "@mittwald/flow-core": "1.3.0-next.19",
142
+ "@mittwald/flow-design-tokens": "1.3.0-next.19",
143
+ "@mittwald/flow-icons-base": "1.3.0-next.19",
144
144
  "@mittwald/react-use-promise": "^4.2.2",
145
145
  "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
146
- "@mittwald/typescript-config": "1.3.0-next.18",
146
+ "@mittwald/typescript-config": "1.3.0-next.19",
147
147
  "@nx/storybook": "^22.7.6",
148
148
  "@storybook/addon-a11y": "^10.5.10",
149
149
  "@storybook/addon-actions": "^9.0.8",
@@ -195,7 +195,7 @@
195
195
  },
196
196
  "peerDependencies": {
197
197
  "@internationalized/date": "^3.12.2",
198
- "@mittwald/flow-icons-pro": "1.3.0-next.18",
198
+ "@mittwald/flow-icons-pro": "1.3.0-next.19",
199
199
  "@mittwald/react-use-promise": "^4.2.2",
200
200
  "next": "^16.2.3",
201
201
  "react": "^19.2.0",
@@ -219,5 +219,5 @@
219
219
  "browserslist": [
220
220
  "baseline widely available"
221
221
  ],
222
- "gitHead": "b74e257b69476e9352f1071e527f504f02bc4a35"
222
+ "gitHead": "412ba9031ad37839847167b9a9b61253a48d3f1f"
223
223
  }