@mittwald/flow-react-components 1.4.7 → 1.4.9
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/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/List/components/ListItemView/ListItemView.module.mjs.map +1 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
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 > :global(.flow--column-layout) {\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 :global(.flow--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 // A consumer child inside `Avatar` — Flow `Image` or a bare `<img>`.\n // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\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-text-spacer) {\n display: none;\n }\n\n :global(.flow--heading--heading-content) {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline: var(--list-item--padding);\n display: flex;\n flex-wrap: wrap;\n gap: var(--heading--icon-to-text-spacing);\n justify-content: end;\n }\n\n :global(.flow--heading--heading-content-item):not(:last-child) {\n margin-inline-end: 0;\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 > :global(.flow--column-layout) {\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 :global(.flow--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 // A consumer child inside `Avatar` — Flow `Image` or a bare `<img>`.\n // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n img {\n overflow-clip-margin: unset;\n aspect-ratio: 16 / 9;\n border-radius: 0;\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-text-spacer) {\n display: none;\n }\n\n :global(.flow--heading--heading-content) {\n position: absolute;\n top: var(--list-item--padding);\n inset-inline: var(--list-item--padding);\n display: flex;\n flex-wrap: wrap;\n gap: var(--heading--icon-to-text-spacing);\n justify-content: end;\n }\n\n :global(.flow--heading--heading-content-item):not(:last-child) {\n margin-inline-end: 0;\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":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.9",
|
|
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.4.
|
|
86
|
+
"@mittwald/flow-icons": "^1.4.9",
|
|
87
87
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
88
|
-
"@mittwald/react-tunnel": "^1.4.
|
|
88
|
+
"@mittwald/react-tunnel": "^1.4.9",
|
|
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.4.
|
|
142
|
-
"@mittwald/flow-design-tokens": "1.4.
|
|
143
|
-
"@mittwald/flow-icons-base": "1.4.
|
|
141
|
+
"@mittwald/flow-core": "1.4.9",
|
|
142
|
+
"@mittwald/flow-design-tokens": "1.4.9",
|
|
143
|
+
"@mittwald/flow-icons-base": "1.4.9",
|
|
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.4.
|
|
146
|
+
"@mittwald/typescript-config": "1.4.9",
|
|
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.4.
|
|
198
|
+
"@mittwald/flow-icons-pro": "1.4.9",
|
|
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": "
|
|
222
|
+
"gitHead": "a1f5091b8f85228c92497af00a80ff0794f0127e"
|
|
223
223
|
}
|