@dev-dga/css 0.8.2 → 0.8.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/CHANGELOG.md +6 -0
- package/dist/components/sidebar.css +1 -1
- package/dist/components/sidebar.css.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @dev-dga/css
|
|
2
2
|
|
|
3
|
+
## 0.8.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- **Sidebar — self-sufficient full height.** `.ddga-sidebar-wrapper` `min-block-size: 100%` → **`100svh`**, so the app shell fills the viewport without the consumer building an `html → body → root` height chain (the old `100%` silently collapsed the sidebar to content height). `svh` (not `dvh`) avoids reflow as mobile browser chrome shows/hides; override `min-block-size` for an embedded/boxed sidebar. Released in lockstep with `@dev-dga/react@0.8.3` and `@dev-dga/tokens@0.8.3`.
|
|
8
|
+
|
|
3
9
|
## 0.8.2
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-sidebar-wrapper{--ddga-sidebar-width:16rem;--ddga-sidebar-width-icon:3.5rem;min-block-size:
|
|
1
|
+
@layer ddga-components{.ddga-sidebar-wrapper{--ddga-sidebar-width:16rem;--ddga-sidebar-width-icon:3.5rem;min-block-size:100svh;inline-size:100%;display:flex}.ddga-sidebar{inline-size:var(--ddga-sidebar-width);background-color:var(--ddga-color-background);block-size:100%;color:var(--ddga-text-primary);border-inline-end:1px solid var(--ddga-color-border);will-change:inline-size;flex-direction:column;flex:none;transition:inline-size .25s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.ddga-sidebar[data-side=end]{border-inline-end:0;border-inline-start:1px solid var(--ddga-color-border);order:1}.ddga-sidebar[data-collapsible=icon][data-state=collapsed]{inline-size:var(--ddga-sidebar-width-icon)}.ddga-sidebar[data-collapsible=offcanvas][data-state=collapsed]{border-inline:0;inline-size:0}.ddga-sidebar[data-variant=floating]{margin:var(--ddga-space-2);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-lg);block-size:auto;box-shadow:var(--ddga-shadow-md)}.ddga-sidebar[data-variant=inset]{background-color:#0000;border-inline-end:0}.ddga-sidebar--mobile{inline-size:var(--ddga-sidebar-width);flex-direction:column;max-inline-size:85vw;display:flex}.ddga-sidebar-inset{flex-direction:column;flex:auto;min-inline-size:0;display:flex}.ddga-sidebar-wrapper:has(.ddga-sidebar[data-variant=inset]) .ddga-sidebar-inset{margin:var(--ddga-space-2);background-color:var(--ddga-color-background);border:1px solid var(--ddga-color-border);border-radius:var(--ddga-radius-lg);box-shadow:var(--ddga-shadow-sm);overflow:hidden}.ddga-sidebar__trigger{border-radius:var(--ddga-radius-sm);block-size:2rem;inline-size:2rem;color:var(--ddga-text-secondary);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.ddga-sidebar__trigger:hover{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-sidebar__trigger:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:2px}.ddga-sidebar__trigger>svg{block-size:1.125rem;inline-size:1.125rem}.ddga-sidebar__rail{cursor:col-resize;background:0 0;border:0;inline-size:.75rem;position:absolute;inset-block:0;inset-inline-end:0;transform:translate(50%)}[dir=rtl] .ddga-sidebar__rail{transform:translate(-50%)}.ddga-sidebar__header,.ddga-sidebar__footer{gap:var(--ddga-space-2);padding:var(--ddga-space-2);flex-direction:column;display:flex}.ddga-sidebar__content{gap:var(--ddga-space-1);min-block-size:0;padding:var(--ddga-space-2);flex-direction:column;flex:auto;transition:padding-inline .25s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden auto}.ddga-sidebar__separator{block-size:1px;margin-block:var(--ddga-space-1);margin-inline:var(--ddga-space-2);background-color:var(--ddga-color-border);border:0}.ddga-sidebar__group{padding:var(--ddga-space-2);flex-direction:column;transition:padding-inline .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.ddga-sidebar__group-label{block-size:1.75rem;padding-inline:var(--ddga-space-2);font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-semibold);color:var(--ddga-text-tertiary);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;align-items:center;transition:block-size .25s cubic-bezier(.4,0,.2,1),opacity .15s;display:flex;overflow:hidden}[dir=rtl] .ddga-sidebar__group-label{letter-spacing:normal;text-transform:none}.ddga-sidebar__group-action{border-radius:var(--ddga-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;transition:opacity .15s;display:inline-flex;position:absolute;inset-block-start:var(--ddga-space-2);inset-inline-end:var(--ddga-space-2)}.ddga-sidebar__group-action:hover{background-color:var(--ddga-color-muted)}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__group-label{opacity:0;block-size:0;margin-block:0;padding-block:0}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__group-action,.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__menu-badge{opacity:0;pointer-events:none}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__menu-sub{display:none}.ddga-sidebar__menu{gap:var(--ddga-space-1);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ddga-sidebar__menu-item{position:relative}.ddga-sidebar__menu-button{align-items:center;gap:var(--ddga-space-2);inline-size:100%;min-inline-size:0;padding-block:var(--ddga-space-2);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-md);color:var(--ddga-text-primary);font-size:var(--ddga-font-size-sm);font-weight:var(--ddga-font-weight-medium);text-align:start;cursor:pointer;white-space:nowrap;background:0 0;border:0;text-decoration:none;transition:background-color .12s,color .12s,padding-inline .25s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.ddga-sidebar__menu-button>svg{block-size:1.125rem;inline-size:1.125rem;color:var(--ddga-text-secondary);flex:none;transition:color .12s}.ddga-sidebar__menu-button>:not(:first-child){transition:opacity .15s}.ddga-sidebar__menu-button:hover{background-color:var(--ddga-color-muted)}.ddga-sidebar__menu-button:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:-2px}.ddga-sidebar__menu-button:active{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-sidebar__menu-button[data-active=true]{background-color:var(--ddga-color-muted);color:var(--ddga-color-primary);font-weight:var(--ddga-font-weight-semibold)}.ddga-sidebar__menu-button[data-active=true]>svg{color:var(--ddga-color-primary)}.ddga-sidebar__menu-button--sm{padding-block:var(--ddga-space-1);font-size:var(--ddga-font-size-xs)}.ddga-sidebar__menu-button--lg{padding-block:var(--ddga-space-3);font-size:var(--ddga-font-size-base)}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__content,.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__group{padding-inline:0}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__menu-button{padding-inline:calc((var(--ddga-sidebar-width-icon) - 1.125rem) / 2)}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__menu-button>:not(:first-child){opacity:0}.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__header,.ddga-sidebar[data-collapsible=icon][data-state=collapsed] .ddga-sidebar__footer{align-items:center}.ddga-sidebar__menu-action{border-radius:var(--ddga-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--ddga-text-secondary);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-end:var(--ddga-space-1);transform:translateY(-50%)}.ddga-sidebar__menu-action:hover{background-color:var(--ddga-color-muted)}.ddga-sidebar__menu-action:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:2px}.ddga-sidebar__menu-action[data-show-on-hover]{opacity:0}.ddga-sidebar__menu-item:hover .ddga-sidebar__menu-action[data-show-on-hover],.ddga-sidebar__menu-action[data-show-on-hover]:focus-visible{opacity:1}.ddga-sidebar__menu-badge{pointer-events:none;block-size:1.25rem;min-inline-size:1.25rem;padding-inline:var(--ddga-space-1);border-radius:var(--ddga-radius-full);background-color:var(--ddga-color-muted);color:var(--ddga-text-secondary);font-size:var(--ddga-font-size-xs);font-weight:var(--ddga-font-weight-medium);justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-end:var(--ddga-space-2);transform:translateY(-50%)}.ddga-sidebar__menu-skeleton{align-items:center;gap:var(--ddga-space-2);block-size:2rem;padding-inline:var(--ddga-space-2);display:flex}.ddga-sidebar__menu-skeleton-text{flex:auto;max-inline-size:12rem}.ddga-sidebar__menu-sub{border-inline-start:1px solid var(--ddga-color-border);gap:var(--ddga-space-1);flex-direction:column;margin:0;margin-inline-start:var(--ddga-space-3);padding-inline-start:var(--ddga-space-2);list-style:none;display:flex}.ddga-sidebar__menu-sub-button{align-items:center;gap:var(--ddga-space-2);inline-size:100%;padding-block:var(--ddga-space-1);padding-inline:var(--ddga-space-2);border-radius:var(--ddga-radius-sm);color:var(--ddga-text-secondary);font-size:var(--ddga-font-size-sm);cursor:pointer;text-decoration:none;transition:background-color .12s,color .12s;display:flex}.ddga-sidebar__menu-sub-button:hover{background-color:var(--ddga-color-muted);color:var(--ddga-text-primary)}.ddga-sidebar__menu-sub-button:focus-visible{outline:2px solid var(--ddga-color-ring);outline-offset:-2px}.ddga-sidebar__menu-sub-button[data-active=true]{color:var(--ddga-color-primary);font-weight:var(--ddga-font-weight-semibold)}.ddga-sidebar__menu-sub-button--sm{font-size:var(--ddga-font-size-xs)}@media (forced-colors:active){.ddga-sidebar{border-color:canvastext}.ddga-sidebar__menu-button[data-active=true],.ddga-sidebar__menu-button:hover,.ddga-sidebar__menu-sub-button[data-active=true],.ddga-sidebar__menu-sub-button:hover{color:highlighttext;background-color:highlight}.ddga-sidebar__separator,.ddga-sidebar__menu-sub{background-color:canvastext;border-color:canvastext}}@media (prefers-reduced-motion:reduce){.ddga-sidebar,.ddga-sidebar__content,.ddga-sidebar__group,.ddga-sidebar__group-label,.ddga-sidebar__group-action,.ddga-sidebar__menu-button,.ddga-sidebar__menu-button>svg,.ddga-sidebar__menu-button>*,.ddga-sidebar__menu-badge,.ddga-sidebar__menu-sub-button{transition:none}}}
|
|
2
2
|
/*# sourceMappingURL=sidebar.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAOE,oIAWA,+UAiBA,gHAOA,sGAKA,8FAOA,+LAQA,6EAMA,oHASA,mFAWA,yRAWA,4OAaA,qGAIA,iGAIA,oEAKA,6JAUA,wDAMA,mIAQA,qNAYA,8JAUA,6JAQA,kXAiBA,+EAKA,gWAgBA,2EAQA,4IAMA,0MAKA,gGAMA,kHASA,2CAIA,ohBA0BA,yIASA,sEAGA,0EAGA,sGAIA,0GAIA,mKAKA,iFAIA,oGAIA,sGAWA,mLAIA,2JAGA,mHAQA,qLAOA,kVAgBA,0EAGA,qGAIA,yDAGA,qJAKA,geAmBA,wIAOA,kEAOA,oPAWA,qWAgBA,6GAIA,0GAIA,8HAIA,sEAMA,8BACE,sCAGA,mNAUA,sGASF,uCACE","sources":["src/components/sidebar.css"],"sourcesContent":["@layer ddga-components {\n /* App-shell navigation. CSS keys off data-attributes set on the <aside>:\n data-state (expanded|collapsed), data-collapsible (icon|offcanvas|none),\n data-variant (sidebar|floating|inset), data-side (start|end). Widths are\n custom properties so consumers override per instance. Logical properties\n keep it RTL-correct; the few direction-specific bits flip via [dir='rtl']. */\n\n .ddga-sidebar-wrapper {\n --ddga-sidebar-width: 16rem;\n --ddga-sidebar-width-icon: 3.5rem;\n\n display: flex;\n min-block-size: 100%;\n inline-size: 100%;\n }\n\n /* ─── Container ─── */\n\n .ddga-sidebar {\n display: flex;\n flex-direction: column;\n flex: none;\n inline-size: var(--ddga-sidebar-width);\n block-size: 100%;\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n border-inline-end: 1px solid var(--ddga-color-border);\n /* Shared easing + duration for the whole collapse so width, paddings and\n fades stay in lockstep (Material standard ease). */\n transition: inline-size 250ms cubic-bezier(0.4, 0, 0.2, 1);\n will-change: inline-size;\n overflow: hidden;\n }\n\n /* side=end → border on the opposite logical edge and order after the inset. */\n .ddga-sidebar[data-side='end'] {\n order: 1;\n border-inline-end: 0;\n border-inline-start: 1px solid var(--ddga-color-border);\n }\n\n /* Collapsed icon rail. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] {\n inline-size: var(--ddga-sidebar-width-icon);\n }\n\n /* Offcanvas collapse fully hides on desktop. */\n .ddga-sidebar[data-collapsible='offcanvas'][data-state='collapsed'] {\n inline-size: 0;\n border-inline: 0;\n }\n\n /* ─── Variants ─── */\n\n .ddga-sidebar[data-variant='floating'] {\n margin: var(--ddga-space-2);\n block-size: auto;\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-md);\n }\n\n .ddga-sidebar[data-variant='inset'] {\n border-inline-end: 0;\n background-color: transparent;\n }\n\n /* Mobile: the Drawer owns positioning; just set the panel width + layout. */\n .ddga-sidebar--mobile {\n inline-size: var(--ddga-sidebar-width);\n max-inline-size: 85vw;\n display: flex;\n flex-direction: column;\n }\n\n /* ─── Inset (main content region) ─── */\n\n .ddga-sidebar-inset {\n flex: 1 1 auto;\n min-inline-size: 0;\n display: flex;\n flex-direction: column;\n }\n\n /* When a sibling sidebar uses variant=inset, the main area floats as a card.\n Consumers put <Sidebar variant=\"inset\"> + <SidebarInset> as siblings; the\n inset card styling is opt-in via a modifier the consumer adds, OR scope by\n wrapper. Keep it simple: provide the card look on a data hook. */\n .ddga-sidebar-wrapper:has(.ddga-sidebar[data-variant='inset']) .ddga-sidebar-inset {\n margin: var(--ddga-space-2);\n background-color: var(--ddga-color-background);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-sm);\n overflow: hidden;\n }\n\n /* ─── Trigger / Rail ─── */\n\n .ddga-sidebar__trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 2rem;\n block-size: 2rem;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n }\n .ddga-sidebar__trigger:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__trigger:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-sidebar__trigger > svg {\n inline-size: 1.125rem;\n block-size: 1.125rem;\n }\n\n .ddga-sidebar__rail {\n position: absolute;\n inset-block: 0;\n inset-inline-end: 0;\n inline-size: 0.75rem;\n transform: translateX(50%);\n cursor: col-resize;\n border: 0;\n background: transparent;\n }\n [dir='rtl'] .ddga-sidebar__rail {\n transform: translateX(-50%);\n }\n\n /* ─── Header / Content / Footer / Separator ─── */\n\n .ddga-sidebar__header,\n .ddga-sidebar__footer {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n }\n\n .ddga-sidebar__content {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n padding: var(--ddga-space-2);\n transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .ddga-sidebar__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: var(--ddga-space-2);\n border: 0;\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Group ─── */\n\n .ddga-sidebar__group {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: var(--ddga-space-2);\n transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .ddga-sidebar__group-label {\n display: flex;\n align-items: center;\n block-size: 1.75rem;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n white-space: nowrap;\n overflow: hidden;\n transition:\n block-size 250ms cubic-bezier(0.4, 0, 0.2, 1),\n opacity 150ms ease;\n }\n /* Protect Arabic letter joining — no tracking, no uppercasing. */\n [dir='rtl'] .ddga-sidebar__group-label {\n letter-spacing: normal;\n text-transform: none;\n }\n\n .ddga-sidebar__group-action {\n position: absolute;\n inset-block-start: var(--ddga-space-2);\n inset-inline-end: var(--ddga-space-2);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n transition: opacity 150ms ease;\n }\n .ddga-sidebar__group-action:hover {\n background-color: var(--ddga-color-muted);\n }\n\n /* Collapsed rail — fade/collapse instead of display:none so nothing pops.\n Group label collapses its height (and fades); group action + badge fade.\n The sub-menu list is the only hard hide (it's replaced by the Popover\n flyout when collapsed, so animating it adds no value). */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-label {\n block-size: 0;\n margin-block: 0;\n padding-block: 0;\n opacity: 0;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-action,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-badge {\n opacity: 0;\n pointer-events: none;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-sub {\n display: none;\n }\n\n /* ─── Menu ─── */\n\n .ddga-sidebar__menu {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-sidebar__menu-item {\n position: relative;\n }\n\n .ddga-sidebar__menu-button {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n min-inline-size: 0;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-2);\n border: 0;\n border-radius: var(--ddga-radius-md);\n background: transparent;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n text-align: start;\n text-decoration: none;\n cursor: pointer;\n overflow: hidden;\n white-space: nowrap;\n /* background/color ease for hover + active feedback; padding-inline shares\n the collapse easing so the icon glides to centre in lockstep with width. */\n transition:\n background-color 120ms ease,\n color 120ms ease,\n padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n .ddga-sidebar__menu-button > svg {\n flex: none;\n inline-size: 1.125rem;\n block-size: 1.125rem;\n color: var(--ddga-text-secondary);\n transition: color 120ms ease;\n }\n /* Everything after the leading icon (label, trailing chevron, inline badge)\n fades on collapse rather than snapping out. */\n .ddga-sidebar__menu-button > *:not(:first-child) {\n transition: opacity 150ms ease;\n }\n .ddga-sidebar__menu-button:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-sidebar__menu-button:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n .ddga-sidebar__menu-button:active {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__menu-button[data-active='true'] {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-sidebar__menu-button[data-active='true'] > svg {\n color: var(--ddga-color-primary);\n }\n\n .ddga-sidebar__menu-button--sm {\n padding-block: var(--ddga-space-1);\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-sidebar__menu-button--lg {\n padding-block: var(--ddga-space-3);\n font-size: var(--ddga-font-size-base);\n }\n\n /* Collapsed rail: the icon stays at flex-start (NO justify-content switch —\n that would snap it to the centre of the still-wide box, then swoop inward).\n Instead the parent content/group padding animates to 0 and the button's own\n inline padding grows to exactly centre the 1.125rem icon in the rail. Net\n icon travel is a few px, fully in sync with the width, so no glitch. The\n label/chevron/badge fade via the base opacity transition above. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__content,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group {\n padding-inline: 0;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-button {\n padding-inline: calc((var(--ddga-sidebar-width-icon) - 1.125rem) / 2);\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed']\n .ddga-sidebar__menu-button\n > *:not(:first-child) {\n opacity: 0;\n }\n\n /* Collapsed rail: center header/footer content and clip overflow so a wide\n brand/label doesn't spill past the rail edge. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\n align-items: center;\n }\n\n /* ─── Menu action / badge / skeleton ─── */\n\n .ddga-sidebar__menu-action {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--ddga-space-1);\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n }\n .ddga-sidebar__menu-action:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-sidebar__menu-action:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-sidebar__menu-action[data-show-on-hover] {\n opacity: 0;\n }\n .ddga-sidebar__menu-item:hover .ddga-sidebar__menu-action[data-show-on-hover],\n .ddga-sidebar__menu-action[data-show-on-hover]:focus-visible {\n opacity: 1;\n }\n\n .ddga-sidebar__menu-badge {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--ddga-space-2);\n transform: translateY(-50%);\n pointer-events: none;\n min-inline-size: 1.25rem;\n block-size: 1.25rem;\n padding-inline: var(--ddga-space-1);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n }\n\n .ddga-sidebar__menu-skeleton {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n block-size: 2rem;\n padding-inline: var(--ddga-space-2);\n }\n .ddga-sidebar__menu-skeleton-text {\n flex: 1 1 auto;\n max-inline-size: 12rem;\n }\n\n /* ─── Sub-menu ─── */\n\n .ddga-sidebar__menu-sub {\n list-style: none;\n margin: 0;\n margin-inline-start: var(--ddga-space-3);\n padding-inline-start: var(--ddga-space-2);\n border-inline-start: 1px solid var(--ddga-color-border);\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-sidebar__menu-sub-button {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-sm);\n text-decoration: none;\n cursor: pointer;\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n .ddga-sidebar__menu-sub-button:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__menu-sub-button:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n .ddga-sidebar__menu-sub-button[data-active='true'] {\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-sidebar__menu-sub-button--sm {\n font-size: var(--ddga-font-size-xs);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-sidebar {\n border-color: CanvasText;\n }\n .ddga-sidebar__menu-button[data-active='true'],\n .ddga-sidebar__menu-button:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-sidebar__menu-sub-button[data-active='true'],\n .ddga-sidebar__menu-sub-button:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-sidebar__separator,\n .ddga-sidebar__menu-sub {\n background-color: CanvasText;\n border-color: CanvasText;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-sidebar,\n .ddga-sidebar__content,\n .ddga-sidebar__group,\n .ddga-sidebar__group-label,\n .ddga-sidebar__group-action,\n .ddga-sidebar__menu-button,\n .ddga-sidebar__menu-button > svg,\n .ddga-sidebar__menu-button > *,\n .ddga-sidebar__menu-badge,\n .ddga-sidebar__menu-sub-button {\n transition: none;\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAOE,sIAeA,+UAiBA,gHAOA,sGAKA,8FAOA,+LAQA,6EAMA,oHASA,mFAWA,yRAWA,4OAaA,qGAIA,iGAIA,oEAKA,6JAUA,wDAMA,mIAQA,qNAYA,8JAUA,6JAQA,kXAiBA,+EAKA,gWAgBA,2EAQA,4IAMA,0MAKA,gGAMA,kHASA,2CAIA,ohBA0BA,yIASA,sEAGA,0EAGA,sGAIA,0GAIA,mKAKA,iFAIA,oGAIA,sGAWA,mLAIA,2JAGA,mHAQA,qLAOA,kVAgBA,0EAGA,qGAIA,yDAGA,qJAKA,geAmBA,wIAOA,kEAOA,oPAWA,qWAgBA,6GAIA,0GAIA,8HAIA,sEAMA,8BACE,sCAGA,mNAUA,sGASF,uCACE","sources":["src/components/sidebar.css"],"sourcesContent":["@layer ddga-components {\n /* App-shell navigation. CSS keys off data-attributes set on the <aside>:\n data-state (expanded|collapsed), data-collapsible (icon|offcanvas|none),\n data-variant (sidebar|floating|inset), data-side (start|end). Widths are\n custom properties so consumers override per instance. Logical properties\n keep it RTL-correct; the few direction-specific bits flip via [dir='rtl']. */\n\n .ddga-sidebar-wrapper {\n --ddga-sidebar-width: 16rem;\n --ddga-sidebar-width-icon: 3.5rem;\n\n display: flex;\n /* Self-sufficient full height (matches shadcn's `min-h-svh`): the shell fills\n the viewport without the consumer building an html→body→root height chain.\n `svh` (not `dvh`) avoids reflow as mobile browser chrome shows/hides. For an\n embedded/boxed sidebar, override `min-block-size` on the wrapper. */\n min-block-size: 100svh;\n inline-size: 100%;\n }\n\n /* ─── Container ─── */\n\n .ddga-sidebar {\n display: flex;\n flex-direction: column;\n flex: none;\n inline-size: var(--ddga-sidebar-width);\n block-size: 100%;\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n border-inline-end: 1px solid var(--ddga-color-border);\n /* Shared easing + duration for the whole collapse so width, paddings and\n fades stay in lockstep (Material standard ease). */\n transition: inline-size 250ms cubic-bezier(0.4, 0, 0.2, 1);\n will-change: inline-size;\n overflow: hidden;\n }\n\n /* side=end → border on the opposite logical edge and order after the inset. */\n .ddga-sidebar[data-side='end'] {\n order: 1;\n border-inline-end: 0;\n border-inline-start: 1px solid var(--ddga-color-border);\n }\n\n /* Collapsed icon rail. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] {\n inline-size: var(--ddga-sidebar-width-icon);\n }\n\n /* Offcanvas collapse fully hides on desktop. */\n .ddga-sidebar[data-collapsible='offcanvas'][data-state='collapsed'] {\n inline-size: 0;\n border-inline: 0;\n }\n\n /* ─── Variants ─── */\n\n .ddga-sidebar[data-variant='floating'] {\n margin: var(--ddga-space-2);\n block-size: auto;\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-md);\n }\n\n .ddga-sidebar[data-variant='inset'] {\n border-inline-end: 0;\n background-color: transparent;\n }\n\n /* Mobile: the Drawer owns positioning; just set the panel width + layout. */\n .ddga-sidebar--mobile {\n inline-size: var(--ddga-sidebar-width);\n max-inline-size: 85vw;\n display: flex;\n flex-direction: column;\n }\n\n /* ─── Inset (main content region) ─── */\n\n .ddga-sidebar-inset {\n flex: 1 1 auto;\n min-inline-size: 0;\n display: flex;\n flex-direction: column;\n }\n\n /* When a sibling sidebar uses variant=inset, the main area floats as a card.\n Consumers put <Sidebar variant=\"inset\"> + <SidebarInset> as siblings; the\n inset card styling is opt-in via a modifier the consumer adds, OR scope by\n wrapper. Keep it simple: provide the card look on a data hook. */\n .ddga-sidebar-wrapper:has(.ddga-sidebar[data-variant='inset']) .ddga-sidebar-inset {\n margin: var(--ddga-space-2);\n background-color: var(--ddga-color-background);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-sm);\n overflow: hidden;\n }\n\n /* ─── Trigger / Rail ─── */\n\n .ddga-sidebar__trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 2rem;\n block-size: 2rem;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n }\n .ddga-sidebar__trigger:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__trigger:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-sidebar__trigger > svg {\n inline-size: 1.125rem;\n block-size: 1.125rem;\n }\n\n .ddga-sidebar__rail {\n position: absolute;\n inset-block: 0;\n inset-inline-end: 0;\n inline-size: 0.75rem;\n transform: translateX(50%);\n cursor: col-resize;\n border: 0;\n background: transparent;\n }\n [dir='rtl'] .ddga-sidebar__rail {\n transform: translateX(-50%);\n }\n\n /* ─── Header / Content / Footer / Separator ─── */\n\n .ddga-sidebar__header,\n .ddga-sidebar__footer {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n }\n\n .ddga-sidebar__content {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n padding: var(--ddga-space-2);\n transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .ddga-sidebar__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: var(--ddga-space-2);\n border: 0;\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Group ─── */\n\n .ddga-sidebar__group {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: var(--ddga-space-2);\n transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .ddga-sidebar__group-label {\n display: flex;\n align-items: center;\n block-size: 1.75rem;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n white-space: nowrap;\n overflow: hidden;\n transition:\n block-size 250ms cubic-bezier(0.4, 0, 0.2, 1),\n opacity 150ms ease;\n }\n /* Protect Arabic letter joining — no tracking, no uppercasing. */\n [dir='rtl'] .ddga-sidebar__group-label {\n letter-spacing: normal;\n text-transform: none;\n }\n\n .ddga-sidebar__group-action {\n position: absolute;\n inset-block-start: var(--ddga-space-2);\n inset-inline-end: var(--ddga-space-2);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n transition: opacity 150ms ease;\n }\n .ddga-sidebar__group-action:hover {\n background-color: var(--ddga-color-muted);\n }\n\n /* Collapsed rail — fade/collapse instead of display:none so nothing pops.\n Group label collapses its height (and fades); group action + badge fade.\n The sub-menu list is the only hard hide (it's replaced by the Popover\n flyout when collapsed, so animating it adds no value). */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-label {\n block-size: 0;\n margin-block: 0;\n padding-block: 0;\n opacity: 0;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-action,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-badge {\n opacity: 0;\n pointer-events: none;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-sub {\n display: none;\n }\n\n /* ─── Menu ─── */\n\n .ddga-sidebar__menu {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-sidebar__menu-item {\n position: relative;\n }\n\n .ddga-sidebar__menu-button {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n min-inline-size: 0;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-2);\n border: 0;\n border-radius: var(--ddga-radius-md);\n background: transparent;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n text-align: start;\n text-decoration: none;\n cursor: pointer;\n overflow: hidden;\n white-space: nowrap;\n /* background/color ease for hover + active feedback; padding-inline shares\n the collapse easing so the icon glides to centre in lockstep with width. */\n transition:\n background-color 120ms ease,\n color 120ms ease,\n padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n .ddga-sidebar__menu-button > svg {\n flex: none;\n inline-size: 1.125rem;\n block-size: 1.125rem;\n color: var(--ddga-text-secondary);\n transition: color 120ms ease;\n }\n /* Everything after the leading icon (label, trailing chevron, inline badge)\n fades on collapse rather than snapping out. */\n .ddga-sidebar__menu-button > *:not(:first-child) {\n transition: opacity 150ms ease;\n }\n .ddga-sidebar__menu-button:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-sidebar__menu-button:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n .ddga-sidebar__menu-button:active {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__menu-button[data-active='true'] {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-sidebar__menu-button[data-active='true'] > svg {\n color: var(--ddga-color-primary);\n }\n\n .ddga-sidebar__menu-button--sm {\n padding-block: var(--ddga-space-1);\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-sidebar__menu-button--lg {\n padding-block: var(--ddga-space-3);\n font-size: var(--ddga-font-size-base);\n }\n\n /* Collapsed rail: the icon stays at flex-start (NO justify-content switch —\n that would snap it to the centre of the still-wide box, then swoop inward).\n Instead the parent content/group padding animates to 0 and the button's own\n inline padding grows to exactly centre the 1.125rem icon in the rail. Net\n icon travel is a few px, fully in sync with the width, so no glitch. The\n label/chevron/badge fade via the base opacity transition above. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__content,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group {\n padding-inline: 0;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-button {\n padding-inline: calc((var(--ddga-sidebar-width-icon) - 1.125rem) / 2);\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed']\n .ddga-sidebar__menu-button\n > *:not(:first-child) {\n opacity: 0;\n }\n\n /* Collapsed rail: center header/footer content and clip overflow so a wide\n brand/label doesn't spill past the rail edge. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\n align-items: center;\n }\n\n /* ─── Menu action / badge / skeleton ─── */\n\n .ddga-sidebar__menu-action {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--ddga-space-1);\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n }\n .ddga-sidebar__menu-action:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-sidebar__menu-action:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-sidebar__menu-action[data-show-on-hover] {\n opacity: 0;\n }\n .ddga-sidebar__menu-item:hover .ddga-sidebar__menu-action[data-show-on-hover],\n .ddga-sidebar__menu-action[data-show-on-hover]:focus-visible {\n opacity: 1;\n }\n\n .ddga-sidebar__menu-badge {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--ddga-space-2);\n transform: translateY(-50%);\n pointer-events: none;\n min-inline-size: 1.25rem;\n block-size: 1.25rem;\n padding-inline: var(--ddga-space-1);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n }\n\n .ddga-sidebar__menu-skeleton {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n block-size: 2rem;\n padding-inline: var(--ddga-space-2);\n }\n .ddga-sidebar__menu-skeleton-text {\n flex: 1 1 auto;\n max-inline-size: 12rem;\n }\n\n /* ─── Sub-menu ─── */\n\n .ddga-sidebar__menu-sub {\n list-style: none;\n margin: 0;\n margin-inline-start: var(--ddga-space-3);\n padding-inline-start: var(--ddga-space-2);\n border-inline-start: 1px solid var(--ddga-color-border);\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-sidebar__menu-sub-button {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-sm);\n text-decoration: none;\n cursor: pointer;\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n .ddga-sidebar__menu-sub-button:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__menu-sub-button:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n .ddga-sidebar__menu-sub-button[data-active='true'] {\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-sidebar__menu-sub-button--sm {\n font-size: var(--ddga-font-size-xs);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-sidebar {\n border-color: CanvasText;\n }\n .ddga-sidebar__menu-button[data-active='true'],\n .ddga-sidebar__menu-button:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-sidebar__menu-sub-button[data-active='true'],\n .ddga-sidebar__menu-sub-button:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-sidebar__separator,\n .ddga-sidebar__menu-sub {\n background-color: CanvasText;\n border-color: CanvasText;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-sidebar,\n .ddga-sidebar__content,\n .ddga-sidebar__group,\n .ddga-sidebar__group-label,\n .ddga-sidebar__group-action,\n .ddga-sidebar__menu-button,\n .ddga-sidebar__menu-button > svg,\n .ddga-sidebar__menu-button > *,\n .ddga-sidebar__menu-badge,\n .ddga-sidebar__menu-sub-button {\n transition: none;\n }\n }\n}\n"],"names":[]}
|