@flowstack-ui/brick 0.1.1 → 0.1.3
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/README.md +3 -1
- package/dist/styles/checkbox-group.css +1 -1
- package/dist/styles/checkbox-group.css.map +1 -1
- package/dist/styles/code-block.css +1 -1
- package/dist/styles/code-block.css.map +1 -1
- package/dist/styles/core.css.map +1 -1
- package/dist/styles/dropdown-menu.css.map +1 -1
- package/dist/styles/pagination.css +1 -1
- package/dist/styles/pagination.css.map +1 -1
- package/dist/styles/toggle-group.css +1 -1
- package/dist/styles/toggle-group.css.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/docs/guides/installation.md +4 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,+6DAsCA,+JAKA,kNAMA,sgBAUA,sgBAUA,iQAcA,0GAOA,muBAqBA,iZAUA,uMAIA,4MAIA,4MAMA,uPAOA,4KAOA,wHACA,mHAEA,uCACE,oGAKF,8BACE,2GACA,8IAGA,wHDpKJ","sources":["home/runner/work/brick/brick/.brick-cache/production/pagination.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/pagination/pagination.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/pagination/pagination.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n .brick-pagination {\n --brick-pagination-root-background: transparent;\n --brick-pagination-root-border-color: var(--brick-color-border-subtle);\n --brick-pagination-root-radius: var(--brick-radius-md);\n --brick-pagination-root-padding: 0;\n --brick-pagination-list-gap: var(--brick-space-1);\n --brick-pagination-list-overflow-padding: var(--brick-space-1);\n --brick-pagination-control-min-size: 2.5rem;\n --brick-pagination-control-inline-padding: var(--brick-space-2);\n --brick-pagination-control-radius: var(--brick-radius-sm);\n --brick-pagination-control-foreground: var(--brick-color-text-secondary);\n --brick-pagination-control-background: transparent;\n --brick-pagination-control-border-color: transparent;\n --brick-pagination-control-hover-background: var(--brick-color-surface-subtle);\n --brick-pagination-control-pressed-background: var(--brick-color-surface-strong);\n --brick-pagination-current-background: var(--brick-color-accent-solid);\n --brick-pagination-current-foreground: var(--brick-color-accent-on-solid);\n --brick-pagination-current-border-color: var(--brick-color-accent-solid);\n --brick-pagination-disabled-foreground: var(--brick-color-text-disabled);\n --brick-pagination-focus-ring: var(--brick-color-focus-ring);\n --brick-pagination-ellipsis-foreground: var(--brick-color-text-muted);\n --brick-pagination-icon-size: 1rem;\n --brick-pagination-transition-duration: var(--brick-motion-duration-fast);\n --brick-pagination-font-family: var(--brick-typography-label-md-font-family);\n --brick-pagination-font-size: var(--brick-typography-label-md-font-size);\n --brick-pagination-font-weight: var(--brick-typography-label-md-font-weight);\n --brick-pagination-line-height: var(--brick-typography-label-md-line-height);\n --brick-pagination-letter-spacing: var(--brick-typography-label-md-letter-spacing);\n\n display: inline-block;\n box-sizing: border-box;\n max-inline-size: 100%;\n padding: var(--brick-pagination-root-padding);\n border: 1px solid transparent;\n border-radius: var(--brick-pagination-root-radius);\n background: var(--brick-pagination-root-background);\n }\n\n .brick-pagination[data-variant=\"soft\"] {\n --brick-pagination-root-background: var(--brick-color-surface-subtle);\n --brick-pagination-root-padding: var(--brick-space-1);\n }\n\n .brick-pagination[data-variant=\"outline\"] {\n --brick-pagination-root-background: var(--brick-color-surface);\n --brick-pagination-root-padding: var(--brick-space-1);\n border-color: var(--brick-pagination-root-border-color);\n }\n\n .brick-pagination[data-size=\"sm\"] {\n --brick-pagination-control-min-size: 2rem;\n --brick-pagination-control-inline-padding: var(--brick-space-1);\n --brick-pagination-font-family: var(--brick-typography-label-sm-font-family);\n --brick-pagination-font-size: var(--brick-typography-label-sm-font-size);\n --brick-pagination-font-weight: var(--brick-typography-label-sm-font-weight);\n --brick-pagination-line-height: var(--brick-typography-label-sm-line-height);\n --brick-pagination-letter-spacing: var(--brick-typography-label-sm-letter-spacing);\n }\n\n .brick-pagination[data-size=\"lg\"] {\n --brick-pagination-control-min-size: 3rem;\n --brick-pagination-control-inline-padding: var(--brick-space-3);\n --brick-pagination-font-family: var(--brick-typography-label-lg-font-family);\n --brick-pagination-font-size: var(--brick-typography-label-lg-font-size);\n --brick-pagination-font-weight: var(--brick-typography-label-lg-font-weight);\n --brick-pagination-line-height: var(--brick-typography-label-lg-line-height);\n --brick-pagination-letter-spacing: var(--brick-typography-label-lg-letter-spacing);\n }\n\n .brick-pagination__list {\n display: flex;\n box-sizing: border-box;\n max-inline-size: 100%;\n align-items: center;\n gap: var(--brick-pagination-list-gap);\n margin: 0;\n padding: var(--brick-pagination-list-overflow-padding);\n overflow-x: auto;\n overflow-y: hidden;\n list-style: none;\n scrollbar-width: thin;\n }\n\n .brick-pagination__list > [data-slot=\"pagination-list-item\"] {\n display: inline-flex;\n flex: 0 0 auto;\n margin: 0;\n padding: 0;\n }\n\n .brick-pagination__previous,\n .brick-pagination__item,\n .brick-pagination__next,\n .brick-pagination__ellipsis {\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: var(--brick-pagination-control-min-size);\n min-block-size: var(--brick-pagination-control-min-size);\n align-items: center;\n justify-content: center;\n padding-inline: var(--brick-pagination-control-inline-padding);\n border: 1px solid var(--brick-pagination-control-border-color);\n border-radius: var(--brick-pagination-control-radius);\n font-family: var(--brick-pagination-font-family);\n font-size: var(--brick-pagination-font-size);\n font-weight: var(--brick-pagination-font-weight);\n letter-spacing: var(--brick-pagination-letter-spacing);\n line-height: var(--brick-pagination-line-height);\n white-space: nowrap;\n }\n\n .brick-pagination__previous,\n .brick-pagination__item,\n .brick-pagination__next {\n color: var(--brick-pagination-control-foreground);\n background: var(--brick-pagination-control-background);\n cursor: pointer;\n touch-action: manipulation;\n transition: color var(--brick-pagination-transition-duration), background-color var(--brick-pagination-transition-duration), border-color var(--brick-pagination-transition-duration);\n }\n\n .brick-pagination__previous:hover:not(:disabled),\n .brick-pagination__item:hover:not(:disabled),\n .brick-pagination__next:hover:not(:disabled) { background: var(--brick-pagination-control-hover-background); }\n\n .brick-pagination__previous:active:not(:disabled),\n .brick-pagination__item:active:not(:disabled),\n .brick-pagination__next:active:not(:disabled) { background: var(--brick-pagination-control-pressed-background); }\n\n .brick-pagination__item[aria-current=\"page\"] {\n color: var(--brick-pagination-current-foreground);\n border-color: var(--brick-pagination-current-border-color);\n background: var(--brick-pagination-current-background);\n }\n\n .brick-pagination__previous:focus-visible,\n .brick-pagination__item:focus-visible,\n .brick-pagination__next:focus-visible {\n outline: var(--brick-border-focus-width) solid var(--brick-pagination-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n .brick-pagination__previous:disabled,\n .brick-pagination__item:disabled,\n .brick-pagination__next:disabled {\n color: var(--brick-pagination-disabled-foreground);\n cursor: not-allowed;\n }\n\n .brick-pagination__ellipsis { color: var(--brick-pagination-ellipsis-foreground); user-select: none; }\n .brick-pagination__icon { inline-size: var(--brick-pagination-icon-size); block-size: var(--brick-pagination-icon-size); }\n\n @media (prefers-reduced-motion: reduce) {\n .brick-pagination__previous,\n .brick-pagination__item,\n .brick-pagination__next { transition-duration: 0s; }\n }\n\n @media (forced-colors: active) {\n .brick-pagination__item[aria-current=\"page\"] { color: HighlightText; border-color: Highlight; background: Highlight; }\n .brick-pagination__previous:focus-visible,\n .brick-pagination__item:focus-visible,\n .brick-pagination__next:focus-visible { outline-color: Highlight; }\n .brick-pagination__previous:disabled,\n .brick-pagination__item:disabled,\n .brick-pagination__next:disabled { color: GrayText; }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,2nBAwBA,+DAMA,6BAIA,0EACA,sEACA,sEACA,sEACA,sEAEA,kFACA,sFACA,8EACA,gFACA,4EACA,kFACA,kFACA,gFAEA,wEAIA,8BACE,oECtDF,+6DAsCA,+JAKA,kNAMA,sgBAUA,sgBAUA,iQAcA,0GAOA,muBAqBA,iZAUA,uMAIA,4MAIA,4MAMA,uPAOA,4KAOA,wHACA,mHAEA,uCACE,oGAKF,8BACE,2GACA,8IAGA,wHFpKJ","sources":["home/runner/work/brick/brick/.brick-cache/production/pagination.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/icon/icon.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/pagination/pagination.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/icon/icon.css\";\n@import \"../../src/components/pagination/pagination.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n .brick-icon {\n --brick-icon-size-2xs: 0.75rem;\n --brick-icon-size-xs: 1rem;\n --brick-icon-size-sm: 1.25rem;\n --brick-icon-size-md: 1.5rem;\n --brick-icon-size-lg: 2rem;\n --brick-icon-size-xl: 2.5rem;\n --brick-icon-size: var(--brick-icon-size-md);\n --brick-icon-color: currentcolor;\n --brick-icon-vertical-align: middle;\n --brick-icon-direction-scale: 1;\n\n box-sizing: border-box;\n display: inline-flex;\n flex: 0 0 var(--brick-icon-size);\n inline-size: var(--brick-icon-size);\n block-size: var(--brick-icon-size);\n align-items: center;\n justify-content: center;\n vertical-align: var(--brick-icon-vertical-align);\n color: var(--brick-icon-color);\n transform: scaleX(var(--brick-icon-direction-scale));\n }\n\n .brick-icon > svg {\n display: block;\n inline-size: 100%;\n block-size: 100%;\n }\n\n svg.brick-icon {\n display: block;\n }\n\n .brick-icon[data-size=\"2xs\"] { --brick-icon-size: var(--brick-icon-size-2xs); }\n .brick-icon[data-size=\"xs\"] { --brick-icon-size: var(--brick-icon-size-xs); }\n .brick-icon[data-size=\"sm\"] { --brick-icon-size: var(--brick-icon-size-sm); }\n .brick-icon[data-size=\"lg\"] { --brick-icon-size: var(--brick-icon-size-lg); }\n .brick-icon[data-size=\"xl\"] { --brick-icon-size: var(--brick-icon-size-xl); }\n\n .brick-icon[data-tone=\"primary\"] { --brick-icon-color: var(--brick-color-text-primary); }\n .brick-icon[data-tone=\"secondary\"] { --brick-icon-color: var(--brick-color-text-secondary); }\n .brick-icon[data-tone=\"muted\"] { --brick-icon-color: var(--brick-color-text-muted); }\n .brick-icon[data-tone=\"accent\"] { --brick-icon-color: var(--brick-color-accent-text); }\n .brick-icon[data-tone=\"info\"] { --brick-icon-color: var(--brick-color-info-text); }\n .brick-icon[data-tone=\"success\"] { --brick-icon-color: var(--brick-color-success-text); }\n .brick-icon[data-tone=\"warning\"] { --brick-icon-color: var(--brick-color-warning-text); }\n .brick-icon[data-tone=\"danger\"] { --brick-icon-color: var(--brick-color-danger-text); }\n\n [dir=\"rtl\"] .brick-icon[data-directional] {\n --brick-icon-direction-scale: -1;\n }\n\n @media (forced-colors: active) {\n .brick-icon:not([data-tone=\"inherit\"]) {\n --brick-icon-color: CanvasText;\n }\n }\n}\n","@layer brick.components {\n .brick-pagination {\n --brick-pagination-root-background: transparent;\n --brick-pagination-root-border-color: var(--brick-color-border-subtle);\n --brick-pagination-root-radius: var(--brick-radius-md);\n --brick-pagination-root-padding: 0;\n --brick-pagination-list-gap: var(--brick-space-1);\n --brick-pagination-list-overflow-padding: var(--brick-space-1);\n --brick-pagination-control-min-size: 2.5rem;\n --brick-pagination-control-inline-padding: var(--brick-space-2);\n --brick-pagination-control-radius: var(--brick-radius-sm);\n --brick-pagination-control-foreground: var(--brick-color-text-secondary);\n --brick-pagination-control-background: transparent;\n --brick-pagination-control-border-color: transparent;\n --brick-pagination-control-hover-background: var(--brick-color-surface-subtle);\n --brick-pagination-control-pressed-background: var(--brick-color-surface-strong);\n --brick-pagination-current-background: var(--brick-color-accent-solid);\n --brick-pagination-current-foreground: var(--brick-color-accent-on-solid);\n --brick-pagination-current-border-color: var(--brick-color-accent-solid);\n --brick-pagination-disabled-foreground: var(--brick-color-text-disabled);\n --brick-pagination-focus-ring: var(--brick-color-focus-ring);\n --brick-pagination-ellipsis-foreground: var(--brick-color-text-muted);\n --brick-pagination-icon-size: 1rem;\n --brick-pagination-transition-duration: var(--brick-motion-duration-fast);\n --brick-pagination-font-family: var(--brick-typography-label-md-font-family);\n --brick-pagination-font-size: var(--brick-typography-label-md-font-size);\n --brick-pagination-font-weight: var(--brick-typography-label-md-font-weight);\n --brick-pagination-line-height: var(--brick-typography-label-md-line-height);\n --brick-pagination-letter-spacing: var(--brick-typography-label-md-letter-spacing);\n\n display: inline-block;\n box-sizing: border-box;\n max-inline-size: 100%;\n padding: var(--brick-pagination-root-padding);\n border: 1px solid transparent;\n border-radius: var(--brick-pagination-root-radius);\n background: var(--brick-pagination-root-background);\n }\n\n .brick-pagination[data-variant=\"soft\"] {\n --brick-pagination-root-background: var(--brick-color-surface-subtle);\n --brick-pagination-root-padding: var(--brick-space-1);\n }\n\n .brick-pagination[data-variant=\"outline\"] {\n --brick-pagination-root-background: var(--brick-color-surface);\n --brick-pagination-root-padding: var(--brick-space-1);\n border-color: var(--brick-pagination-root-border-color);\n }\n\n .brick-pagination[data-size=\"sm\"] {\n --brick-pagination-control-min-size: 2rem;\n --brick-pagination-control-inline-padding: var(--brick-space-1);\n --brick-pagination-font-family: var(--brick-typography-label-sm-font-family);\n --brick-pagination-font-size: var(--brick-typography-label-sm-font-size);\n --brick-pagination-font-weight: var(--brick-typography-label-sm-font-weight);\n --brick-pagination-line-height: var(--brick-typography-label-sm-line-height);\n --brick-pagination-letter-spacing: var(--brick-typography-label-sm-letter-spacing);\n }\n\n .brick-pagination[data-size=\"lg\"] {\n --brick-pagination-control-min-size: 3rem;\n --brick-pagination-control-inline-padding: var(--brick-space-3);\n --brick-pagination-font-family: var(--brick-typography-label-lg-font-family);\n --brick-pagination-font-size: var(--brick-typography-label-lg-font-size);\n --brick-pagination-font-weight: var(--brick-typography-label-lg-font-weight);\n --brick-pagination-line-height: var(--brick-typography-label-lg-line-height);\n --brick-pagination-letter-spacing: var(--brick-typography-label-lg-letter-spacing);\n }\n\n .brick-pagination__list {\n display: flex;\n box-sizing: border-box;\n max-inline-size: 100%;\n align-items: center;\n gap: var(--brick-pagination-list-gap);\n margin: 0;\n padding: var(--brick-pagination-list-overflow-padding);\n overflow-x: auto;\n overflow-y: hidden;\n list-style: none;\n scrollbar-width: thin;\n }\n\n .brick-pagination__list > [data-slot=\"pagination-list-item\"] {\n display: inline-flex;\n flex: 0 0 auto;\n margin: 0;\n padding: 0;\n }\n\n .brick-pagination__previous,\n .brick-pagination__item,\n .brick-pagination__next,\n .brick-pagination__ellipsis {\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: var(--brick-pagination-control-min-size);\n min-block-size: var(--brick-pagination-control-min-size);\n align-items: center;\n justify-content: center;\n padding-inline: var(--brick-pagination-control-inline-padding);\n border: 1px solid var(--brick-pagination-control-border-color);\n border-radius: var(--brick-pagination-control-radius);\n font-family: var(--brick-pagination-font-family);\n font-size: var(--brick-pagination-font-size);\n font-weight: var(--brick-pagination-font-weight);\n letter-spacing: var(--brick-pagination-letter-spacing);\n line-height: var(--brick-pagination-line-height);\n white-space: nowrap;\n }\n\n .brick-pagination__previous,\n .brick-pagination__item,\n .brick-pagination__next {\n color: var(--brick-pagination-control-foreground);\n background: var(--brick-pagination-control-background);\n cursor: pointer;\n touch-action: manipulation;\n transition: color var(--brick-pagination-transition-duration), background-color var(--brick-pagination-transition-duration), border-color var(--brick-pagination-transition-duration);\n }\n\n .brick-pagination__previous:hover:not(:disabled),\n .brick-pagination__item:hover:not(:disabled),\n .brick-pagination__next:hover:not(:disabled) { background: var(--brick-pagination-control-hover-background); }\n\n .brick-pagination__previous:active:not(:disabled),\n .brick-pagination__item:active:not(:disabled),\n .brick-pagination__next:active:not(:disabled) { background: var(--brick-pagination-control-pressed-background); }\n\n .brick-pagination__item[aria-current=\"page\"] {\n color: var(--brick-pagination-current-foreground);\n border-color: var(--brick-pagination-current-border-color);\n background: var(--brick-pagination-current-background);\n }\n\n .brick-pagination__previous:focus-visible,\n .brick-pagination__item:focus-visible,\n .brick-pagination__next:focus-visible {\n outline: var(--brick-border-focus-width) solid var(--brick-pagination-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n .brick-pagination__previous:disabled,\n .brick-pagination__item:disabled,\n .brick-pagination__next:disabled {\n color: var(--brick-pagination-disabled-foreground);\n cursor: not-allowed;\n }\n\n .brick-pagination__ellipsis { color: var(--brick-pagination-ellipsis-foreground); user-select: none; }\n .brick-pagination__icon { inline-size: var(--brick-pagination-icon-size); block-size: var(--brick-pagination-icon-size); }\n\n @media (prefers-reduced-motion: reduce) {\n .brick-pagination__previous,\n .brick-pagination__item,\n .brick-pagination__next { transition-duration: 0s; }\n }\n\n @media (forced-colors: active) {\n .brick-pagination__item[aria-current=\"page\"] { color: HighlightText; border-color: Highlight; background: Highlight; }\n .brick-pagination__previous:focus-visible,\n .brick-pagination__item:focus-visible,\n .brick-pagination__next:focus-visible { outline-color: Highlight; }\n .brick-pagination__previous:disabled,\n .brick-pagination__item:disabled,\n .brick-pagination__next:disabled { color: GrayText; }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,brick.foundations;@layer brick.components{.brick-toggle-group{--brick-toggle-group-gap:.5rem;box-sizing:border-box;align-items:stretch;gap:var(--brick-toggle-group-gap);min-inline-size:0;max-inline-size:100%;display:inline-flex}.brick-toggle-group[data-orientation=horizontal]{flex-flow:wrap}.brick-toggle-group[data-orientation=vertical]{flex-direction:column}.brick-toggle-group[data-full-width]{inline-size:100%;display:flex}.brick-toggle-group[data-full-width]>.brick-toggle-group-item{flex:1 1 0}.brick-toggle-group>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-icon-size:1.125rem}.brick-toggle-group[data-size=sm]>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}.brick-toggle-group[data-size=lg]>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}.brick-toggle-group[data-shape=pill]>.brick-toggle-group-item{--brick-toggle-radius:var(--brick-radius-full)}.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]{border-color:var(--brick-color-accent-solid);background:var(--brick-color-accent-solid);color:var(--brick-color-accent-on-solid);box-shadow:none}.brick-toggle-group[data-variant=outline]>.brick-toggle-group-item{border-color:var(--brick-color-border-default);background:0 0}.brick-toggle-group[data-variant=outline]>.brick-toggle-group-item[data-state=on]{border-color:var(--brick-color-accent-border);color:var(--brick-color-accent-text);box-shadow:none;background:0 0}.brick-toggle-group[data-variant=ghost]>.brick-toggle-group-item{background:0 0}.brick-toggle-group[data-variant=ghost]>.brick-toggle-group-item[data-state=on]{background:var(--brick-color-accent-soft);box-shadow:none;border-color:#0000}.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]:not([data-disabled]):active{border-color:var(--brick-color-accent-solid-pressed);background:var(--brick-color-accent-solid-pressed)}.brick-toggle-group[data-attached=true]{--brick-toggle-group-gap:0;flex-wrap:nowrap}.brick-toggle-group[data-attached=true]>.brick-toggle-group-item{--brick-toggle-radius:0}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item+.brick-toggle-group-item{margin-inline-start:calc(-1 * var(--brick-border-width))}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item+.brick-toggle-group-item{margin-block-start:calc(-1 * var(--brick-border-width))}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-control);border-end-start-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item:last-child{border-start-end-radius:var(--brick-radius-control);border-end-end-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-control);border-start-end-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item:last-child{border-end-end-radius:var(--brick-radius-control);border-end-start-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=horizontal]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-full);border-end-start-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=horizontal]>.brick-toggle-group-item:last-child{border-start-end-radius:var(--brick-radius-full);border-end-end-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=vertical]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-full);border-start-end-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=vertical]>.brick-toggle-group-item:last-child{border-end-end-radius:var(--brick-radius-full);border-end-start-radius:var(--brick-radius-full)}@media (hover:hover) and (pointer:fine){.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]:not([data-disabled]):hover{border-color:var(--brick-color-accent-solid-hover);background:var(--brick-color-accent-solid-hover)}}}@layer brick.effects;
|
|
1
|
+
@layer brick.tokens,brick.foundations;@layer brick.components{:where(.brick-toggle,.brick-toggle-group-item){--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-radius:var(--brick-radius-control);--brick-toggle-icon-size:1.125rem;box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--brick-toggle-min-block-size);justify-content:center;align-items:center;gap:var(--brick-toggle-gap);padding-block:.375rem;padding-inline:var(--brick-toggle-padding-inline);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-toggle-radius);appearance:none;background:var(--brick-color-surface-subtle);color:var(--brick-color-text-primary);font-family:var(--brick-typography-control-md-font-family);font-size:var(--brick-typography-control-md-font-size);font-weight:var(--brick-typography-control-md-font-weight);letter-spacing:var(--brick-typography-control-md-letter-spacing);line-height:var(--brick-typography-control-md-line-height);overflow-wrap:anywhere;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);text-decoration:none;display:inline-flex}:where(.brick-toggle,.brick-toggle-group-item)>:where(svg,img){inline-size:var(--brick-toggle-icon-size);block-size:var(--brick-toggle-icon-size);flex:none}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]){cursor:pointer}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-color-focus-ring);outline-offset:var(--brick-border-focus-offset)}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{border-color:var(--brick-color-accent-border);background:var(--brick-color-accent-soft);color:var(--brick-color-accent-on-soft);box-shadow:inset 0 -.125rem 0 var(--brick-color-accent-solid)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]{border-color:var(--brick-color-accent-solid);background:var(--brick-color-accent-solid);color:var(--brick-color-accent-on-solid);box-shadow:none}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline]{border-color:var(--brick-color-border-default);background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline][data-state=on]{border-color:var(--brick-color-accent-border);color:var(--brick-color-accent-text);box-shadow:none;background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]{background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost][data-state=on]{background:var(--brick-color-accent-soft);box-shadow:none;border-color:#0000}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):active{background:var(--brick-color-accent-soft-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):active{border-color:var(--brick-color-accent-solid-pressed);background:var(--brick-color-accent-solid-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{border-color:var(--brick-color-border-subtle);background:var(--brick-color-surface-subtle);color:var(--brick-color-text-secondary);box-shadow:none;cursor:not-allowed;opacity:.65}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled][data-state=on]{border-color:var(--brick-color-border-strong);box-shadow:inset 0 -.125rem 0 var(--brick-color-text-secondary)}:where(.brick-toggle,.brick-toggle-group-item)[data-size=sm]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}:where(.brick-toggle,.brick-toggle-group-item)[data-size=lg]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}:where(.brick-toggle,.brick-toggle-group-item)[data-shape=pill]{--brick-toggle-radius:var(--brick-radius-full)}:where(.brick-toggle,.brick-toggle-group-item)[data-icon-only]{inline-size:var(--brick-toggle-min-block-size);padding-inline:0}@media (hover:hover) and (pointer:fine){:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):hover{background:var(--brick-color-surface-base)}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled])[data-state=on]:hover{background:var(--brick-color-accent-soft-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):hover{border-color:var(--brick-color-accent-solid-hover);background:var(--brick-color-accent-solid-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled]):hover{background:var(--brick-color-surface-subtle)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled])[data-state=on]:hover{background:var(--brick-color-accent-soft-hover)}}@media (prefers-reduced-motion:reduce){:where(.brick-toggle,.brick-toggle-group-item){transition-duration:0s}}@media (forced-colors:active){:where(.brick-toggle,.brick-toggle-group-item){color:buttontext;background:buttonface;border-color:buttontext}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{color:buttontext;outline-offset:-.25rem;box-shadow:none;background:buttonface;border-color:highlight;outline:.125rem solid highlight}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{outline-offset:var(--brick-border-focus-offset);outline-color:highlight}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{color:graytext;opacity:1;border-color:graytext}}.brick-toggle-group{--brick-toggle-group-gap:.5rem;box-sizing:border-box;align-items:stretch;gap:var(--brick-toggle-group-gap);min-inline-size:0;max-inline-size:100%;display:inline-flex}.brick-toggle-group[data-orientation=horizontal]{flex-flow:wrap}.brick-toggle-group[data-orientation=vertical]{flex-direction:column}.brick-toggle-group[data-full-width]{inline-size:100%;display:flex}.brick-toggle-group[data-full-width]>.brick-toggle-group-item{flex:1 1 0}.brick-toggle-group>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-icon-size:1.125rem}.brick-toggle-group[data-size=sm]>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}.brick-toggle-group[data-size=lg]>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}.brick-toggle-group[data-shape=pill]>.brick-toggle-group-item{--brick-toggle-radius:var(--brick-radius-full)}.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]{border-color:var(--brick-color-accent-solid);background:var(--brick-color-accent-solid);color:var(--brick-color-accent-on-solid);box-shadow:none}.brick-toggle-group[data-variant=outline]>.brick-toggle-group-item{border-color:var(--brick-color-border-default);background:0 0}.brick-toggle-group[data-variant=outline]>.brick-toggle-group-item[data-state=on]{border-color:var(--brick-color-accent-border);color:var(--brick-color-accent-text);box-shadow:none;background:0 0}.brick-toggle-group[data-variant=ghost]>.brick-toggle-group-item{background:0 0}.brick-toggle-group[data-variant=ghost]>.brick-toggle-group-item[data-state=on]{background:var(--brick-color-accent-soft);box-shadow:none;border-color:#0000}.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]:not([data-disabled]):active{border-color:var(--brick-color-accent-solid-pressed);background:var(--brick-color-accent-solid-pressed)}.brick-toggle-group[data-attached=true]{--brick-toggle-group-gap:0;flex-wrap:nowrap}.brick-toggle-group[data-attached=true]>.brick-toggle-group-item{--brick-toggle-radius:0}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item+.brick-toggle-group-item{margin-inline-start:calc(-1 * var(--brick-border-width))}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item+.brick-toggle-group-item{margin-block-start:calc(-1 * var(--brick-border-width))}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-control);border-end-start-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item:last-child{border-start-end-radius:var(--brick-radius-control);border-end-end-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-control);border-start-end-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item:last-child{border-end-end-radius:var(--brick-radius-control);border-end-start-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=horizontal]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-full);border-end-start-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=horizontal]>.brick-toggle-group-item:last-child{border-start-end-radius:var(--brick-radius-full);border-end-end-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=vertical]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-full);border-start-end-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=vertical]>.brick-toggle-group-item:last-child{border-end-end-radius:var(--brick-radius-full);border-end-start-radius:var(--brick-radius-full)}@media (hover:hover) and (pointer:fine){.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]:not([data-disabled]):hover{border-color:var(--brick-color-accent-solid-hover);background:var(--brick-color-accent-solid-hover)}}}@layer brick.effects;
|
|
2
2
|
/*# sourceMappingURL=toggle-group.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,0LAWA,gEAIA,qEAIA,mEAKA,yEAIA,gNAOA,0SAUA,6SAUA,6GAIA,iOAOA,iIAKA,oMAOA,gFAIA,6JAMA,oNAKA,oFAMA,yFAIA,gLAIA,6KAIA,oNAKA,+MAKA,kNAKA,6MAKA,+NAKA,0NAKA,6NAKA,wNAKA,wCACE,iNDzJJ","sources":["home/runner/work/brick/brick/.brick-cache/production/toggle-group.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle-group/toggle-group.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toggle-group/toggle-group.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n .brick-toggle-group {\n --brick-toggle-group-gap: 0.5rem;\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n align-items: stretch;\n gap: var(--brick-toggle-group-gap);\n }\n\n .brick-toggle-group[data-orientation=\"horizontal\"] {\n flex-flow: row wrap;\n }\n\n .brick-toggle-group[data-orientation=\"vertical\"] {\n flex-direction: column;\n }\n\n .brick-toggle-group[data-full-width] {\n display: flex;\n inline-size: 100%;\n }\n\n .brick-toggle-group[data-full-width] > .brick-toggle-group-item {\n flex: 1 1 0;\n }\n\n .brick-toggle-group > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-icon-size: 1.125rem;\n }\n\n .brick-toggle-group[data-size=\"sm\"] > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n .brick-toggle-group[data-size=\"lg\"] > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n .brick-toggle-group[data-shape=\"pill\"] > .brick-toggle-group-item {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: var(--brick-color-accent-solid);\n background: var(--brick-color-accent-solid);\n color: var(--brick-color-accent-on-solid);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"outline\"] > .brick-toggle-group-item {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n .brick-toggle-group[data-variant=\"outline\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: transparent;\n color: var(--brick-color-accent-text);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"ghost\"] > .brick-toggle-group-item {\n background: transparent;\n }\n\n .brick-toggle-group[data-variant=\"ghost\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-color-accent-soft);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-color-accent-solid-pressed);\n background: var(--brick-color-accent-solid-pressed);\n }\n\n .brick-toggle-group[data-attached=\"true\"] {\n --brick-toggle-group-gap: 0;\n\n flex-wrap: nowrap;\n }\n\n .brick-toggle-group[data-attached=\"true\"] > .brick-toggle-group-item {\n --brick-toggle-radius: 0;\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item + .brick-toggle-group-item {\n margin-inline-start: calc(-1 * var(--brick-border-width));\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item + .brick-toggle-group-item {\n margin-block-start: calc(-1 * var(--brick-border-width));\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-control);\n border-end-start-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:last-child {\n border-start-end-radius: var(--brick-radius-control);\n border-end-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-control);\n border-start-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:last-child {\n border-end-start-radius: var(--brick-radius-control);\n border-end-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-full);\n border-end-start-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:last-child {\n border-start-end-radius: var(--brick-radius-full);\n border-end-end-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-full);\n border-start-end-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:last-child {\n border-end-start-radius: var(--brick-radius-full);\n border-end-end-radius: var(--brick-radius-full);\n }\n\n @media (hover: hover) and (pointer: fine) {\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-color-accent-solid-hover);\n background: var(--brick-color-accent-solid-hover);\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sCAAA,wBCCE,83CAsCA,4JAMA,mFAIA,mMAMA,4PAOA,mOAOA,mIAKA,sMAOA,kFAIA,+JAMA,6HAIA,sNAKA,gPASA,2LAKA,4SAUA,+SAUA,+GAIA,+HAKA,wCACE,qHAIA,yIAIA,iNAKA,2IAIA,8JAKF,uCACE,uEAKF,8BACE,8GAMA,mMASA,qIAKA,8GChMF,0LAWA,gEAIA,qEAIA,mEAKA,yEAIA,gNAOA,0SAUA,6SAUA,6GAIA,iOAOA,iIAKA,oMAOA,gFAIA,6JAMA,oNAKA,oFAMA,yFAIA,gLAIA,6KAIA,oNAKA,+MAKA,kNAKA,6MAKA,+NAKA,0NAKA,6NAKA,wNAKA,wCACE,iNFzJJ","sources":["home/runner/work/brick/brick/.brick-cache/production/toggle-group.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle/toggle.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle-group/toggle-group.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toggle/toggle.css\";\n@import \"../../src/components/toggle-group/toggle-group.css\";","@layer brick.tokens, brick.foundations, brick.components, brick.effects;\n","@layer brick.components {\n :where(.brick-toggle, .brick-toggle-group-item) {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-radius: var(--brick-radius-control);\n --brick-toggle-icon-size: 1.125rem;\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n min-block-size: var(--brick-toggle-min-block-size);\n align-items: center;\n justify-content: center;\n gap: var(--brick-toggle-gap);\n padding-block: 0.375rem;\n padding-inline: var(--brick-toggle-padding-inline);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-toggle-radius);\n appearance: none;\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-primary);\n font-family: var(--brick-typography-control-md-font-family);\n font-size: var(--brick-typography-control-md-font-size);\n font-weight: var(--brick-typography-control-md-font-weight);\n letter-spacing: var(--brick-typography-control-md-letter-spacing);\n line-height: var(--brick-typography-control-md-line-height);\n overflow-wrap: anywhere;\n text-align: center;\n text-decoration: none;\n user-select: none;\n vertical-align: middle;\n transition:\n background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item) > :where(svg, img) {\n flex: 0 0 auto;\n inline-size: var(--brick-toggle-icon-size);\n block-size: var(--brick-toggle-icon-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]) {\n cursor: pointer;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n z-index: 1;\n outline: var(--brick-border-focus-width) solid var(--brick-color-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: var(--brick-color-accent-soft);\n color: var(--brick-color-accent-on-soft);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-accent-solid);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-solid);\n background: var(--brick-color-accent-solid);\n color: var(--brick-color-accent-on-solid);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"] {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: transparent;\n color: var(--brick-color-accent-text);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"] {\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"][data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-color-accent-soft);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):active {\n background: var(--brick-color-accent-soft-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-color-accent-solid-pressed);\n background: var(--brick-color-accent-solid-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: var(--brick-color-border-subtle);\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-secondary);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.65;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled][data-state=\"on\"] {\n border-color: var(--brick-color-border-strong);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-text-secondary);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"sm\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"lg\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-shape=\"pill\"] {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-icon-only] {\n inline-size: var(--brick-toggle-min-block-size);\n padding-inline: 0;\n }\n\n @media (hover: hover) and (pointer: fine) {\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):hover {\n background: var(--brick-color-surface-base);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-color-accent-solid-hover);\n background: var(--brick-color-accent-solid-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled]):hover {\n background: var(--brick-color-surface-subtle);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n transition-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n border-color: ButtonText;\n background: ButtonFace;\n color: ButtonText;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: Highlight;\n background: ButtonFace;\n color: ButtonText;\n outline: 0.125rem solid Highlight;\n outline-offset: -0.25rem;\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n outline-color: Highlight;\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: GrayText;\n color: GrayText;\n opacity: 1;\n }\n }\n}\n","@layer brick.components {\n .brick-toggle-group {\n --brick-toggle-group-gap: 0.5rem;\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n align-items: stretch;\n gap: var(--brick-toggle-group-gap);\n }\n\n .brick-toggle-group[data-orientation=\"horizontal\"] {\n flex-flow: row wrap;\n }\n\n .brick-toggle-group[data-orientation=\"vertical\"] {\n flex-direction: column;\n }\n\n .brick-toggle-group[data-full-width] {\n display: flex;\n inline-size: 100%;\n }\n\n .brick-toggle-group[data-full-width] > .brick-toggle-group-item {\n flex: 1 1 0;\n }\n\n .brick-toggle-group > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-icon-size: 1.125rem;\n }\n\n .brick-toggle-group[data-size=\"sm\"] > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n .brick-toggle-group[data-size=\"lg\"] > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n .brick-toggle-group[data-shape=\"pill\"] > .brick-toggle-group-item {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: var(--brick-color-accent-solid);\n background: var(--brick-color-accent-solid);\n color: var(--brick-color-accent-on-solid);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"outline\"] > .brick-toggle-group-item {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n .brick-toggle-group[data-variant=\"outline\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: transparent;\n color: var(--brick-color-accent-text);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"ghost\"] > .brick-toggle-group-item {\n background: transparent;\n }\n\n .brick-toggle-group[data-variant=\"ghost\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-color-accent-soft);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-color-accent-solid-pressed);\n background: var(--brick-color-accent-solid-pressed);\n }\n\n .brick-toggle-group[data-attached=\"true\"] {\n --brick-toggle-group-gap: 0;\n\n flex-wrap: nowrap;\n }\n\n .brick-toggle-group[data-attached=\"true\"] > .brick-toggle-group-item {\n --brick-toggle-radius: 0;\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item + .brick-toggle-group-item {\n margin-inline-start: calc(-1 * var(--brick-border-width));\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item + .brick-toggle-group-item {\n margin-block-start: calc(-1 * var(--brick-border-width));\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-control);\n border-end-start-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:last-child {\n border-start-end-radius: var(--brick-radius-control);\n border-end-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-control);\n border-start-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:last-child {\n border-end-start-radius: var(--brick-radius-control);\n border-end-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-full);\n border-end-start-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:last-child {\n border-start-end-radius: var(--brick-radius-full);\n border-end-end-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-full);\n border-start-end-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:last-child {\n border-end-start-radius: var(--brick-radius-full);\n border-end-end-radius: var(--brick-radius-full);\n }\n\n @media (hover: hover) and (pointer: fine) {\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-color-accent-solid-hover);\n background: var(--brick-color-accent-solid-hover);\n }\n }\n}\n"],"names":[]}
|