@mittwald/flow-react-components 0.1.0-alpha.424 → 0.1.0-alpha.426

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.1.0-alpha.426](https://github.com/mittwald/flow/compare/0.1.0-alpha.425...0.1.0-alpha.426) (2025-02-14)
+
+**Note:** Version bump only for package @mittwald/flow-react-components
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.425](https://github.com/mittwald/flow/compare/0.1.0-alpha.424...0.1.0-alpha.425) (2025-02-14)
+
+### Bug Fixes
+
+- **SegmentedControl:** fix disabled segments
+  ([#1174](https://github.com/mittwald/flow/issues/1174))
+  ([fdb3ff0](https://github.com/mittwald/flow/commit/fdb3ff07ae92fbc1e575267e4a493989d003d547))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # [0.1.0-alpha.424](https://github.com/mittwald/flow/compare/0.1.0-alpha.423...0.1.0-alpha.424) (2025-02-14)
 
 **Note:** Version bump only for package @mittwald/flow-react-components

package/dist/css/List.css

@@ -1 +1 @@
-@charset "UTF-8";.flow--list--items--item--view{display:flex;padding:var(--list-item--padding);gap:var(--list-item--spacing);align-items:center;flex-wrap:wrap}.flow--list--items--item--view .flow--list--items--item--view--content{display:flex;flex-wrap:wrap;gap:var(--list-item--spacing);align-items:center;flex-grow:1}.flow--list--items--item--view .flow--list--items--item--view--title{order:0;flex-grow:1;display:grid;grid-column-gap:var(--list-item--avatar-to-title-spacing);grid-template-areas:"avatar title   " "avatar subtitle";grid-template-columns:auto 1fr}.flow--list--items--item--view .flow--list--items--item--view--title:empty,.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title:empty{display:none}.flow--list--items--item--view .flow--list--items--item--view--title:not(:has(.flow--list--items--item--view--avatar)){grid-template-areas:"title   " "subtitle";grid-template-columns:1fr}.flow--list--items--item--view .flow--list--items--item--view--title:has(.flow--list--items--item--view--sub-title:empty){grid-template-areas:"avatar title"}.flow--list--items--item--view .flow--list--items--item--view--title:has(.flow--list--items--item--view--sub-title:empty):not(:has(.flow--list--items--item--view--avatar)){grid-template-areas:"title"}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--avatar{grid-area:avatar;align-self:center}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--heading{grid-area:title;align-self:center}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title{grid-area:subtitle;font-size:var(--list-item--subtitle-font-size)}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title .flow--list--items--item--view--text:not(:last-child):after{content:"–";display:inline-block;margin:0 var(--size-rem--s)}.flow--list--items--item--view .flow--list--items--item--view--top-content{order:2}.flow--list--items--item--view .flow--list--items--item--view--action{margin-left:auto}.flow--list--items--item--view .flow--list--items--item--view--bottom-content{order:4;width:100%}.flow--list--items--item--view.flow--list--items--item--view--tile{padding:0;border-color:var(--list-item--border-color);border-width:var(--list-item--border-width);border-style:var(--list-item--border-style);border-radius:var(--list-item--corner-radius);align-content:start;height:100%;gap:var(--list-item--padding)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--action{display:none}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar-container{width:100%;overflow:hidden;border-bottom-color:var(--list-item--border-color);border-bottom-width:var(--list-item--border-width);border-bottom-style:var(--list-item--border-style);border-top-left-radius:var(--corner-radius--default);border-top-right-radius:var(--corner-radius--default);aspect-ratio:16/9}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar{width:100%;height:100%;border-radius:0}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar .flow--avatar--icon{width:var(--size-px--xxl);height:var(--size-px--xxl)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar .flow--avatar--initials{font-size:var(--size-px--xxl)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--title:has(.flow--list--items--item--view--badge){position:relative;padding-bottom:calc(var(--size-rem--xxs) + var(--badge--line-height) + var(--badge--padding-y) * 2)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--title:has(.flow--list--items--item--view--badge) .flow--list--items--item--view--badge{position:absolute;bottom:0;right:0;left:0;margin-left:auto}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--content{display:flex;justify-content:space-between;align-items:start;padding-inline:var(--list-item--padding);padding-bottom:var(--list-item--padding);width:100%}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--top-content{width:100%}.flow--list--list-summary{border-width:var(--list-item--border-width);border-bottom-width:0;border-style:var(--list-item--border-style);border-color:var(--list-item--border-color);padding:var(--list-item--padding);border-top-left-radius:var(--list-item--corner-radius);border-top-right-radius:var(--list-item--corner-radius)}.flow--list--header{display:flex;flex-direction:column;row-gap:var(--list--spacing)}.flow--list--header .flow--list--header--picker-list-and-search{display:flex;gap:var(--list--block-to-block-spacing);align-items:center;justify-content:space-between;flex-wrap:wrap-reverse}.flow--list--header .flow--list--header--picker-list{display:flex;flex-wrap:wrap;gap:var(--list--spacing)}.flow--list--header .flow--list--header--search-and-actions{display:flex;flex-grow:1;gap:var(--list--spacing);flex-wrap:wrap-reverse;justify-content:end}.flow--list--header .flow--list--header--search-field{max-width:180px;flex-grow:1;transition:max-width var(--transition--duration--default)}.flow--list--header .flow--list--header--search-field:has(input:focus){max-width:600px}.flow--list--header--active-filters{display:flex;flex-direction:row;column-gap:var(--list--spacing);row-gap:var(--list--spacing);flex-wrap:wrap;align-items:center}.flow--list--header--active-filters .flow--list--header--active-filters--clear-button{margin-inline-start:auto}.flow--list{display:flex;flex-direction:column;row-gap:var(--list--block-to-block-spacing);container-type:inline-size}.flow--list :has(.flow--list--list-summary) .flow--list--items,.flow--list :has(.flow--list--list-summary) .flow--list--table{border-top-left-radius:0;border-top-right-radius:0}.flow--list--items{display:flex;flex-direction:column;border-radius:var(--list-item--corner-radius);border-color:var(--list-item--border-color);border-width:var(--list-item--border-width);border-style:var(--list-item--border-style);overflow:hidden}.flow--list--items:empty{display:none}.flow--list--items.flow--list--items--is-loading{pointer-events:none;opacity:.5}.flow--list--items[data-empty=true]{border:none}.flow--list--items.flow--list--items--tiles{display:grid;border:none;gap:var(--list-item--spacing)}.flow--list--items--item{cursor:default;background-color:var(--list-item--background-color--default)}.flow--list--items--item{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--list--items--item[data-focused],.flow--list--items--item:focus{outline-style:none}.flow--list--items--item[data-focus-visible],.flow--list--items--item:focus-visible{outline-style:auto}.flow--list--items--item[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--list--items--item.flow--list--items--item{outline-offset:calc(var(--size-px--xs) * -1)}.flow--list--items--item:where(.flow--list--items--item--is-selected){background-color:var(--list-item--background-color--pressed)}.flow--list--items--item:not(:last-child){border-bottom-color:var(--list-item--border-color);border-bottom-width:var(--list-item--border-width);border-bottom-style:var(--list-item--border-style)}.flow--list--items--item:where(.flow--list--items--item--has-action):not(.flow--list--items--item:has(.flow--list--items--item--view--bottom-content:hover)):not(.flow--list--items--item--is-selected):hover{background-color:var(--list-item--background-color--hover)}.flow--list--items--item:where(.flow--list--items--item--has-action):not(.flow--list--items--item:has(.flow--list--items--item--view--bottom-content:hover))[data-pressed]{background-color:var(--list-item--background-color--pressed)}.flow--list--items--item.flow--list--items--item--tile{border:none}.flow--list--items--item.flow--list--items--item--tile:where(.flow--list--items--item--has-action):not(.flow--list--items--item--is-selected):hover .flow--avatar{filter:brightness(var(--image-button--brightness--hover))}.flow--list--items--item.flow--list--items--item--tile:where(.flow--list--items--item--has-action)[data-pressed] .flow--avatar{filter:brightness(var(--image-button--brightness--pressed))}.flow--list--footer{font-size:var(--font-size-text--s);display:flex;flex-direction:column;align-items:center;row-gap:var(--list--spacing)}.flow--list--table.flow--list--table--is-loading{pointer-events:none;opacity:.5}.flow--list--table--row.flow--list--table--is-selected{background-color:var(--list-item--background-color--pressed)}.flow--list--table--row:where(.flow--list--table--has-action){cursor:default}.flow--list--table--row:where(.flow--list--table--has-action):not(.flow--list--table--is-selected):hover{background-color:var(--list-item--background-color--hover)}.flow--list--table--row:where(.flow--list--table--has-action)[data-pressed]{background-color:var(--list-item--background-color--pressed)}
+@charset "UTF-8";.flow--list--items--item--view{display:flex;padding:var(--list-item--padding);gap:var(--list-item--spacing);align-items:center;flex-wrap:wrap}.flow--list--items--item--view .flow--list--items--item--view--content{display:flex;flex-wrap:wrap;gap:var(--list-item--spacing);align-items:center;flex-grow:1}.flow--list--items--item--view .flow--list--items--item--view--title{order:0;flex-grow:1;display:grid;grid-column-gap:var(--list-item--avatar-to-title-spacing);grid-template-areas:"avatar title   " "avatar subtitle";grid-template-columns:auto 1fr}.flow--list--items--item--view .flow--list--items--item--view--title:empty,.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title:empty{display:none}.flow--list--items--item--view .flow--list--items--item--view--title:not(:has(.flow--list--items--item--view--avatar)){grid-template-areas:"title   " "subtitle";grid-template-columns:1fr}.flow--list--items--item--view .flow--list--items--item--view--title:has(.flow--list--items--item--view--sub-title:empty){grid-template-areas:"avatar title"}.flow--list--items--item--view .flow--list--items--item--view--title:has(.flow--list--items--item--view--sub-title:empty):not(:has(.flow--list--items--item--view--avatar)){grid-template-areas:"title"}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--avatar{grid-area:avatar;align-self:center}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--heading{grid-area:title;align-self:center;color:var(--text--color--default)}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title{grid-area:subtitle;font-size:var(--list-item--subtitle-font-size)}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title .flow--list--items--item--view--text:not(:last-child):after{content:"–";display:inline-block;margin:0 var(--size-rem--s)}.flow--list--items--item--view .flow--list--items--item--view--top-content{order:2}.flow--list--items--item--view .flow--list--items--item--view--action{margin-left:auto}.flow--list--items--item--view .flow--list--items--item--view--bottom-content{order:4;width:100%}.flow--list--items--item--view.flow--list--items--item--view--tile{padding:0;border-color:var(--list-item--border-color);border-width:var(--list-item--border-width);border-style:var(--list-item--border-style);border-radius:var(--list-item--corner-radius);align-content:start;height:100%;gap:var(--list-item--padding)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--action{display:none}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar-container{width:100%;overflow:hidden;border-bottom-color:var(--list-item--border-color);border-bottom-width:var(--list-item--border-width);border-bottom-style:var(--list-item--border-style);border-top-left-radius:var(--corner-radius--default);border-top-right-radius:var(--corner-radius--default);aspect-ratio:16/9}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar{width:100%;height:100%;border-radius:0}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar .flow--avatar--icon{width:var(--size-px--xxl);height:var(--size-px--xxl)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar .flow--avatar--initials{font-size:var(--size-px--xxl)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--title:has(.flow--list--items--item--view--badge){position:relative;padding-bottom:calc(var(--size-rem--xxs) + var(--badge--line-height) + var(--badge--padding-y) * 2)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--title:has(.flow--list--items--item--view--badge) .flow--list--items--item--view--badge{position:absolute;bottom:0;right:0;left:0;margin-left:auto}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--content{display:flex;justify-content:space-between;align-items:start;padding-inline:var(--list-item--padding);padding-bottom:var(--list-item--padding);width:100%}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--top-content{width:100%}.flow--list--list-summary{border-width:var(--list-item--border-width);border-bottom-width:0;border-style:var(--list-item--border-style);border-color:var(--list-item--border-color);padding:var(--list-item--padding);border-top-left-radius:var(--list-item--corner-radius);border-top-right-radius:var(--list-item--corner-radius)}.flow--list--header{display:flex;flex-direction:column;row-gap:var(--list--spacing)}.flow--list--header .flow--list--header--picker-list-and-search{display:flex;gap:var(--list--block-to-block-spacing);align-items:center;justify-content:space-between;flex-wrap:wrap-reverse}.flow--list--header .flow--list--header--picker-list{display:flex;flex-wrap:wrap;gap:var(--list--spacing)}.flow--list--header .flow--list--header--search-and-actions{display:flex;flex-grow:1;gap:var(--list--spacing);flex-wrap:wrap-reverse;justify-content:end}.flow--list--header .flow--list--header--search-field{max-width:180px;flex-grow:1;transition:max-width var(--transition--duration--default)}.flow--list--header .flow--list--header--search-field:has(input:focus){max-width:600px}.flow--list--header--active-filters{display:flex;flex-direction:row;column-gap:var(--list--spacing);row-gap:var(--list--spacing);flex-wrap:wrap;align-items:center}.flow--list--header--active-filters .flow--list--header--active-filters--clear-button{margin-inline-start:auto}.flow--list{display:flex;flex-direction:column;row-gap:var(--list--block-to-block-spacing);container-type:inline-size}.flow--list :has(.flow--list--list-summary) .flow--list--items,.flow--list :has(.flow--list--list-summary) .flow--list--table{border-top-left-radius:0;border-top-right-radius:0}.flow--list--items{display:flex;flex-direction:column;border-radius:var(--list-item--corner-radius);border-color:var(--list-item--border-color);border-width:var(--list-item--border-width);border-style:var(--list-item--border-style);overflow:hidden}.flow--list--items:empty{display:none}.flow--list--items.flow--list--items--is-loading{pointer-events:none;opacity:.5}.flow--list--items[data-empty=true]{border:none}.flow--list--items.flow--list--items--tiles{display:grid;border:none;gap:var(--list-item--spacing)}.flow--list--items--item{cursor:default;background-color:var(--list-item--background-color--default)}.flow--list--items--item{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--list--items--item[data-focused],.flow--list--items--item:focus{outline-style:none}.flow--list--items--item[data-focus-visible],.flow--list--items--item:focus-visible{outline-style:auto}.flow--list--items--item[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--list--items--item.flow--list--items--item{outline-offset:calc(var(--size-px--xs) * -1)}.flow--list--items--item:where(.flow--list--items--item--is-selected){background-color:var(--list-item--background-color--pressed)}.flow--list--items--item:not(:last-child){border-bottom-color:var(--list-item--border-color);border-bottom-width:var(--list-item--border-width);border-bottom-style:var(--list-item--border-style)}.flow--list--items--item:where(.flow--list--items--item--has-action):not(.flow--list--items--item:has(.flow--list--items--item--view--bottom-content:hover)):not(.flow--list--items--item--is-selected):hover{background-color:var(--list-item--background-color--hover)}.flow--list--items--item:where(.flow--list--items--item--has-action):not(.flow--list--items--item:has(.flow--list--items--item--view--bottom-content:hover))[data-pressed]{background-color:var(--list-item--background-color--pressed)}.flow--list--items--item.flow--list--items--item--tile{border:none}.flow--list--items--item.flow--list--items--item--tile:where(.flow--list--items--item--has-action):not(.flow--list--items--item--is-selected):hover .flow--avatar{filter:brightness(var(--image-button--brightness--hover))}.flow--list--items--item.flow--list--items--item--tile:where(.flow--list--items--item--has-action)[data-pressed] .flow--avatar{filter:brightness(var(--image-button--brightness--pressed))}.flow--list--footer{font-size:var(--font-size-text--s);display:flex;flex-direction:column;align-items:center;row-gap:var(--list--spacing)}.flow--list--table.flow--list--table--is-loading{pointer-events:none;opacity:.5}.flow--list--table--row.flow--list--table--is-selected{background-color:var(--list-item--background-color--pressed)}.flow--list--table--row:where(.flow--list--table--has-action){cursor:default}.flow--list--table--row:where(.flow--list--table--has-action):not(.flow--list--table--is-selected):hover{background-color:var(--list-item--background-color--hover)}.flow--list--table--row:where(.flow--list--table--has-action)[data-pressed]{background-color:var(--list-item--background-color--pressed)}

package/dist/css/SegmentedControl.css

@@ -1 +1 @@
-.flow--segmented-control{order:2;container-type:inline-size;isolation:isolate}.flow--segmented-control .flow--segmented-control--segments{display:flex;flex-wrap:nowrap;order:2}@container (max-width: 250px){.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xs .flow--segmented-control .flow--segmented-control--segments{flex-direction:column}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xs .flow--segmented-control .flow--segmented-control--segment{margin-bottom:-1px;margin-right:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xs .flow--segmented-control .flow--segmented-control--segment:first-of-type{border-start-start-radius:var(--form-control--corner-radius);border-start-end-radius:var(--form-control--corner-radius);border-end-start-radius:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xs .flow--segmented-control .flow--segmented-control--segment:last-of-type{border-end-end-radius:var(--form-control--corner-radius);border-end-start-radius:var(--form-control--corner-radius);border-start-end-radius:0;margin:0}}@container (max-width: 400px){.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-s .flow--segmented-control .flow--segmented-control--segments{flex-direction:column}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-s .flow--segmented-control .flow--segmented-control--segment{margin-bottom:-1px;margin-right:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-s .flow--segmented-control .flow--segmented-control--segment:first-of-type{border-start-start-radius:var(--form-control--corner-radius);border-start-end-radius:var(--form-control--corner-radius);border-end-start-radius:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-s .flow--segmented-control .flow--segmented-control--segment:last-of-type{border-end-end-radius:var(--form-control--corner-radius);border-end-start-radius:var(--form-control--corner-radius);border-start-end-radius:0;margin:0}}@container (max-width: 550px){.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-m .flow--segmented-control .flow--segmented-control--segments{flex-direction:column}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-m .flow--segmented-control .flow--segmented-control--segment{margin-bottom:-1px;margin-right:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-m .flow--segmented-control .flow--segmented-control--segment:first-of-type{border-start-start-radius:var(--form-control--corner-radius);border-start-end-radius:var(--form-control--corner-radius);border-end-start-radius:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-m .flow--segmented-control .flow--segmented-control--segment:last-of-type{border-end-end-radius:var(--form-control--corner-radius);border-end-start-radius:var(--form-control--corner-radius);border-start-end-radius:0;margin:0}}@container (max-width: 700px){.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-l .flow--segmented-control .flow--segmented-control--segments{flex-direction:column}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-l .flow--segmented-control .flow--segmented-control--segment{margin-bottom:-1px;margin-right:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-l .flow--segmented-control .flow--segmented-control--segment:first-of-type{border-start-start-radius:var(--form-control--corner-radius);border-start-end-radius:var(--form-control--corner-radius);border-end-start-radius:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-l .flow--segmented-control .flow--segmented-control--segment:last-of-type{border-end-end-radius:var(--form-control--corner-radius);border-end-start-radius:var(--form-control--corner-radius);border-start-end-radius:0;margin:0}}@container (max-width: 850px){.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xl .flow--segmented-control .flow--segmented-control--segments{flex-direction:column}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xl .flow--segmented-control .flow--segmented-control--segment{margin-bottom:-1px;margin-right:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xl .flow--segmented-control .flow--segmented-control--segment:first-of-type{border-start-start-radius:var(--form-control--corner-radius);border-start-end-radius:var(--form-control--corner-radius);border-end-start-radius:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xl .flow--segmented-control .flow--segmented-control--segment:last-of-type{border-end-end-radius:var(--form-control--corner-radius);border-end-start-radius:var(--form-control--corner-radius);border-start-end-radius:0;margin:0}}.flow--segmented-control--segment{flex:1;display:grid;column-gap:var(--form-control--spacing-x);grid-template-areas:"label checkmark";grid-template-columns:1fr auto;margin-right:-1px;border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--corner-radius);padding-block:calc(var(--form-control--padding-y) - var(--form-control--border-width));padding-inline:var(--form-control--padding-x);color:var(--form-control--content-color--default);border-color:var(--form-control--border-color--default);background-color:var(--form-control--background-color--default);transition-property:color,background-color,border-color;transition-duration:var(--transition--duration--default);order:2}.flow--segmented-control--segment::placeholder{color:var(--form-control--placeholder-color--default)}.flow--segmented-control--segment:hover{background-color:var(--form-control--background-color--hover)}.flow--segmented-control--segment[data-invalid]{border-color:var(--form-control--border-color--invalid);background-color:var(--form-control--background-color--invalid)}.flow--segmented-control--segment:focus-within{border-color:var(--form-control--border-color--focused);background-color:var(--form-control--background-color--focused)}.flow--segmented-control--segment:focus-visible,.flow--segmented-control--segment:focus{outline:none}.flow--segmented-control--segment[data-selected]{color:var(--form-control--content-color--selected);border-color:var(--form-control--border-color--selected);background-color:var(--form-control--background-color--selected)}.flow--segmented-control--segment:disabled,.flow--segmented-control--segment[data-disabled],[aria-disabled] .flow--segmented-control--segment{color:var(--form-control--content-color--disabled);border-color:var(--form-control--border-color--disabled);background-color:var(--form-control--background-color--disabled)}.flow--segmented-control--segment:disabled::placeholder,.flow--segmented-control--segment[data-disabled]::placeholder,[aria-disabled] .flow--segmented-control--segment::placeholder{color:var(--form-control--placeholder-color--disabled)}.flow--segmented-control--segment{border-radius:0}.flow--segmented-control--segment:first-of-type{border-start-start-radius:var(--form-control--corner-radius);border-end-start-radius:var(--form-control--corner-radius)}.flow--segmented-control--segment:last-of-type{border-start-end-radius:var(--form-control--corner-radius);border-end-end-radius:var(--form-control--corner-radius);margin:0}.flow--segmented-control--segment .flow--segmented-control--segment--checkmark{grid-area:checkmark;display:none}.flow--segmented-control--segment[data-selected]{z-index:1}.flow--segmented-control--segment[data-selected] .flow--segmented-control--segment--checkmark{display:block}
+.flow--segmented-control{order:2;container-type:inline-size;isolation:isolate}.flow--segmented-control .flow--segmented-control--segments{display:flex;flex-wrap:nowrap;order:2}@container (max-width: 250px){.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xs .flow--segmented-control .flow--segmented-control--segments{flex-direction:column}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xs .flow--segmented-control .flow--segmented-control--segment{margin-bottom:-1px;margin-right:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xs .flow--segmented-control .flow--segmented-control--segment:first-of-type{border-start-start-radius:var(--form-control--corner-radius);border-start-end-radius:var(--form-control--corner-radius);border-end-start-radius:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xs .flow--segmented-control .flow--segmented-control--segment:last-of-type{border-end-end-radius:var(--form-control--corner-radius);border-end-start-radius:var(--form-control--corner-radius);border-start-end-radius:0;margin:0}}@container (max-width: 400px){.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-s .flow--segmented-control .flow--segmented-control--segments{flex-direction:column}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-s .flow--segmented-control .flow--segmented-control--segment{margin-bottom:-1px;margin-right:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-s .flow--segmented-control .flow--segmented-control--segment:first-of-type{border-start-start-radius:var(--form-control--corner-radius);border-start-end-radius:var(--form-control--corner-radius);border-end-start-radius:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-s .flow--segmented-control .flow--segmented-control--segment:last-of-type{border-end-end-radius:var(--form-control--corner-radius);border-end-start-radius:var(--form-control--corner-radius);border-start-end-radius:0;margin:0}}@container (max-width: 550px){.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-m .flow--segmented-control .flow--segmented-control--segments{flex-direction:column}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-m .flow--segmented-control .flow--segmented-control--segment{margin-bottom:-1px;margin-right:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-m .flow--segmented-control .flow--segmented-control--segment:first-of-type{border-start-start-radius:var(--form-control--corner-radius);border-start-end-radius:var(--form-control--corner-radius);border-end-start-radius:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-m .flow--segmented-control .flow--segmented-control--segment:last-of-type{border-end-end-radius:var(--form-control--corner-radius);border-end-start-radius:var(--form-control--corner-radius);border-start-end-radius:0;margin:0}}@container (max-width: 700px){.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-l .flow--segmented-control .flow--segmented-control--segments{flex-direction:column}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-l .flow--segmented-control .flow--segmented-control--segment{margin-bottom:-1px;margin-right:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-l .flow--segmented-control .flow--segmented-control--segment:first-of-type{border-start-start-radius:var(--form-control--corner-radius);border-start-end-radius:var(--form-control--corner-radius);border-end-start-radius:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-l .flow--segmented-control .flow--segmented-control--segment:last-of-type{border-end-end-radius:var(--form-control--corner-radius);border-end-start-radius:var(--form-control--corner-radius);border-start-end-radius:0;margin:0}}@container (max-width: 850px){.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xl .flow--segmented-control .flow--segmented-control--segments{flex-direction:column}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xl .flow--segmented-control .flow--segmented-control--segment{margin-bottom:-1px;margin-right:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xl .flow--segmented-control .flow--segmented-control--segment:first-of-type{border-start-start-radius:var(--form-control--corner-radius);border-start-end-radius:var(--form-control--corner-radius);border-end-start-radius:0}.flow--segmented-control--segmented-control-container.flow--segmented-control--container-breakpoint-size-xl .flow--segmented-control .flow--segmented-control--segment:last-of-type{border-end-end-radius:var(--form-control--corner-radius);border-end-start-radius:var(--form-control--corner-radius);border-start-end-radius:0;margin:0}}.flow--segmented-control--segment{flex:1;display:grid;column-gap:var(--form-control--spacing-x);grid-template-areas:"label checkmark";grid-template-columns:1fr auto;margin-right:-1px;z-index:1;border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--corner-radius);padding-block:calc(var(--form-control--padding-y) - var(--form-control--border-width));padding-inline:var(--form-control--padding-x);color:var(--form-control--content-color--default);border-color:var(--form-control--border-color--default);background-color:var(--form-control--background-color--default);transition-property:color,background-color,border-color;transition-duration:var(--transition--duration--default);order:2}.flow--segmented-control--segment::placeholder{color:var(--form-control--placeholder-color--default)}.flow--segmented-control--segment:hover{background-color:var(--form-control--background-color--hover)}.flow--segmented-control--segment[data-invalid]{border-color:var(--form-control--border-color--invalid);background-color:var(--form-control--background-color--invalid)}.flow--segmented-control--segment:focus-within{border-color:var(--form-control--border-color--focused);background-color:var(--form-control--background-color--focused)}.flow--segmented-control--segment:focus-visible,.flow--segmented-control--segment:focus{outline:none}.flow--segmented-control--segment[data-selected]{color:var(--form-control--content-color--selected);border-color:var(--form-control--border-color--selected);background-color:var(--form-control--background-color--selected)}.flow--segmented-control--segment:disabled,.flow--segmented-control--segment[data-disabled],[aria-disabled] .flow--segmented-control--segment{color:var(--form-control--content-color--disabled);border-color:var(--form-control--border-color--disabled);background-color:var(--form-control--background-color--disabled)}.flow--segmented-control--segment:disabled::placeholder,.flow--segmented-control--segment[data-disabled]::placeholder,[aria-disabled] .flow--segmented-control--segment::placeholder{color:var(--form-control--placeholder-color--disabled)}.flow--segmented-control--segment{border-radius:0}.flow--segmented-control--segment:first-of-type{border-start-start-radius:var(--form-control--corner-radius);border-end-start-radius:var(--form-control--corner-radius)}.flow--segmented-control--segment:last-of-type{border-start-end-radius:var(--form-control--corner-radius);border-end-end-radius:var(--form-control--corner-radius);margin:0}.flow--segmented-control--segment .flow--segmented-control--segment--checkmark{grid-area:checkmark;display:none}.flow--segmented-control--segment[data-selected]{z-index:2}.flow--segmented-control--segment[data-selected] .flow--segmented-control--segment--checkmark{display:block}.flow--segmented-control--segment[data-disabled]{z-index:0}