@flowstack-ui/brick 0.1.12 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/agents/color-picker.json +34 -18
- package/dist/agents/color-picker.md +18 -13
- package/dist/agents/color-swatch.json +17 -5
- package/dist/agents/color-swatch.md +10 -5
- package/dist/agents/coverage.json +1874 -1165
- package/dist/agents/manifest.json +1 -1
- package/dist/components/code-block/CodeBlock.d.ts +6 -3
- package/dist/components/code-block/CodeBlock.d.ts.map +1 -1
- package/dist/components/code-block/CodeBlock.js +19 -9
- package/dist/components/code-block/CodeBlock.js.map +1 -1
- package/dist/components/color-picker/ColorPicker.d.ts +83 -24
- package/dist/components/color-picker/ColorPicker.d.ts.map +1 -1
- package/dist/components/color-picker/ColorPicker.js +102 -10
- package/dist/components/color-picker/ColorPicker.js.map +1 -1
- package/dist/components/color-picker/index.d.ts +1 -1
- package/dist/components/color-picker/index.d.ts.map +1 -1
- package/dist/components/color-picker/index.js +1 -1
- package/dist/components/color-picker/index.js.map +1 -1
- package/dist/components/color-swatch/ColorSwatch.d.ts +3 -0
- package/dist/components/color-swatch/ColorSwatch.d.ts.map +1 -1
- package/dist/components/color-swatch/ColorSwatch.js +4 -4
- package/dist/components/color-swatch/ColorSwatch.js.map +1 -1
- package/dist/components/color-swatch/index.d.ts +1 -1
- package/dist/components/color-swatch/index.d.ts.map +1 -1
- package/dist/components/color-swatch/index.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/styles/checkbox-group.css +1 -1
- package/dist/styles/checkbox-group.css.map +1 -1
- package/dist/styles/checkbox.css +1 -1
- package/dist/styles/checkbox.css.map +1 -1
- package/dist/styles/code-block.css +1 -1
- package/dist/styles/code-block.css.map +1 -1
- package/dist/styles/color-picker.css +1 -1
- package/dist/styles/color-picker.css.map +1 -1
- package/dist/styles/color-swatch.css +1 -1
- package/dist/styles/color-swatch.css.map +1 -1
- package/dist/styles/dropdown-menu.css.map +1 -1
- package/dist/styles/menubar.css.map +1 -1
- package/dist/styles/popover.css.map +1 -1
- package/dist/styles/segment-group.css +1 -1
- package/dist/styles/segment-group.css.map +1 -1
- package/dist/styles/sidebar.css +1 -1
- package/dist/styles/sidebar.css.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/dist/theme-contract.json +139 -2
- package/package.json +4 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,+TCAA,srCA+BA,wKAOA,wKAOA,gFAIA,2cAgBA,kDAKA,sDAKA,iKAMA,uIAOA,4GAKA,qRAMA,qHAIA,qHAIA,mGAIA,8ZASA,+XAQA,2ZASA,0RAYA,uOAWA,4IAKA,6JAKA,qJAKA,sJAKA,8JAKA,8BACE,uIAKF,sBACE,0DAIA,iEAMF,uBACE,8GAMA,iDAMF,uCACE,gDAMF,8BACE,qLAQA,mFFxOJ","sources":["home/runner/work/brick/brick/.brick-cache/production/popover.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,+TCAA,srCA+BA,wKAOA,wKAOA,gFAIA,2cAgBA,kDAKA,sDAKA,iKAMA,uIAOA,4GAKA,qRAMA,qHAIA,qHAIA,mGAIA,8ZASA,+XAQA,2ZASA,0RAYA,uOAWA,4IAKA,6JAKA,qJAKA,sJAKA,8JAKA,8BACE,uIAKF,sBACE,0DAIA,iEAMF,uBACE,8GAMA,iDAMF,uCACE,gDAMF,8BACE,qLAQA,mFFxOJ","sources":["home/runner/work/brick/brick/.brick-cache/production/popover.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/popover/popover.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/floating-arrow.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/styles/floating-arrow.css\";\n@import \"../../src/components/popover/popover.css\";","@layer brick.tokens, flowstack.theme, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-popover {\n --brick-popover-background: var(--brick-color-surface-overlay);\n --brick-popover-foreground: var(--brick-color-text-primary);\n --brick-popover-muted-foreground: var(--brick-color-text-secondary);\n --brick-popover-border: var(--brick-color-border-default);\n --brick-popover-radius: var(--brick-radius-overlay);\n --brick-popover-shadow: var(--brick-shadow-floating);\n --brick-popover-space: var(--brick-space-4);\n --brick-popover-max-inline-size-sm: 18rem;\n --brick-popover-max-inline-size-md: 24rem;\n --brick-popover-max-inline-size-lg: 32rem;\n --brick-popover-max-block-size: min(32rem, calc(100dvb - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)));\n\n z-index: calc(var(--brick-layer-overlay) - 1);\n box-sizing: border-box;\n inline-size: max-content;\n max-inline-size: min(\n var(--brick-popover-max-inline-size-md),\n calc(100dvi - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right))\n );\n overflow: visible;\n color: var(--brick-popover-foreground);\n opacity: 0;\n overflow-wrap: anywhere;\n scale: 0.98;\n transform-origin: var(--brick-floating-arrow-transform-origin, center);\n transition:\n opacity var(--brick-motion-duration-fast) var(--brick-motion-easing-enter),\n scale var(--brick-motion-duration-fast) var(--brick-motion-easing-enter);\n }\n\n .brick-popover[data-size=\"sm\"] {\n max-inline-size: min(\n var(--brick-popover-max-inline-size-sm),\n calc(100dvi - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right))\n );\n }\n\n .brick-popover[data-size=\"lg\"] {\n max-inline-size: min(\n var(--brick-popover-max-inline-size-lg),\n calc(100dvi - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right))\n );\n }\n\n .brick-popover[data-density=\"compact\"] {\n --brick-popover-space: var(--brick-space-3);\n }\n\n .brick-popover > [data-slot=\"popover-viewport\"] {\n box-sizing: border-box;\n display: flex;\n inline-size: 100%;\n max-block-size: min(\n var(--brick-popover-max-block-size),\n calc(100dvb - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom))\n );\n flex-direction: column;\n overflow: hidden;\n border: var(--brick-border-width) solid var(--brick-popover-border);\n border-radius: var(--brick-popover-radius);\n background: var(--brick-popover-background);\n box-shadow: var(--brick-popover-shadow);\n }\n\n .brick-popover[data-positioned] {\n opacity: 1;\n scale: 1;\n }\n\n .brick-popover[data-state=\"closed\"] {\n opacity: 0;\n scale: 0.98;\n }\n\n .brick-popover__header,\n .brick-popover > [data-slot=\"popover-viewport\"] > :where([data-slot=\"popover-title\"], [data-slot=\"popover-description\"]) {\n flex: none;\n min-inline-size: 0;\n }\n\n .brick-popover__header {\n display: grid;\n gap: var(--brick-space-1);\n padding: var(--brick-popover-space);\n padding-block-end: var(--brick-space-2);\n }\n\n .brick-popover :where([data-slot=\"popover-title\"], [data-slot=\"popover-description\"]) {\n min-inline-size: 0;\n margin: 0;\n }\n\n .brick-popover > [data-slot=\"popover-viewport\"] > [data-slot=\"popover-title\"],\n .brick-popover > [data-slot=\"popover-viewport\"] > [data-slot=\"popover-description\"],\n .brick-popover__header > :where([data-slot=\"popover-title\"], [data-slot=\"popover-description\"]) {\n padding-inline: var(--brick-popover-space);\n }\n\n .brick-popover > [data-slot=\"popover-viewport\"] > [data-slot=\"popover-title\"] {\n padding-block-start: var(--brick-popover-space);\n }\n\n .brick-popover > [data-slot=\"popover-viewport\"] > [data-slot=\"popover-description\"] {\n padding-block-start: var(--brick-space-1);\n }\n\n .brick-popover__header > :where([data-slot=\"popover-title\"], [data-slot=\"popover-description\"]) {\n padding: 0;\n }\n\n .brick-popover :where([data-slot=\"popover-title\"]) {\n color: var(--brick-popover-foreground);\n font-family: var(--brick-typography-compact-title-lg-font-family);\n font-size: var(--brick-typography-compact-title-lg-font-size);\n font-weight: var(--brick-typography-compact-title-lg-font-weight);\n letter-spacing: var(--brick-typography-compact-title-lg-letter-spacing);\n line-height: var(--brick-typography-compact-title-lg-line-height);\n }\n\n .brick-popover[data-density=\"compact\"] :where([data-slot=\"popover-title\"]) {\n font-family: var(--brick-typography-compact-title-font-family);\n font-size: var(--brick-typography-compact-title-font-size);\n font-weight: var(--brick-typography-compact-title-font-weight);\n letter-spacing: var(--brick-typography-compact-title-letter-spacing);\n line-height: var(--brick-typography-compact-title-line-height);\n }\n\n .brick-popover :where([data-slot=\"popover-description\"]) {\n color: var(--brick-popover-muted-foreground);\n font-family: var(--brick-typography-supporting-sm-font-family);\n font-size: var(--brick-typography-supporting-sm-font-size);\n font-weight: var(--brick-typography-supporting-sm-font-weight);\n letter-spacing: var(--brick-typography-supporting-sm-letter-spacing);\n line-height: var(--brick-typography-supporting-sm-line-height);\n }\n\n .brick-popover__body {\n min-block-size: 0;\n min-inline-size: 0;\n flex: 1 1 auto;\n padding: var(--brick-space-3) var(--brick-popover-space);\n overflow: auto;\n overscroll-behavior: contain;\n color: var(--brick-popover-foreground);\n line-height: var(--brick-typography-body-md-line-height);\n scrollbar-gutter: stable;\n }\n\n .brick-popover__footer {\n display: flex;\n min-inline-size: 0;\n flex: none;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: var(--brick-space-2);\n padding: var(--brick-space-2) var(--brick-popover-space) var(--brick-popover-space);\n }\n\n .brick-popover__arrow {\n --brick-floating-arrow-fill: var(--brick-popover-background);\n --brick-floating-arrow-stroke: var(--brick-popover-border);\n }\n\n .brick-popover[data-side=\"top\"] .brick-popover__arrow {\n translate: 0 calc(var(--brick-border-width) * -1);\n filter: drop-shadow(0 1px 0 var(--brick-popover-border));\n }\n\n .brick-popover[data-side=\"right\"] .brick-popover__arrow {\n translate: var(--brick-border-width) 0;\n filter: drop-shadow(-1px 0 0 var(--brick-popover-border));\n }\n\n .brick-popover[data-side=\"bottom\"] .brick-popover__arrow {\n translate: 0 var(--brick-border-width);\n filter: drop-shadow(0 -1px 0 var(--brick-popover-border));\n }\n\n .brick-popover[data-side=\"left\"] .brick-popover__arrow {\n translate: calc(var(--brick-border-width) * -1) 0;\n filter: drop-shadow(1px 0 0 var(--brick-popover-border));\n }\n\n @supports not (height: 100dvb) {\n .brick-popover {\n --brick-popover-max-block-size: min(32rem, calc(100vh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)));\n }\n }\n\n @media (max-width: 20rem) {\n .brick-popover {\n --brick-popover-space: var(--brick-space-3);\n }\n\n .brick-popover__footer > .brick-button {\n inline-size: 100%;\n flex: 1 1 100%;\n }\n }\n\n @media (max-height: 20rem) {\n .brick-popover > [data-slot=\"popover-viewport\"] {\n overflow: auto;\n overscroll-behavior: contain;\n scrollbar-gutter: stable;\n }\n\n .brick-popover__body {\n flex: none;\n overflow: visible;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .brick-popover {\n scale: 1;\n transition-duration: 1ms;\n }\n }\n\n @media (forced-colors: active) {\n .brick-popover {\n --brick-popover-background: Canvas;\n --brick-popover-foreground: CanvasText;\n --brick-popover-muted-foreground: CanvasText;\n --brick-popover-border: CanvasText;\n box-shadow: none;\n }\n\n .brick-popover__arrow {\n color: CanvasText;\n fill: Canvas;\n filter: none;\n stroke: CanvasText;\n }\n }\n}\n","@layer brick.components {\n :where(.brick-tooltip__arrow, .brick-hover-card__arrow, .brick-popover__arrow) {\n color: var(--brick-floating-arrow-stroke, var(--brick-tooltip-border-color));\n fill: var(--brick-floating-arrow-fill, var(--brick-tooltip-background));\n filter: drop-shadow(0 1px 0 var(--brick-floating-arrow-stroke, var(--brick-tooltip-border-color)));\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{.brick-segment-group{--brick-segment-group-min-block-size:var(--brick-control-min-block-size-md);--brick-segment-group-item-padding-inline:var(--brick-space-3);--brick-segment-group-item-gap:var(--brick-space-2);--brick-segment-group-icon-size:1rem;--brick-segment-group-inset:0px;--brick-segment-group-background:var(--brick-color-surface-subtle);--brick-segment-group-border:var(--brick-color-border-default);--brick-segment-group-root-shadow:inset 0 0 0 var(--brick-border-width) var(--brick-segment-group-border);--brick-segment-group-indicator-background:var(--brick-color-surface-raised);--brick-segment-group-indicator-border:var(--brick-color-border-default);--brick-segment-group-indicator-shadow:0 .0625rem .125rem color-mix(in srgb, var(--brick-color-text-primary), transparent 82%);--brick-segment-group-foreground:var(--brick-color-text-secondary);--brick-segment-group-selected-foreground:var(--brick-color-text-primary);--brick-segment-group-focus-ring:var(--brick-color-focus-ring);box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--brick-segment-group-min-block-size);padding:var(--brick-segment-group-inset);border-radius:var(--brick-radius-control);background:var(--brick-segment-group-background);box-shadow:var(--brick-segment-group-root-shadow);border:0;align-items:stretch;gap:0;display:inline-flex;position:relative}.brick-segment-group[data-orientation=vertical]{flex-direction:column}.brick-segment-group[data-full-width]{inline-size:100%;display:flex}.brick-segment-group[data-full-width]>.brick-segment-group__item{flex:1 1 0}.brick-segment-group__indicator{z-index:0;inline-size:var(--brick-segment-group-indicator-inline-size,0);block-size:var(--brick-segment-group-indicator-block-size,0);border:var(--brick-border-width) solid var(--brick-segment-group-indicator-border);border-radius:calc(var(--brick-radius-control) - var(--brick-segment-group-inset));background:var(--brick-segment-group-indicator-background);box-shadow:var(--brick-segment-group-indicator-shadow);opacity:0;pointer-events:none;translate:var(--brick-segment-group-indicator-x,0) var(--brick-segment-group-indicator-y,0);transition:translate var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), inline-size var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), block-size var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), opacity var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);position:absolute;inset-block-start:0;inset-inline-start:0}.brick-segment-group__indicator[data-ready]{opacity:1}.brick-segment-group__item{z-index:1;box-sizing:border-box;min-inline-size:0;min-block-size:calc(var(--brick-segment-group-min-block-size) - (2 * var(--brick-segment-group-inset)) - 0px);justify-content:center;align-items:center;gap:var(--brick-segment-group-item-gap);padding-block:var(--brick-space-1);padding-inline:var(--brick-segment-group-item-padding-inline);border-radius:calc(var(--brick-radius-control) - var(--brick-segment-group-inset));appearance:none;color:var(--brick-segment-group-foreground);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);line-height:var(--brick-typography-control-md-line-height);white-space:
|
|
1
|
+
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{.brick-segment-group{--brick-segment-group-min-block-size:var(--brick-control-min-block-size-md);--brick-segment-group-item-padding-inline:var(--brick-space-3);--brick-segment-group-item-gap:var(--brick-space-2);--brick-segment-group-icon-size:1rem;--brick-segment-group-inset:0px;--brick-segment-group-background:var(--brick-color-surface-subtle);--brick-segment-group-border:var(--brick-color-border-default);--brick-segment-group-root-shadow:inset 0 0 0 var(--brick-border-width) var(--brick-segment-group-border);--brick-segment-group-indicator-background:var(--brick-color-surface-raised);--brick-segment-group-indicator-border:var(--brick-color-border-default);--brick-segment-group-indicator-shadow:0 .0625rem .125rem color-mix(in srgb, var(--brick-color-text-primary), transparent 82%);--brick-segment-group-foreground:var(--brick-color-text-secondary);--brick-segment-group-selected-foreground:var(--brick-color-text-primary);--brick-segment-group-focus-ring:var(--brick-color-focus-ring);box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--brick-segment-group-min-block-size);padding:var(--brick-segment-group-inset);border-radius:var(--brick-radius-control);background:var(--brick-segment-group-background);box-shadow:var(--brick-segment-group-root-shadow);border:0;align-items:stretch;gap:0;display:inline-flex;position:relative}.brick-segment-group[data-orientation=vertical]{flex-direction:column}.brick-segment-group[data-full-width]{inline-size:100%;display:flex}.brick-segment-group[data-full-width]>.brick-segment-group__item{flex:1 1 0}.brick-segment-group__indicator{z-index:0;inline-size:var(--brick-segment-group-indicator-inline-size,0);block-size:var(--brick-segment-group-indicator-block-size,0);border:var(--brick-border-width) solid var(--brick-segment-group-indicator-border);border-radius:calc(var(--brick-radius-control) - var(--brick-segment-group-inset));background:var(--brick-segment-group-indicator-background);box-shadow:var(--brick-segment-group-indicator-shadow);opacity:0;pointer-events:none;translate:var(--brick-segment-group-indicator-x,0) var(--brick-segment-group-indicator-y,0);transition:translate var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), inline-size var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), block-size var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), opacity var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);position:absolute;inset-block-start:0;inset-inline-start:0}.brick-segment-group__indicator[data-ready]{opacity:1}.brick-segment-group__item{z-index:1;box-sizing:border-box;min-inline-size:0;min-block-size:calc(var(--brick-segment-group-min-block-size) - (2 * var(--brick-segment-group-inset)) - 0px);justify-content:center;align-items:center;gap:var(--brick-segment-group-item-gap);padding-block:var(--brick-space-1);padding-inline:var(--brick-segment-group-item-padding-inline);border-radius:calc(var(--brick-radius-control) - var(--brick-segment-group-inset));appearance:none;color:var(--brick-segment-group-foreground);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);line-height:var(--brick-typography-control-md-line-height);text-align:center;white-space:normal;cursor:pointer;transition:color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);background:0 0;border:0;display:inline-flex;position:relative}.brick-segment-group__item>:where(svg,img,.brick-icon){inline-size:var(--brick-segment-group-icon-size);block-size:var(--brick-segment-group-icon-size);flex:none}.brick-segment-group__item-text{overflow-wrap:anywhere;min-inline-size:0}.brick-segment-group__item[data-state=checked]{color:var(--brick-segment-group-selected-foreground)}.brick-segment-group__item:focus-visible{outline:var(--brick-border-focus-width) solid var(--brick-segment-group-focus-ring);outline-offset:var(--brick-border-focus-offset)}.brick-segment-group__item[data-disabled]{color:var(--brick-color-text-disabled);cursor:not-allowed}.brick-segment-group__item[data-icon-only]{aspect-ratio:1;padding-inline:0}.brick-segment-group[data-size=sm]{--brick-segment-group-min-block-size:var(--brick-control-min-block-size-sm);--brick-segment-group-item-padding-inline:var(--brick-space-2);--brick-segment-group-item-gap:var(--brick-space-1);--brick-segment-group-icon-size:.875rem}.brick-segment-group[data-size=sm]>.brick-segment-group__item{font-family:var(--brick-typography-control-sm-font-family);font-size:var(--brick-typography-control-sm-font-size);font-weight:var(--brick-typography-control-sm-font-weight);line-height:var(--brick-typography-control-sm-line-height)}.brick-segment-group[data-size=lg]{--brick-segment-group-min-block-size:var(--brick-control-min-block-size-lg);--brick-segment-group-item-padding-inline:var(--brick-space-4);--brick-segment-group-item-gap:var(--brick-space-2);--brick-segment-group-icon-size:1.125rem}.brick-segment-group[data-size=lg]>.brick-segment-group__item{font-family:var(--brick-typography-control-lg-font-family);font-size:var(--brick-typography-control-lg-font-size);font-weight:var(--brick-typography-control-lg-font-weight);line-height:var(--brick-typography-control-lg-line-height)}@media (hover:hover) and (pointer:fine){.brick-segment-group__item:not([data-disabled]):hover{color:var(--brick-color-text-primary)}}@media (prefers-reduced-motion:reduce){.brick-segment-group__indicator{transition:none}}@media (forced-colors:active){.brick-segment-group{box-shadow:inset 0 0 0 var(--brick-border-width) ButtonText;background:canvas}.brick-segment-group__indicator{box-shadow:none;background:highlight;border-color:highlight}.brick-segment-group__item{color:buttontext;forced-color-adjust:none}.brick-segment-group__item[data-state=checked]{color:highlighttext}.brick-segment-group__item:focus-visible{outline-color:highlight}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=segment-group.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,21CAqCA,sEAIA,oEAKA,4EAIA,
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,21CAqCA,sEAIA,oEAKA,4EAIA,k8BA6BA,sDAIA,86BAiCA,kKAMA,yEAKA,oGAIA,6KAMA,oGAKA,2EAKA,0QASA,sSAOA,2QASA,sSAOA,wCACE,6FAKF,uCACE,iDAKF,8BACE,mGAIA,4FAKA,qEAIA,mEAGA,mEDjNJ","sources":["home/runner/work/brick/brick/.brick-cache/production/segment-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/segment-group/segment-group.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/segment-group/segment-group.css\";","@layer brick.tokens, flowstack.theme, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-segment-group {\n --brick-segment-group-min-block-size: var(\n --brick-control-min-block-size-md\n );\n --brick-segment-group-item-padding-inline: var(--brick-space-3);\n --brick-segment-group-item-gap: var(--brick-space-2);\n --brick-segment-group-icon-size: 1rem;\n --brick-segment-group-inset: 0px;\n --brick-segment-group-background: var(--brick-color-surface-subtle);\n --brick-segment-group-border: var(--brick-color-border-default);\n --brick-segment-group-root-shadow: inset 0 0 0 var(--brick-border-width)\n var(--brick-segment-group-border);\n --brick-segment-group-indicator-background: var(\n --brick-color-surface-raised\n );\n --brick-segment-group-indicator-border: var(--brick-color-border-default);\n --brick-segment-group-indicator-shadow: 0 0.0625rem 0.125rem\n color-mix(in srgb, var(--brick-color-text-primary), transparent 82%);\n --brick-segment-group-foreground: var(--brick-color-text-secondary);\n --brick-segment-group-selected-foreground: var(--brick-color-text-primary);\n --brick-segment-group-focus-ring: var(--brick-color-focus-ring);\n\n position: relative;\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-segment-group-min-block-size);\n align-items: stretch;\n gap: 0;\n padding: var(--brick-segment-group-inset);\n border: 0;\n border-radius: var(--brick-radius-control);\n background: var(--brick-segment-group-background);\n box-shadow: var(--brick-segment-group-root-shadow);\n }\n\n .brick-segment-group[data-orientation=\"vertical\"] {\n flex-direction: column;\n }\n\n .brick-segment-group[data-full-width] {\n display: flex;\n inline-size: 100%;\n }\n\n .brick-segment-group[data-full-width] > .brick-segment-group__item {\n flex: 1 1 0;\n }\n\n .brick-segment-group__indicator {\n position: absolute;\n z-index: 0;\n inset-block-start: 0;\n inset-inline-start: 0;\n inline-size: var(--brick-segment-group-indicator-inline-size, 0);\n block-size: var(--brick-segment-group-indicator-block-size, 0);\n border: var(--brick-border-width) solid\n var(--brick-segment-group-indicator-border);\n border-radius: calc(\n var(--brick-radius-control) - var(--brick-segment-group-inset)\n );\n background: var(--brick-segment-group-indicator-background);\n box-shadow: var(--brick-segment-group-indicator-shadow);\n opacity: 0;\n pointer-events: none;\n translate: var(--brick-segment-group-indicator-x, 0)\n var(--brick-segment-group-indicator-y, 0);\n transition:\n translate var(--brick-motion-duration-fast)\n var(--brick-motion-easing-standard),\n inline-size var(--brick-motion-duration-fast)\n var(--brick-motion-easing-standard),\n block-size var(--brick-motion-duration-fast)\n var(--brick-motion-easing-standard),\n opacity var(--brick-motion-duration-fast)\n var(--brick-motion-easing-standard);\n }\n\n .brick-segment-group__indicator[data-ready] {\n opacity: 1;\n }\n\n .brick-segment-group__item {\n position: relative;\n z-index: 1;\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n min-block-size: calc(\n var(--brick-segment-group-min-block-size) -\n (2 * var(--brick-segment-group-inset)) - 0px\n );\n align-items: center;\n justify-content: center;\n gap: var(--brick-segment-group-item-gap);\n padding-block: var(--brick-space-1);\n padding-inline: var(--brick-segment-group-item-padding-inline);\n border: 0;\n border-radius: calc(\n var(--brick-radius-control) - var(--brick-segment-group-inset)\n );\n appearance: none;\n background: transparent;\n color: var(--brick-segment-group-foreground);\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 line-height: var(--brick-typography-control-md-line-height);\n text-align: center;\n white-space: normal;\n cursor: pointer;\n transition: color var(--brick-motion-duration-fast)\n var(--brick-motion-easing-standard);\n }\n\n .brick-segment-group__item > :where(svg, img, .brick-icon) {\n flex: 0 0 auto;\n inline-size: var(--brick-segment-group-icon-size);\n block-size: var(--brick-segment-group-icon-size);\n }\n\n .brick-segment-group__item-text {\n min-inline-size: 0;\n overflow-wrap: anywhere;\n }\n\n .brick-segment-group__item[data-state=\"checked\"] {\n color: var(--brick-segment-group-selected-foreground);\n }\n\n .brick-segment-group__item:focus-visible {\n outline: var(--brick-border-focus-width) solid\n var(--brick-segment-group-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n .brick-segment-group__item[data-disabled] {\n color: var(--brick-color-text-disabled);\n cursor: not-allowed;\n }\n\n .brick-segment-group__item[data-icon-only] {\n aspect-ratio: 1;\n padding-inline: 0;\n }\n\n .brick-segment-group[data-size=\"sm\"] {\n --brick-segment-group-min-block-size: var(\n --brick-control-min-block-size-sm\n );\n --brick-segment-group-item-padding-inline: var(--brick-space-2);\n --brick-segment-group-item-gap: var(--brick-space-1);\n --brick-segment-group-icon-size: 0.875rem;\n }\n\n .brick-segment-group[data-size=\"sm\"] > .brick-segment-group__item {\n font-family: var(--brick-typography-control-sm-font-family);\n font-size: var(--brick-typography-control-sm-font-size);\n font-weight: var(--brick-typography-control-sm-font-weight);\n line-height: var(--brick-typography-control-sm-line-height);\n }\n\n .brick-segment-group[data-size=\"lg\"] {\n --brick-segment-group-min-block-size: var(\n --brick-control-min-block-size-lg\n );\n --brick-segment-group-item-padding-inline: var(--brick-space-4);\n --brick-segment-group-item-gap: var(--brick-space-2);\n --brick-segment-group-icon-size: 1.125rem;\n }\n\n .brick-segment-group[data-size=\"lg\"] > .brick-segment-group__item {\n font-family: var(--brick-typography-control-lg-font-family);\n font-size: var(--brick-typography-control-lg-font-size);\n font-weight: var(--brick-typography-control-lg-font-weight);\n line-height: var(--brick-typography-control-lg-line-height);\n }\n\n @media (hover: hover) and (pointer: fine) {\n .brick-segment-group__item:not([data-disabled]):hover {\n color: var(--brick-color-text-primary);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .brick-segment-group__indicator {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .brick-segment-group {\n background: Canvas;\n box-shadow: inset 0 0 0 var(--brick-border-width) ButtonText;\n }\n .brick-segment-group__indicator {\n border-color: Highlight;\n background: Highlight;\n box-shadow: none;\n }\n .brick-segment-group__item {\n color: ButtonText;\n forced-color-adjust: none;\n }\n .brick-segment-group__item[data-state=\"checked\"] {\n color: HighlightText;\n }\n .brick-segment-group__item:focus-visible {\n outline-color: Highlight;\n }\n }\n}\n"],"names":[]}
|
package/dist/styles/sidebar.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{.brick-sidebar{--brick-sidebar-expanded-width-sm:14rem;--brick-sidebar-expanded-width-md:17rem;--brick-sidebar-expanded-width-lg:20rem;--brick-sidebar-rail-width-sm:3.25rem;--brick-sidebar-rail-width-md:3.75rem;--brick-sidebar-rail-width-lg:4.25rem;--brick-sidebar-panel-width:var(--brick-sidebar-expanded-width-md);--brick-sidebar-panel-background:var(--brick-color-surface-base);--brick-sidebar-panel-border:var(--brick-color-border-subtle);--brick-sidebar-panel-radius:0;--brick-sidebar-panel-gap:0px;--brick-sidebar-region-padding-inline:var(--brick-space-4);--brick-sidebar-region-padding-block:var(--brick-space-4);--brick-sidebar-content-gap:var(--brick-space-3);--brick-sidebar-sticky-offset:0px;--brick-sidebar-available-block-size:calc(100dvh - var(--brick-sidebar-sticky-offset));--brick-sidebar-transition-duration:.18s;--brick-sidebar-transition-easing:ease;grid-template-columns:minmax(0, var(--brick-sidebar-panel-width)) minmax(0, 1fr);align-items:start;gap:var(--brick-sidebar-panel-gap);min-inline-size:0;display:grid}.brick-sidebar[data-size=sm]{--brick-sidebar-panel-width:var(--brick-sidebar-expanded-width-sm)}.brick-sidebar[data-size=lg]{--brick-sidebar-panel-width:var(--brick-sidebar-expanded-width-lg)}.brick-sidebar[data-state=rail]{--brick-sidebar-panel-width:var(--brick-sidebar-rail-width-md)}.brick-sidebar[data-state=rail][data-size=sm]{--brick-sidebar-panel-width:var(--brick-sidebar-rail-width-sm)}.brick-sidebar[data-state=rail][data-size=lg]{--brick-sidebar-panel-width:var(--brick-sidebar-rail-width-lg)}.brick-sidebar[data-state=offcanvas]{--brick-sidebar-panel-width:0px;--brick-sidebar-panel-gap:0px}.brick-sidebar[data-side=right]{grid-template-columns:minmax(0, 1fr) minmax(0, var(--brick-sidebar-panel-width))}.brick-sidebar[data-side=right]>.brick-sidebar__panel{grid-column:2}.brick-sidebar[data-side=right]>.brick-sidebar__main{grid-area:1/1}.brick-sidebar[data-variant=floating]{--brick-sidebar-panel-radius:var(--brick-radius-surface);--brick-sidebar-panel-gap:var(--brick-space-3);padding:var(--brick-space-3)}.brick-sidebar[data-surface=transparent]{--brick-sidebar-panel-background:transparent}.brick-sidebar[data-surface=base]{--brick-sidebar-panel-background:var(--brick-color-surface-base)}.brick-sidebar[data-surface=raised]{--brick-sidebar-panel-background:var(--brick-color-surface-raised)}.brick-sidebar__panel{z-index:1;min-inline-size:0;inline-size:var(--brick-sidebar-panel-width);border-
|
|
1
|
+
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{.brick-sidebar{--brick-sidebar-expanded-width-sm:14rem;--brick-sidebar-expanded-width-md:17rem;--brick-sidebar-expanded-width-lg:20rem;--brick-sidebar-rail-width-sm:3.25rem;--brick-sidebar-rail-width-md:3.75rem;--brick-sidebar-rail-width-lg:4.25rem;--brick-sidebar-panel-width:var(--brick-sidebar-expanded-width-md);--brick-sidebar-panel-background:var(--brick-color-surface-base);--brick-sidebar-panel-border:var(--brick-color-border-subtle);--brick-sidebar-panel-radius:0;--brick-sidebar-panel-gap:0px;--brick-sidebar-region-padding-inline:var(--brick-space-4);--brick-sidebar-region-padding-block:var(--brick-space-4);--brick-sidebar-content-gap:var(--brick-space-3);--brick-sidebar-sticky-offset:0px;--brick-sidebar-available-block-size:calc(100dvh - var(--brick-sidebar-sticky-offset));--brick-sidebar-transition-duration:.18s;--brick-sidebar-transition-easing:ease;grid-template-columns:minmax(0, var(--brick-sidebar-panel-width)) minmax(0, 1fr);align-items:start;gap:var(--brick-sidebar-panel-gap);min-inline-size:0;display:grid}.brick-sidebar[data-size=sm]{--brick-sidebar-panel-width:var(--brick-sidebar-expanded-width-sm)}.brick-sidebar[data-size=lg]{--brick-sidebar-panel-width:var(--brick-sidebar-expanded-width-lg)}.brick-sidebar[data-state=rail]{--brick-sidebar-panel-width:var(--brick-sidebar-rail-width-md)}.brick-sidebar[data-state=rail][data-size=sm]{--brick-sidebar-panel-width:var(--brick-sidebar-rail-width-sm)}.brick-sidebar[data-state=rail][data-size=lg]{--brick-sidebar-panel-width:var(--brick-sidebar-rail-width-lg)}.brick-sidebar[data-state=offcanvas]{--brick-sidebar-panel-width:0px;--brick-sidebar-panel-gap:0px}.brick-sidebar[data-side=right]{grid-template-columns:minmax(0, 1fr) minmax(0, var(--brick-sidebar-panel-width))}.brick-sidebar[data-side=right]>.brick-sidebar__panel{grid-column:2}.brick-sidebar[data-side=right]>.brick-sidebar__main{grid-area:1/1}.brick-sidebar[data-variant=floating]{--brick-sidebar-panel-radius:var(--brick-radius-surface);--brick-sidebar-panel-gap:var(--brick-space-3);padding:var(--brick-space-3)}.brick-sidebar[data-surface=transparent]{--brick-sidebar-panel-background:transparent}.brick-sidebar[data-surface=base]{--brick-sidebar-panel-background:var(--brick-color-surface-base)}.brick-sidebar[data-surface=raised]{--brick-sidebar-panel-background:var(--brick-color-surface-raised)}.brick-sidebar__panel{z-index:1;min-inline-size:0;inline-size:var(--brick-sidebar-panel-width);border-right:var(--brick-border-width) solid var(--brick-sidebar-panel-border);border-radius:var(--brick-sidebar-panel-radius);background:var(--brick-sidebar-panel-background);max-inline-size:100%;color:var(--brick-color-text-primary);flex-direction:column;align-self:stretch;display:flex;position:relative;overflow:clip}.brick-sidebar[data-side=right]>.brick-sidebar__panel{border-right:0;border-left:var(--brick-border-width) solid var(--brick-sidebar-panel-border)}.brick-sidebar:not([data-side=right]):dir(rtl){grid-template-columns:minmax(0, 1fr) minmax(0, var(--brick-sidebar-panel-width))}.brick-sidebar:not([data-side=right]):dir(rtl)>.brick-sidebar__panel{grid-column:2}.brick-sidebar:not([data-side=right]):dir(rtl)>.brick-sidebar__main{grid-area:1/1}.brick-sidebar[data-side=right]:dir(rtl){grid-template-columns:minmax(0, var(--brick-sidebar-panel-width)) minmax(0, 1fr)}.brick-sidebar[data-side=right]:dir(rtl)>.brick-sidebar__panel{grid-column:1}.brick-sidebar[data-side=right]:dir(rtl)>.brick-sidebar__main{grid-column:2}.brick-sidebar[data-variant=floating]>.brick-sidebar__panel{border:var(--brick-border-width) solid var(--brick-sidebar-panel-border);box-shadow:var(--brick-shadow-raised)}.brick-sidebar[data-position=sticky]>.brick-sidebar__panel{block-size:var(--brick-sidebar-available-block-size);min-block-size:0;position:sticky;inset-block-start:var(--brick-sidebar-sticky-offset)}.brick-sidebar[data-state=offcanvas]>.brick-sidebar__panel{visibility:hidden;border:0;align-self:start;block-size:0;min-block-size:0;inline-size:0;translate:-100%}.brick-sidebar[data-state=offcanvas][data-side=right]>.brick-sidebar__panel{translate:100%}.brick-sidebar__header,.brick-sidebar__footer{align-items:center;gap:var(--brick-sidebar-content-gap);padding:var(--brick-sidebar-region-padding-block) var(--brick-sidebar-region-padding-inline);flex:none;display:flex}.brick-sidebar__header{border-block-end:var(--brick-border-width) solid var(--brick-sidebar-panel-border)}.brick-sidebar__footer{border-block-start:var(--brick-border-width) solid var(--brick-sidebar-panel-border)}.brick-sidebar__content{gap:var(--brick-sidebar-content-gap);min-block-size:0;min-inline-size:0;padding:var(--brick-sidebar-region-padding-block) var(--brick-sidebar-region-padding-inline);flex-direction:column;flex:auto;display:flex}.brick-sidebar__main{min-inline-size:0}.brick-sidebar__trigger{box-sizing:border-box;min-inline-size:var(--brick-control-min-block-size-sm);min-block-size:var(--brick-control-min-block-size-sm);padding:var(--brick-space-2);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-radius-control);color:var(--brick-color-text-primary);cursor:pointer;background:0 0;justify-content:center;align-items:center;display:inline-flex}.brick-sidebar__trigger:hover:not(:disabled){background:var(--brick-color-surface-subtle)}.brick-sidebar__trigger:focus-visible{outline:var(--brick-border-focus-width) solid var(--brick-color-focus-ring);outline-offset:var(--brick-border-focus-offset)}.brick-sidebar__trigger:disabled{color:var(--brick-color-text-muted);cursor:not-allowed}@media (prefers-reduced-motion:no-preference){.brick-sidebar{transition:grid-template-columns var(--brick-sidebar-transition-duration) var(--brick-sidebar-transition-easing), gap var(--brick-sidebar-transition-duration) var(--brick-sidebar-transition-easing)}.brick-sidebar__panel{transition:inline-size var(--brick-sidebar-transition-duration) var(--brick-sidebar-transition-easing), translate var(--brick-sidebar-transition-duration) var(--brick-sidebar-transition-easing)}}@media (forced-colors:active){.brick-sidebar{--brick-sidebar-panel-background:Canvas;--brick-sidebar-panel-border:CanvasText}.brick-sidebar__trigger{color:buttontext;border-color:buttonborder}.brick-sidebar__trigger:focus-visible{outline-color:highlight}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=sidebar.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,4gCAgCA,gGAGA,gGAGA,+FAGA,6GAGA,6GAGA,mGAKA,iHAMA,oEAGA,mEAKA,2KAMA,sFAIA,mGAIA,uGAIA,gaAiBA,mJAKA,gIAMA,mFAGA,kFAIA,0HAMA,6EAGA,4EAGA,2KAIA,sMAMA,mKASA,2FAKA,0NASA,0GAIA,4GAIA,0OAUA,uCAIA,uZAcA,0FAGA,kKAIA,wFAKA,8CACE,qNAOA,yNASF,8BACE,+FAIA,mEAIA,gED/OJ","sources":["home/runner/work/brick/brick/.brick-cache/production/sidebar.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/sidebar/sidebar.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/sidebar/sidebar.css\";","@layer brick.tokens, flowstack.theme, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-sidebar {\n --brick-sidebar-expanded-width-sm: 14rem;\n --brick-sidebar-expanded-width-md: 17rem;\n --brick-sidebar-expanded-width-lg: 20rem;\n --brick-sidebar-rail-width-sm: 3.25rem;\n --brick-sidebar-rail-width-md: 3.75rem;\n --brick-sidebar-rail-width-lg: 4.25rem;\n --brick-sidebar-panel-width: var(--brick-sidebar-expanded-width-md);\n --brick-sidebar-panel-background: var(--brick-color-surface-base);\n --brick-sidebar-panel-border: var(--brick-color-border-subtle);\n --brick-sidebar-panel-radius: 0;\n --brick-sidebar-panel-gap: 0px;\n --brick-sidebar-region-padding-inline: var(--brick-space-4);\n --brick-sidebar-region-padding-block: var(--brick-space-4);\n --brick-sidebar-content-gap: var(--brick-space-3);\n --brick-sidebar-sticky-offset: 0px;\n --brick-sidebar-available-block-size: calc(\n 100dvh - var(--brick-sidebar-sticky-offset)\n );\n --brick-sidebar-transition-duration: 180ms;\n --brick-sidebar-transition-easing: ease;\n\n display: grid;\n min-inline-size: 0;\n grid-template-columns: minmax(0, var(--brick-sidebar-panel-width)) minmax(\n 0,\n 1fr\n );\n align-items: start;\n gap: var(--brick-sidebar-panel-gap);\n }\n\n .brick-sidebar[data-size=\"sm\"] {\n --brick-sidebar-panel-width: var(--brick-sidebar-expanded-width-sm);\n }\n .brick-sidebar[data-size=\"lg\"] {\n --brick-sidebar-panel-width: var(--brick-sidebar-expanded-width-lg);\n }\n .brick-sidebar[data-state=\"rail\"] {\n --brick-sidebar-panel-width: var(--brick-sidebar-rail-width-md);\n }\n .brick-sidebar[data-state=\"rail\"][data-size=\"sm\"] {\n --brick-sidebar-panel-width: var(--brick-sidebar-rail-width-sm);\n }\n .brick-sidebar[data-state=\"rail\"][data-size=\"lg\"] {\n --brick-sidebar-panel-width: var(--brick-sidebar-rail-width-lg);\n }\n .brick-sidebar[data-state=\"offcanvas\"] {\n --brick-sidebar-panel-width: 0px;\n --brick-sidebar-panel-gap: 0px;\n }\n\n .brick-sidebar[data-side=\"right\"] {\n grid-template-columns: minmax(0, 1fr) minmax(\n 0,\n var(--brick-sidebar-panel-width)\n );\n }\n .brick-sidebar[data-side=\"right\"] > .brick-sidebar__panel {\n grid-column: 2;\n }\n .brick-sidebar[data-side=\"right\"] > .brick-sidebar__main {\n grid-column: 1;\n grid-row: 1;\n }\n\n .brick-sidebar[data-variant=\"floating\"] {\n --brick-sidebar-panel-radius: var(--brick-radius-surface);\n --brick-sidebar-panel-gap: var(--brick-space-3);\n padding: var(--brick-space-3);\n }\n\n .brick-sidebar[data-surface=\"transparent\"] {\n --brick-sidebar-panel-background: transparent;\n }\n\n .brick-sidebar[data-surface=\"base\"] {\n --brick-sidebar-panel-background: var(--brick-color-surface-base);\n }\n\n .brick-sidebar[data-surface=\"raised\"] {\n --brick-sidebar-panel-background: var(--brick-color-surface-raised);\n }\n\n .brick-sidebar__panel {\n position: relative;\n z-index: 1;\n display: flex;\n overflow: clip;\n min-inline-size: 0;\n inline-size: var(--brick-sidebar-panel-width);\n max-inline-size: 100%;\n align-self: stretch;\n flex-direction: column;\n border-right: var(--brick-border-width) solid\n var(--brick-sidebar-panel-border);\n border-radius: var(--brick-sidebar-panel-radius);\n background: var(--brick-sidebar-panel-background);\n color: var(--brick-color-text-primary);\n }\n\n .brick-sidebar[data-side=\"right\"] > .brick-sidebar__panel {\n border-right: 0;\n border-left: var(--brick-border-width) solid\n var(--brick-sidebar-panel-border);\n }\n .brick-sidebar:not([data-side=\"right\"]):dir(rtl) {\n grid-template-columns: minmax(0, 1fr) minmax(\n 0,\n var(--brick-sidebar-panel-width)\n );\n }\n .brick-sidebar:not([data-side=\"right\"]):dir(rtl) > .brick-sidebar__panel {\n grid-column: 2;\n }\n .brick-sidebar:not([data-side=\"right\"]):dir(rtl) > .brick-sidebar__main {\n grid-column: 1;\n grid-row: 1;\n }\n .brick-sidebar[data-side=\"right\"]:dir(rtl) {\n grid-template-columns: minmax(0, var(--brick-sidebar-panel-width)) minmax(\n 0,\n 1fr\n );\n }\n .brick-sidebar[data-side=\"right\"]:dir(rtl) > .brick-sidebar__panel {\n grid-column: 1;\n }\n .brick-sidebar[data-side=\"right\"]:dir(rtl) > .brick-sidebar__main {\n grid-column: 2;\n }\n .brick-sidebar[data-variant=\"floating\"] > .brick-sidebar__panel {\n border: var(--brick-border-width) solid var(--brick-sidebar-panel-border);\n box-shadow: var(--brick-shadow-raised);\n }\n .brick-sidebar[data-position=\"sticky\"] > .brick-sidebar__panel {\n position: sticky;\n inset-block-start: var(--brick-sidebar-sticky-offset);\n block-size: var(--brick-sidebar-available-block-size);\n min-block-size: 0;\n }\n .brick-sidebar[data-state=\"offcanvas\"] > .brick-sidebar__panel {\n visibility: hidden;\n inline-size: 0;\n block-size: 0;\n min-block-size: 0;\n align-self: start;\n border: 0;\n translate: -100% 0;\n }\n .brick-sidebar[data-state=\"offcanvas\"][data-side=\"right\"]\n > .brick-sidebar__panel {\n translate: 100% 0;\n }\n\n .brick-sidebar__header,\n .brick-sidebar__footer {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--brick-sidebar-content-gap);\n padding: var(--brick-sidebar-region-padding-block)\n var(--brick-sidebar-region-padding-inline);\n }\n .brick-sidebar__header {\n border-block-end: var(--brick-border-width) solid\n var(--brick-sidebar-panel-border);\n }\n .brick-sidebar__footer {\n border-block-start: var(--brick-border-width) solid\n var(--brick-sidebar-panel-border);\n }\n .brick-sidebar__content {\n display: flex;\n min-block-size: 0;\n min-inline-size: 0;\n flex: 1 1 auto;\n flex-direction: column;\n gap: var(--brick-sidebar-content-gap);\n padding: var(--brick-sidebar-region-padding-block)\n var(--brick-sidebar-region-padding-inline);\n }\n .brick-sidebar__main {\n min-inline-size: 0;\n }\n\n .brick-sidebar__trigger {\n box-sizing: border-box;\n display: inline-flex;\n min-inline-size: var(--brick-control-min-block-size-sm);\n min-block-size: var(--brick-control-min-block-size-sm);\n align-items: center;\n justify-content: center;\n padding: var(--brick-space-2);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-radius-control);\n background: transparent;\n color: var(--brick-color-text-primary);\n cursor: pointer;\n }\n .brick-sidebar__trigger:hover:not(:disabled) {\n background: var(--brick-color-surface-subtle);\n }\n .brick-sidebar__trigger:focus-visible {\n outline: var(--brick-border-focus-width) solid var(--brick-color-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n .brick-sidebar__trigger:disabled {\n color: var(--brick-color-text-muted);\n cursor: not-allowed;\n }\n\n @media (prefers-reduced-motion: no-preference) {\n .brick-sidebar {\n transition:\n grid-template-columns var(--brick-sidebar-transition-duration)\n var(--brick-sidebar-transition-easing),\n gap var(--brick-sidebar-transition-duration)\n var(--brick-sidebar-transition-easing);\n }\n .brick-sidebar__panel {\n transition:\n inline-size var(--brick-sidebar-transition-duration)\n var(--brick-sidebar-transition-easing),\n translate var(--brick-sidebar-transition-duration)\n var(--brick-sidebar-transition-easing);\n }\n }\n\n @media (forced-colors: active) {\n .brick-sidebar {\n --brick-sidebar-panel-background: Canvas;\n --brick-sidebar-panel-border: CanvasText;\n }\n .brick-sidebar__trigger {\n border-color: ButtonBorder;\n color: ButtonText;\n }\n .brick-sidebar__trigger:focus-visible {\n outline-color: Highlight;\n }\n }\n}\n"],"names":[]}
|