@simai-studio/ui 5.20261022.1814 → 5.20261023.16

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.
@@ -119,10 +119,13 @@
119
119
  ],
120
120
  "cl-drawer": [
121
121
  "display/default",
122
+ "isolate/default",
122
123
  "justify-content/default",
123
124
  "margin/default",
124
125
  "place-items/default",
125
- "position/default"
126
+ "position/default",
127
+ "resize/default",
128
+ "visibility/default"
126
129
  ],
127
130
  "cl-dropdown": [
128
131
  "align-items/default",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schema_version": 2,
3
3
  "id": "smart.context-menu",
4
- "version": "1.3.0",
4
+ "version": "1.3.1",
5
5
  "title": "Context Menu",
6
6
  "summary": "The Framework's action menu: data entries with icon, caption, value, shortcut, check, submenu, separator and heading, opened by openFor() into the top layer, anchored, with keyboard, typeahead and focus return. A host may still render its own items and own the lifecycle.",
7
7
  "kind": "smart",
@@ -554,7 +554,7 @@
554
554
  },
555
555
  {
556
556
  "path": "src/component/context-menu/scss/_css__context_menu.scss",
557
- "sha256": "ceb4c7f5f9beea5b7369c6238403b43c86b9067fc234068fc1c2371df603c15e"
557
+ "sha256": "f22cbadd63c58fd94dc640c5ee2f319f0ba4ef3aca129666136458c93cb31d6e"
558
558
  },
559
559
  {
560
560
  "path": "src/component/context-menu/scss/_css__context_menu_custom.scss",
@@ -1 +1 @@
1
- @property --sf-drawer-stack-offset{syntax:"<length>";inherits:true;initial-value:0}@layer sf.components{.sf-drawer{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:var(--sf-z-index-9);z-index:var(--sf-drawer-z-index, var(--sf-z-index-9));pointer-events:none}.sf-drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;pointer-events:none;background:var(--sf-black);background:var(--sf-drawer-overlay-background, var(--sf-black));opacity:var(--sf-opacity-60);opacity:var(--sf-drawer-overlay-opacity, var(--sf-opacity-60));transition:opacity var(--sf-duration-normal) var(--sf-ease-exit)}.sf-drawer.is-open .sf-drawer-overlay{transition-timing-function:var(--sf-ease-enter)}.sf-drawer:not(.is-open) .sf-drawer-overlay{opacity:var(--sf-0)}.sf-drawer.is-open .sf-drawer-overlay{pointer-events:auto}.sf-drawer-overlay[hidden]{display:none !important}.sf-drawer-panel{--sf-drawer-stack-inset: calc(var(--sf-drawer-stack-depth, 0) * var(--sf-drawer-stack-offset));position:fixed;top:0;bottom:0;inset-block:0;display:flex;flex-direction:column;width:min(var(--sf-g2),100vi);width:min(var(--sf-drawer-width, var(--sf-g2)),100vi);max-width:100vi;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;overflow:hidden auto;scrollbar-gutter:stable both-edges;pointer-events:auto;border-radius:var(--sf-radius--surface);border-radius:var(--sf-drawer-radius, var(--sf-radius--surface));background:var(--sf-elevation-4--surface);background:var(--sf-drawer-background, var(--sf-elevation-4--surface));--sf-on-surface-variant: var(--sf-on-elevation-4--variant);--sf-badge--surface: var(--sf-drawer-background, var(--sf-elevation-4--surface));color:var(--sf-on-surface);color:var(--sf-drawer-color, var(--sf-on-surface));box-shadow:var(--sf-elevation-4--shadow);box-shadow:var(--sf-drawer-shadow, var(--sf-elevation-4--shadow));outline:0;transition:-webkit-transform var(--sf-duration-normal) var(--sf-ease-exit);transition:transform var(--sf-duration-normal) var(--sf-ease-exit);transition:transform var(--sf-duration-normal) var(--sf-ease-exit), -webkit-transform var(--sf-duration-normal) var(--sf-ease-exit)}.sf-drawer[data-sf-drawer-size="1/2"]{--sf-drawer-width: var(--sf-g0)}.sf-drawer[data-sf-drawer-size="2"]{--sf-drawer-width: var(--sf-g5)}.sf-drawer[data-sf-drawer-size=full]{--sf-drawer-width: 100vi;--sf-drawer-radius: var(--sf-0)}.sf-drawer[data-sf-drawer-placement=left] .sf-drawer-panel{left:var(--sf-drawer-stack-inset);border-right:var(--sf-px) solid var(--sf-outline-variant);border-top-left-radius:var(--sf-0);border-bottom-left-radius:var(--sf-0);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-drawer[data-sf-drawer-placement=right] .sf-drawer-panel{right:var(--sf-drawer-stack-inset);border-left:var(--sf-px) solid var(--sf-outline-variant);border-top-right-radius:var(--sf-0);border-bottom-right-radius:var(--sf-0);-webkit-transform:translateX(100%);transform:translateX(100%)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{left:var(--sf-drawer-stack-inset)}@supports not (inset-inline-start: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{left:var(--sf-drawer-stack-inset)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(ltr)){left:var(--sf-drawer-stack-inset)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{right:var(--sf-drawer-stack-inset)}@supports not (inset-inline-start: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{right:var(--sf-drawer-stack-inset)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(rtl)){right:var(--sf-drawer-stack-inset)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-right:var(--sf-px) solid var(--sf-outline-variant)}@supports not (border-inline-end: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-right:var(--sf-px) solid var(--sf-outline-variant)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(ltr)){border-right:var(--sf-px) solid var(--sf-outline-variant)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-left:var(--sf-px) solid var(--sf-outline-variant)}@supports not (border-inline-end: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-left:var(--sf-px) solid var(--sf-outline-variant)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(rtl)){border-left:var(--sf-px) solid var(--sf-outline-variant)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-top-left-radius:var(--sf-0)}@supports not (border-start-start-radius: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-top-left-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(ltr)){border-top-left-radius:var(--sf-0)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-top-right-radius:var(--sf-0)}@supports not (border-start-start-radius: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-top-right-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(rtl)){border-top-right-radius:var(--sf-0)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-bottom-left-radius:var(--sf-0)}@supports not (border-end-start-radius: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-bottom-left-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(ltr)){border-bottom-left-radius:var(--sf-0)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-bottom-right-radius:var(--sf-0)}@supports not (border-end-start-radius: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-bottom-right-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(rtl)){border-bottom-right-radius:var(--sf-0)}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{inset-inline-start:var(--sf-drawer-stack-inset);-webkit-border-end:var(--sf-px) solid var(--sf-outline-variant);border-inline-end:var(--sf-px) solid var(--sf-outline-variant);border-start-start-radius:var(--sf-0);border-end-start-radius:var(--sf-0);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-drawer:not(.is-open)[data-sf-drawer-placement=inline-start]:dir(rtl) .sf-drawer-panel{-webkit-transform:translateX(100%);transform:translateX(100%)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{right:var(--sf-drawer-stack-inset)}@supports not (inset-inline-end: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{right:var(--sf-drawer-stack-inset)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(ltr)){right:var(--sf-drawer-stack-inset)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{left:var(--sf-drawer-stack-inset)}@supports not (inset-inline-end: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{left:var(--sf-drawer-stack-inset)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(rtl)){left:var(--sf-drawer-stack-inset)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-left:var(--sf-px) solid var(--sf-outline-variant)}@supports not (border-inline-start: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-left:var(--sf-px) solid var(--sf-outline-variant)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(ltr)){border-left:var(--sf-px) solid var(--sf-outline-variant)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-right:var(--sf-px) solid var(--sf-outline-variant)}@supports not (border-inline-start: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-right:var(--sf-px) solid var(--sf-outline-variant)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(rtl)){border-right:var(--sf-px) solid var(--sf-outline-variant)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-top-right-radius:var(--sf-0)}@supports not (border-start-end-radius: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-top-right-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(ltr)){border-top-right-radius:var(--sf-0)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-top-left-radius:var(--sf-0)}@supports not (border-start-end-radius: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-top-left-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(rtl)){border-top-left-radius:var(--sf-0)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-bottom-right-radius:var(--sf-0)}@supports not (border-end-end-radius: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-bottom-right-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(ltr)){border-bottom-right-radius:var(--sf-0)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-bottom-left-radius:var(--sf-0)}@supports not (border-end-end-radius: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-bottom-left-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(rtl)){border-bottom-left-radius:var(--sf-0)}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{inset-inline-end:var(--sf-drawer-stack-inset);-webkit-border-start:var(--sf-px) solid var(--sf-outline-variant);border-inline-start:var(--sf-px) solid var(--sf-outline-variant);border-start-end-radius:var(--sf-0);border-end-end-radius:var(--sf-0);-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-drawer:not(.is-open)[data-sf-drawer-placement=inline-end]:dir(rtl) .sf-drawer-panel{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-drawer.is-open .sf-drawer-panel{transition-timing-function:var(--sf-ease-enter);-webkit-transform:translateX(var(--sf-0));transform:translateX(var(--sf-0))}.sf-drawer-head{position:sticky;top:0;inset-block-start:0;z-index:1;background:inherit;display:flex;align-items:center;justify-content:space-between;gap:var(--sf-space-1);min-height:var(--sf-ui-2--control-height);padding:var(--sf-space-1) var(--sf-space-1) var(--sf-space-1\/2);padding:var(--sf-space-1) var(--sf-drawer-gutter, var(--sf-space-1)) var(--sf-space-1\/2)}.sf-drawer-title{min-width:0;overflow:hidden;color:var(--sf-on-surface);font-size:var(--sf-heading-6--size);line-height:var(--sf-heading-6--height);font-weight:var(--sf-heading--weight);text-overflow:ellipsis;white-space:nowrap}.sf-drawer-body{min-width:0;flex:1 1 auto;min-height:0;min-block-size:0;display:flex;flex-direction:column;padding:var(--sf-space-1\/2) var(--sf-space-1) var(--sf-space-3);padding:var(--sf-space-1\/2) var(--sf-drawer-gutter, var(--sf-space-1)) var(--sf-space-3)}.sf-drawer-body>*{flex:0 0 auto}.sf-drawer-body>:only-child{flex:1 1 auto;min-height:0;min-block-size:0}.sf-drawer-panel[\:not-has\(.sf-drawer-head\)] .sf-drawer-body{padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width))}.sf-drawer-panel[\:not-has\(.sf-drawer-head\)] .sf-drawer-body{padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width))}.sf-drawer-panel[\:not-has\(.sf-drawer-head\)] .sf-drawer-body{padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width))}.sf-drawer-panel:not(:has(.sf-drawer-head)) .sf-drawer-body{padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width))}.sf-drawer-edge{--sf-drawer-edge-inset: calc( var(--sf-drawer-stack-depth, 0) * var(--sf-drawer-stack-offset) + min(var(--sf-drawer-width, var(--sf-g2)), 100vi) + var(--sf-space-1\/2) );position:absolute;top:var(--sf-space-1);inset-block-start:var(--sf-space-1);display:flex;flex-direction:column;gap:var(--sf-space-1);pointer-events:auto;z-index:1}.sf-drawer-edge:empty{display:none}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{left:var(--sf-space-1)}@supports not (inset-inline-start: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{left:var(--sf-space-1)}}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{right:auto}@supports not (inset-inline-end: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{right:auto}}.sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge:where(:dir(ltr)){left:var(--sf-space-1);right:auto}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{right:var(--sf-space-1)}@supports not (inset-inline-start: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{right:var(--sf-space-1)}}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{left:auto}@supports not (inset-inline-end: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{left:auto}}.sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge:where(:dir(rtl)){right:var(--sf-space-1);left:auto}.sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{inset-inline:var(--sf-space-1) auto;flex-direction:row}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge{right:var(--sf-drawer-edge-inset)}@supports not (inset-inline-end: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge{right:var(--sf-drawer-edge-inset)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge:where(:dir(ltr)){right:var(--sf-drawer-edge-inset)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge{left:var(--sf-drawer-edge-inset)}@supports not (inset-inline-end: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge{left:var(--sf-drawer-edge-inset)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge:where(:dir(rtl)){left:var(--sf-drawer-edge-inset)}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge{inset-inline-end:var(--sf-drawer-edge-inset)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge{left:var(--sf-drawer-edge-inset)}@supports not (inset-inline-start: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge{left:var(--sf-drawer-edge-inset)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge:where(:dir(ltr)){left:var(--sf-drawer-edge-inset)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge{right:var(--sf-drawer-edge-inset)}@supports not (inset-inline-start: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge{right:var(--sf-drawer-edge-inset)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge:where(:dir(rtl)){right:var(--sf-drawer-edge-inset)}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge{inset-inline-start:var(--sf-drawer-edge-inset)}.sf-drawer[data-sf-drawer-placement=right] .sf-drawer-edge{right:var(--sf-drawer-edge-inset)}.sf-drawer[data-sf-drawer-placement=left] .sf-drawer-edge{left:var(--sf-drawer-edge-inset)}.sf-drawer-close--outside{position:static}.sf-drawer[data-sf-drawer-docked=true] .sf-drawer-overlay{display:none}.sf-drawer[data-sf-drawer-docked=true] .sf-drawer-panel{top:0;inset-block-start:0;top:0;top:var(--sf-drawer-dock-block-start, 0);inset-block-start:var(--sf-drawer-dock-block-start, 0);height:auto;border-radius:var(--sf-0);box-shadow:none}[data-sf-overlay-container],[data-sf-drawer-container]{contain:layout}_:-ms-input-placeholder, html:not([dir="rtl"]) [data-sf-drawer-dock-host]{padding-left:var(--sf-0);padding-left:var(--sf-drawer-dock-inline-start, var(--sf-0))}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) [data-sf-drawer-dock-host]{padding-left:var(--sf-0);padding-left:var(--sf-drawer-dock-inline-start, var(--sf-0))}}[data-sf-drawer-dock-host]:where(:dir(ltr)){padding-left:var(--sf-0);padding-left:var(--sf-drawer-dock-inline-start, var(--sf-0))}_:-ms-input-placeholder, [dir="rtl"] [data-sf-drawer-dock-host]{padding-right:var(--sf-0);padding-right:var(--sf-drawer-dock-inline-start, var(--sf-0))}@supports not (padding-inline-start: initial){[dir="rtl"] [data-sf-drawer-dock-host]{padding-right:var(--sf-0);padding-right:var(--sf-drawer-dock-inline-start, var(--sf-0))}}[data-sf-drawer-dock-host]:where(:dir(rtl)){padding-right:var(--sf-0);padding-right:var(--sf-drawer-dock-inline-start, var(--sf-0))}_:-ms-input-placeholder, html:not([dir="rtl"]) [data-sf-drawer-dock-host]{padding-right:var(--sf-0);padding-right:var(--sf-drawer-dock-inline-end, var(--sf-0))}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) [data-sf-drawer-dock-host]{padding-right:var(--sf-0);padding-right:var(--sf-drawer-dock-inline-end, var(--sf-0))}}[data-sf-drawer-dock-host]:where(:dir(ltr)){padding-right:var(--sf-0);padding-right:var(--sf-drawer-dock-inline-end, var(--sf-0))}_:-ms-input-placeholder, [dir="rtl"] [data-sf-drawer-dock-host]{padding-left:var(--sf-0);padding-left:var(--sf-drawer-dock-inline-end, var(--sf-0))}@supports not (padding-inline-end: initial){[dir="rtl"] [data-sf-drawer-dock-host]{padding-left:var(--sf-0);padding-left:var(--sf-drawer-dock-inline-end, var(--sf-0))}}[data-sf-drawer-dock-host]:where(:dir(rtl)){padding-left:var(--sf-0);padding-left:var(--sf-drawer-dock-inline-end, var(--sf-0))}[data-sf-drawer-dock-host]{box-sizing:border-box;-webkit-padding-start:var(--sf-0);padding-inline-start:var(--sf-0);-webkit-padding-start:var(--sf-drawer-dock-inline-start, var(--sf-0));padding-inline-start:var(--sf-drawer-dock-inline-start, var(--sf-0));-webkit-padding-end:var(--sf-0);padding-inline-end:var(--sf-0);-webkit-padding-end:var(--sf-drawer-dock-inline-end, var(--sf-0));padding-inline-end:var(--sf-drawer-dock-inline-end, var(--sf-0));transition:padding var(--sf-duration-normal) var(--sf-animation)}@media(prefers-reduced-motion: reduce){.sf-drawer-overlay,.sf-drawer-panel,[data-sf-drawer-dock-host]{transition:none}}}
1
+ @property --sf-drawer-stack-offset{syntax:"<length>";inherits:true;initial-value:0}@layer sf.components{.sf-drawer{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;top:0;inset-block-start:0;top:0;top:var(--sf-drawer-block-start, 0);inset-block-start:var(--sf-drawer-block-start, 0);z-index:var(--sf-z-index-9);z-index:var(--sf-drawer-z-index, var(--sf-z-index-9));pointer-events:none}.sf-drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;pointer-events:none;background:var(--sf-black);background:var(--sf-drawer-overlay-background, var(--sf-black));opacity:var(--sf-opacity-60);opacity:var(--sf-drawer-overlay-opacity, var(--sf-opacity-60));transition:opacity var(--sf-duration-normal) var(--sf-ease-exit)}.sf-drawer.is-open .sf-drawer-overlay{transition-timing-function:var(--sf-ease-enter)}.sf-drawer:not(.is-open) .sf-drawer-overlay{opacity:var(--sf-0)}.sf-drawer.is-open .sf-drawer-overlay{pointer-events:auto}.sf-drawer-overlay[hidden]{display:none !important}.sf-drawer-panel{--sf-drawer-stack-inset: calc(var(--sf-drawer-stack-depth, 0) * var(--sf-drawer-stack-offset));position:fixed;top:0;bottom:0;inset-block:0 0;top:0;top:var(--sf-drawer-block-start, 0);bottom:0;inset-block:var(--sf-drawer-block-start, 0) 0;display:flex;flex-direction:column;width:min(var(--sf-g2),100vi);width:min(var(--sf-drawer-width, var(--sf-g2)),100vi);max-width:100vi;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;overflow:hidden auto;scrollbar-gutter:stable both-edges;pointer-events:auto;border-radius:var(--sf-radius--surface);border-radius:var(--sf-drawer-radius, var(--sf-radius--surface));background:var(--sf-elevation-4--surface);background:var(--sf-drawer-background, var(--sf-elevation-4--surface));--sf-on-surface-variant: var(--sf-on-elevation-4--variant);--sf-badge--surface: var(--sf-drawer-background, var(--sf-elevation-4--surface));color:var(--sf-on-surface);color:var(--sf-drawer-color, var(--sf-on-surface));box-shadow:var(--sf-elevation-4--shadow);box-shadow:var(--sf-drawer-shadow, var(--sf-elevation-4--shadow));outline:0;transition:-webkit-transform var(--sf-duration-normal) var(--sf-ease-exit);transition:transform var(--sf-duration-normal) var(--sf-ease-exit);transition:transform var(--sf-duration-normal) var(--sf-ease-exit), -webkit-transform var(--sf-duration-normal) var(--sf-ease-exit)}.sf-drawer[data-sf-drawer-size="1/2"]{--sf-drawer-width: var(--sf-g0)}.sf-drawer[data-sf-drawer-size="2"]{--sf-drawer-width: var(--sf-g5)}.sf-drawer[data-sf-drawer-size=full]{--sf-drawer-width: 100vi;--sf-drawer-radius: var(--sf-0)}.sf-drawer[data-sf-drawer-placement=left] .sf-drawer-panel{left:var(--sf-drawer-stack-inset);border-right:var(--sf-px) solid var(--sf-outline-variant);border-top-left-radius:var(--sf-0);border-bottom-left-radius:var(--sf-0);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-drawer[data-sf-drawer-placement=right] .sf-drawer-panel{right:var(--sf-drawer-stack-inset);border-left:var(--sf-px) solid var(--sf-outline-variant);border-top-right-radius:var(--sf-0);border-bottom-right-radius:var(--sf-0);-webkit-transform:translateX(100%);transform:translateX(100%)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{left:var(--sf-drawer-stack-inset)}@supports not (inset-inline-start: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{left:var(--sf-drawer-stack-inset)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(ltr)){left:var(--sf-drawer-stack-inset)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{right:var(--sf-drawer-stack-inset)}@supports not (inset-inline-start: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{right:var(--sf-drawer-stack-inset)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(rtl)){right:var(--sf-drawer-stack-inset)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-right:var(--sf-px) solid var(--sf-outline-variant)}@supports not (border-inline-end: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-right:var(--sf-px) solid var(--sf-outline-variant)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(ltr)){border-right:var(--sf-px) solid var(--sf-outline-variant)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-left:var(--sf-px) solid var(--sf-outline-variant)}@supports not (border-inline-end: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-left:var(--sf-px) solid var(--sf-outline-variant)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(rtl)){border-left:var(--sf-px) solid var(--sf-outline-variant)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-top-left-radius:var(--sf-0)}@supports not (border-start-start-radius: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-top-left-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(ltr)){border-top-left-radius:var(--sf-0)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-top-right-radius:var(--sf-0)}@supports not (border-start-start-radius: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-top-right-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(rtl)){border-top-right-radius:var(--sf-0)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-bottom-left-radius:var(--sf-0)}@supports not (border-end-start-radius: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-bottom-left-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(ltr)){border-bottom-left-radius:var(--sf-0)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-bottom-right-radius:var(--sf-0)}@supports not (border-end-start-radius: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{border-bottom-right-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel:where(:dir(rtl)){border-bottom-right-radius:var(--sf-0)}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-panel{inset-inline-start:var(--sf-drawer-stack-inset);-webkit-border-end:var(--sf-px) solid var(--sf-outline-variant);border-inline-end:var(--sf-px) solid var(--sf-outline-variant);border-start-start-radius:var(--sf-0);border-end-start-radius:var(--sf-0);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-drawer:not(.is-open)[data-sf-drawer-placement=inline-start]:dir(rtl) .sf-drawer-panel{-webkit-transform:translateX(100%);transform:translateX(100%)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{right:var(--sf-drawer-stack-inset)}@supports not (inset-inline-end: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{right:var(--sf-drawer-stack-inset)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(ltr)){right:var(--sf-drawer-stack-inset)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{left:var(--sf-drawer-stack-inset)}@supports not (inset-inline-end: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{left:var(--sf-drawer-stack-inset)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(rtl)){left:var(--sf-drawer-stack-inset)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-left:var(--sf-px) solid var(--sf-outline-variant)}@supports not (border-inline-start: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-left:var(--sf-px) solid var(--sf-outline-variant)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(ltr)){border-left:var(--sf-px) solid var(--sf-outline-variant)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-right:var(--sf-px) solid var(--sf-outline-variant)}@supports not (border-inline-start: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-right:var(--sf-px) solid var(--sf-outline-variant)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(rtl)){border-right:var(--sf-px) solid var(--sf-outline-variant)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-top-right-radius:var(--sf-0)}@supports not (border-start-end-radius: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-top-right-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(ltr)){border-top-right-radius:var(--sf-0)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-top-left-radius:var(--sf-0)}@supports not (border-start-end-radius: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-top-left-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(rtl)){border-top-left-radius:var(--sf-0)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-bottom-right-radius:var(--sf-0)}@supports not (border-end-end-radius: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-bottom-right-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(ltr)){border-bottom-right-radius:var(--sf-0)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-bottom-left-radius:var(--sf-0)}@supports not (border-end-end-radius: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{border-bottom-left-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel:where(:dir(rtl)){border-bottom-left-radius:var(--sf-0)}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-panel{inset-inline-end:var(--sf-drawer-stack-inset);-webkit-border-start:var(--sf-px) solid var(--sf-outline-variant);border-inline-start:var(--sf-px) solid var(--sf-outline-variant);border-start-end-radius:var(--sf-0);border-end-end-radius:var(--sf-0);-webkit-transform:translateX(100%);transform:translateX(100%)}.sf-drawer:not(.is-open)[data-sf-drawer-placement=inline-end]:dir(rtl) .sf-drawer-panel{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.sf-drawer.is-open .sf-drawer-panel{transition-timing-function:var(--sf-ease-enter);-webkit-transform:translateX(var(--sf-0));transform:translateX(var(--sf-0))}.sf-drawer-head{position:sticky;top:0;inset-block-start:0;z-index:1;background:inherit;display:flex;align-items:center;justify-content:space-between;gap:var(--sf-space-1);min-height:var(--sf-ui-2--control-height);padding:var(--sf-space-1) var(--sf-space-1) var(--sf-space-1\/2);padding:var(--sf-space-1) var(--sf-drawer-gutter, var(--sf-space-1)) var(--sf-space-1\/2)}.sf-drawer-title{min-width:0;overflow:hidden;color:var(--sf-on-surface);font-size:var(--sf-heading-6--size);line-height:var(--sf-heading-6--height);font-weight:var(--sf-heading--weight);text-overflow:ellipsis;white-space:nowrap}.sf-drawer-body{min-width:0;flex:1 1 auto;min-height:0;min-block-size:0;display:flex;flex-direction:column;padding:var(--sf-space-1\/2) var(--sf-space-1) var(--sf-space-3);padding:var(--sf-space-1\/2) var(--sf-drawer-gutter, var(--sf-space-1)) var(--sf-space-3)}.sf-drawer-body>*{flex:0 0 auto}.sf-drawer-body>:only-child{flex:1 1 auto;min-height:0;min-block-size:0}.sf-drawer-panel[\:not-has\(.sf-drawer-head\)] .sf-drawer-body{padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width))}.sf-drawer-panel[\:not-has\(.sf-drawer-head\)] .sf-drawer-body{padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width))}.sf-drawer-panel[\:not-has\(.sf-drawer-head\)] .sf-drawer-body{padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width))}.sf-drawer-panel:not(:has(.sf-drawer-head)) .sf-drawer-body{padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-top:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-space-1) + var(--sf-scroll-bg-width));padding-bottom:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width));padding-block:calc(var(--sf-drawer-gutter, var(--sf-space-1)) + var(--sf-scroll-bg-width))}.sf-drawer-edge{--sf-drawer-edge-inset: calc( var(--sf-drawer-stack-depth, 0) * var(--sf-drawer-stack-offset) + min(var(--sf-drawer-width, var(--sf-g2)), 100vi) + var(--sf-space-1\/2) );position:absolute;top:var(--sf-space-1);inset-block-start:var(--sf-space-1);display:flex;flex-direction:column;gap:var(--sf-space-1);pointer-events:auto;z-index:1}.sf-drawer-edge:empty{display:none}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{left:var(--sf-space-1)}@supports not (inset-inline-start: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{left:var(--sf-space-1)}}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{right:auto}@supports not (inset-inline-end: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{right:auto}}.sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge:where(:dir(ltr)){left:var(--sf-space-1);right:auto}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{right:var(--sf-space-1)}@supports not (inset-inline-start: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{right:var(--sf-space-1)}}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{left:auto}@supports not (inset-inline-end: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{left:auto}}.sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge:where(:dir(rtl)){right:var(--sf-space-1);left:auto}.sf-drawer[data-sf-drawer-size=full] .sf-drawer-edge{inset-inline:var(--sf-space-1) auto;flex-direction:row}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge{right:var(--sf-drawer-edge-inset)}@supports not (inset-inline-end: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge{right:var(--sf-drawer-edge-inset)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge:where(:dir(ltr)){right:var(--sf-drawer-edge-inset)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge{left:var(--sf-drawer-edge-inset)}@supports not (inset-inline-end: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge{left:var(--sf-drawer-edge-inset)}}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge:where(:dir(rtl)){left:var(--sf-drawer-edge-inset)}.sf-drawer[data-sf-drawer-placement=inline-end] .sf-drawer-edge{inset-inline-end:var(--sf-drawer-edge-inset)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge{left:var(--sf-drawer-edge-inset)}@supports not (inset-inline-start: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge{left:var(--sf-drawer-edge-inset)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge:where(:dir(ltr)){left:var(--sf-drawer-edge-inset)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge{right:var(--sf-drawer-edge-inset)}@supports not (inset-inline-start: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge{right:var(--sf-drawer-edge-inset)}}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge:where(:dir(rtl)){right:var(--sf-drawer-edge-inset)}.sf-drawer[data-sf-drawer-placement=inline-start] .sf-drawer-edge{inset-inline-start:var(--sf-drawer-edge-inset)}.sf-drawer[data-sf-drawer-placement=right] .sf-drawer-edge{right:var(--sf-drawer-edge-inset)}.sf-drawer[data-sf-drawer-placement=left] .sf-drawer-edge{left:var(--sf-drawer-edge-inset)}.sf-drawer-close--outside{position:static}.sf-drawer[data-sf-drawer-docked=true] .sf-drawer-overlay{display:none}.sf-drawer[data-sf-drawer-docked=true] .sf-drawer-panel{top:0;inset-block-start:0;top:0;top:var(--sf-drawer-dock-block-start, var(--sf-drawer-block-start, 0));inset-block-start:var(--sf-drawer-dock-block-start, var(--sf-drawer-block-start, 0));height:auto;border-radius:var(--sf-0);box-shadow:none}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-panel{border-bottom-left-radius:var(--sf-0)}@supports not (border-end-start-radius: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-panel{border-bottom-left-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-panel:where(:dir(ltr)){border-bottom-left-radius:var(--sf-0)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-panel{border-bottom-right-radius:var(--sf-0)}@supports not (border-end-start-radius: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-panel{border-bottom-right-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-panel:where(:dir(rtl)){border-bottom-right-radius:var(--sf-0)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-panel{border-bottom-right-radius:var(--sf-0)}@supports not (border-end-end-radius: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-panel{border-bottom-right-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-panel:where(:dir(ltr)){border-bottom-right-radius:var(--sf-0)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-panel{border-bottom-left-radius:var(--sf-0)}@supports not (border-end-end-radius: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-panel{border-bottom-left-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-panel:where(:dir(rtl)){border-bottom-left-radius:var(--sf-0)}.sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-panel{--sf-drawer-sheet-room: calc(100% - var(--sf-drawer-block-start, 0%));top:auto;bottom:0;inset-block:auto 0;left:0;right:0;inset-inline:0;width:100%;max-width:100%;max-height:calc(var(--sf-drawer-sheet-room) - var(--sf-space-3));max-block-size:calc(var(--sf-drawer-sheet-room) - var(--sf-space-3));border-top:var(--sf-px) solid var(--sf-outline-variant);-webkit-border-before:var(--sf-px) solid var(--sf-outline-variant);border-block-start:var(--sf-px) solid var(--sf-outline-variant);border-end-start-radius:var(--sf-0);border-end-end-radius:var(--sf-0);padding-bottom:env(safe-area-inset-bottom, 0);-webkit-padding-after:env(safe-area-inset-bottom, 0);padding-block-end:env(safe-area-inset-bottom, 0);-webkit-transform:translateY(100%);transform:translateY(100%)}.sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=half] .sf-drawer-panel{height:calc(var(--sf-drawer-sheet-room)/2);block-size:calc(var(--sf-drawer-sheet-room)/2)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=full] .sf-drawer-panel{border-top-left-radius:var(--sf-0)}@supports not (border-start-start-radius: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=full] .sf-drawer-panel{border-top-left-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=full] .sf-drawer-panel:where(:dir(ltr)){border-top-left-radius:var(--sf-0)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=full] .sf-drawer-panel{border-top-right-radius:var(--sf-0)}@supports not (border-start-start-radius: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=full] .sf-drawer-panel{border-top-right-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=full] .sf-drawer-panel:where(:dir(rtl)){border-top-right-radius:var(--sf-0)}_:-ms-input-placeholder, html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=full] .sf-drawer-panel{border-top-right-radius:var(--sf-0)}@supports not (border-start-end-radius: initial){html:not([dir="rtl"]) .sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=full] .sf-drawer-panel{border-top-right-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=full] .sf-drawer-panel:where(:dir(ltr)){border-top-right-radius:var(--sf-0)}_:-ms-input-placeholder, [dir="rtl"] .sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=full] .sf-drawer-panel{border-top-left-radius:var(--sf-0)}@supports not (border-start-end-radius: initial){[dir="rtl"] .sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=full] .sf-drawer-panel{border-top-left-radius:var(--sf-0)}}.sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=full] .sf-drawer-panel:where(:dir(rtl)){border-top-left-radius:var(--sf-0)}.sf-drawer[data-sf-drawer-placement=bottom][data-sf-drawer-snap=full] .sf-drawer-panel{height:var(--sf-drawer-sheet-room);block-size:var(--sf-drawer-sheet-room);max-height:var(--sf-drawer-sheet-room);max-block-size:var(--sf-drawer-sheet-room);border-start-start-radius:var(--sf-0);border-start-end-radius:var(--sf-0)}.sf-drawer.is-open[data-sf-drawer-placement=bottom] .sf-drawer-panel{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:translateY(var(--sf-drawer-sheet-drag, 0));transform:translateY(var(--sf-drawer-sheet-drag, 0))}.sf-drawer-panel.is-dragging{transition:none}.sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-edge{display:none}.sf-drawer-handle{position:sticky;top:0;inset-block-start:0;z-index:2;display:flex;flex:none;align-items:center;justify-content:center;width:100%;inline-size:100%;height:var(--sf-ui-1\/2--control-height);block-size:var(--sf-ui-1\/2--control-height);margin:0;padding:0;border:0;background:inherit;cursor:-webkit-grab;cursor:grab;touch-action:none}.sf-drawer-handle-bar{width:var(--sf-space-3);inline-size:var(--sf-space-3);height:var(--sf-space-1\/4);block-size:var(--sf-space-1\/4);border-radius:var(--sf-radius-rounded);background:var(--sf-outline)}.sf-drawer-handle.focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-drawer-handle:focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width)*-1)}.sf-drawer[data-sf-drawer-placement=bottom] .sf-drawer-head{top:var(--sf-ui-1\/2--control-height);inset-block-start:var(--sf-ui-1\/2--control-height);padding-top:0;-webkit-padding-before:0;padding-block-start:0}[data-sf-overlay-container],[data-sf-drawer-container]{contain:layout}_:-ms-input-placeholder, html:not([dir="rtl"]) [data-sf-drawer-dock-host]{padding-left:var(--sf-0);padding-left:var(--sf-drawer-dock-inline-start, var(--sf-0))}@supports not (padding-inline-start: initial){html:not([dir="rtl"]) [data-sf-drawer-dock-host]{padding-left:var(--sf-0);padding-left:var(--sf-drawer-dock-inline-start, var(--sf-0))}}[data-sf-drawer-dock-host]:where(:dir(ltr)){padding-left:var(--sf-0);padding-left:var(--sf-drawer-dock-inline-start, var(--sf-0))}_:-ms-input-placeholder, [dir="rtl"] [data-sf-drawer-dock-host]{padding-right:var(--sf-0);padding-right:var(--sf-drawer-dock-inline-start, var(--sf-0))}@supports not (padding-inline-start: initial){[dir="rtl"] [data-sf-drawer-dock-host]{padding-right:var(--sf-0);padding-right:var(--sf-drawer-dock-inline-start, var(--sf-0))}}[data-sf-drawer-dock-host]:where(:dir(rtl)){padding-right:var(--sf-0);padding-right:var(--sf-drawer-dock-inline-start, var(--sf-0))}_:-ms-input-placeholder, html:not([dir="rtl"]) [data-sf-drawer-dock-host]{padding-right:var(--sf-0);padding-right:var(--sf-drawer-dock-inline-end, var(--sf-0))}@supports not (padding-inline-end: initial){html:not([dir="rtl"]) [data-sf-drawer-dock-host]{padding-right:var(--sf-0);padding-right:var(--sf-drawer-dock-inline-end, var(--sf-0))}}[data-sf-drawer-dock-host]:where(:dir(ltr)){padding-right:var(--sf-0);padding-right:var(--sf-drawer-dock-inline-end, var(--sf-0))}_:-ms-input-placeholder, [dir="rtl"] [data-sf-drawer-dock-host]{padding-left:var(--sf-0);padding-left:var(--sf-drawer-dock-inline-end, var(--sf-0))}@supports not (padding-inline-end: initial){[dir="rtl"] [data-sf-drawer-dock-host]{padding-left:var(--sf-0);padding-left:var(--sf-drawer-dock-inline-end, var(--sf-0))}}[data-sf-drawer-dock-host]:where(:dir(rtl)){padding-left:var(--sf-0);padding-left:var(--sf-drawer-dock-inline-end, var(--sf-0))}[data-sf-drawer-dock-host]{box-sizing:border-box;-webkit-padding-start:var(--sf-0);padding-inline-start:var(--sf-0);-webkit-padding-start:var(--sf-drawer-dock-inline-start, var(--sf-0));padding-inline-start:var(--sf-drawer-dock-inline-start, var(--sf-0));-webkit-padding-end:var(--sf-0);padding-inline-end:var(--sf-0);-webkit-padding-end:var(--sf-drawer-dock-inline-end, var(--sf-0));padding-inline-end:var(--sf-drawer-dock-inline-end, var(--sf-0));transition:padding var(--sf-duration-normal) var(--sf-animation)}@media(prefers-reduced-motion: reduce){.sf-drawer-overlay,.sf-drawer-panel,[data-sf-drawer-dock-host]{transition:none}}}
@@ -1,6 +1,6 @@
1
- (()=>{"use strict";var e={"5f0529568b98"(e,t,s){s.a(e,async(e,t)=>{try{var r=s("ddf1cdb42ecc"),o=s("fbe0570fcc69"),a=s("0d662e4d7d63"),n=e([r,o,a]);[r,o,a]=n.then?(await n)():n;var i=s.n(o);const l={en:{closeLabel:"Close drawer"},ru:{closeLabel:"Закрыть панель"}},d="sf-drawer",c=["edge"],h=(e,t)=>1===e.nodeType&&e.getAttribute("slot")===t,u=e=>c.some(t=>h(e,t)),f="data-sf-drawer-portal",p="[data-sf-overlay-container], [data-sf-drawer-container]",b=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(","),m=[],g=48,w=`(min-width: ${g}rem)`;function y(...e){return e.flat().filter(Boolean).join(" ")}const v={globalBound:!1,lockState:null,add(e){this.remove(e,!1),m.push(e),this.sync(),this.syncPageLock()},remove(e,t=!0){const s=m.indexOf(e);s>=0&&m.splice(s,1),this.sync(),t&&this.syncPageLock()},bringToFront(e){m.includes(e)&&(this.remove(e,!1),m.push(e),this.sync())},isTop:e=>m.at(-1)===e,sync(){m.forEach((e,t)=>e.applyStackPosition(t)),this.syncDock()},syncDock(){const e=document.documentElement;if(!e)return;this.bindDockMedia();const t={start:0,end:0},s=this.reservesDock();for(const e of s?m:[]){if(!e.openState||!e.docked)continue;const s=e.getDrawerRoot()?.querySelector("[data-sf-drawer-panel]"),r=s?Math.round(s.getBoundingClientRect().width):0;t[e.dockSide]+=r}for(const s of["start","end"]){const r=`--sf-drawer-dock-inline-${s}`;t[s]>0?e.style.setProperty(r,`${t[s]}px`):e.style.removeProperty(r)}},bindDockMedia(){void 0===this.dockMedia&&(this.dockMedia="function"==typeof globalThis.matchMedia?globalThis.matchMedia(w):null,this.dockMedia?.addEventListener?.("change",()=>this.syncDock()));const e=document.querySelector("[data-sf-drawer-dock-host]");e!==this.dockHost&&(this.dockHostObserver?.disconnect(),this.dockHost=e,this.dockHostObserver=e&&"function"==typeof ResizeObserver?new ResizeObserver(()=>{const e=this.dockReserved;this.reservesDock()!==e&&this.syncDock()}):null,this.dockHostObserver?.observe(e,{box:"border-box"}))},reservesDock(){const e=this.dockHost;let t;if(e?.isConnected){const s=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;t=e.getBoundingClientRect().width>=g*s}else t=!this.dockMedia||this.dockMedia.matches;return this.dockReserved=t,t},syncPageLock(){const e=m.find(e=>e.openState&&e.modal&&!e.closest(p));e?this.lockPage(e.preserveScrollGap):this.unlockPage()},lockPage(e){const t=document.documentElement,s=document.body;if(!t||!s||this.lockState)return;const r=Math.max(0,window.innerWidth-t.clientWidth);this.lockState={htmlOverflow:t.style.overflow,bodyOverflow:s.style.overflow,bodyPaddingInlineEnd:s.style.paddingInlineEnd},t.style.overflow="hidden",s.style.overflow="hidden",e&&r>0&&(s.style.paddingInlineEnd=`${r}px`)},unlockPage(){if(!this.lockState)return;const e=document.documentElement,t=document.body;e.style.overflow=this.lockState.htmlOverflow,t.style.overflow=this.lockState.bodyOverflow,t.style.paddingInlineEnd=this.lockState.bodyPaddingInlineEnd,this.lockState=null},bindGlobalEvents(){this.globalBound||"undefined"==typeof document||(document.addEventListener("click",e=>{if(!(e.target instanceof Element))return;const t=e.target.closest("[data-drawer]"),s=e.target.closest("[data-sf-drawer-open]"),r=e.target.closest("[data-sf-drawer-toggle]"),o=e.target.closest("[data-sf-drawer-close]"),a=t?.getAttribute("data-drawer")||"",n=["open","toggle","close"].includes(a)?a:s?"open":r?"toggle":o?"close":"",i=t||s||r||o;if(!n||!i)return;const l=i.getAttribute("aria-controls")||i.getAttribute(`data-sf-drawer-${n}`)||i.closest("[data-sf-drawer-id]")?.getAttribute("data-sf-drawer-id");l&&customElements.whenDefined(d).then(()=>{document.getElementById(l)?.[n]?.()})}),this.globalBound=!0)}};class k extends(i()){static get props(){return{templateName:{attribute:"template",default:"default"},opened:{attribute:"open",type:Boolean,default:!1},placement:{default:"right",values:["left","right","inline-start","inline-end"]},overlay:{type:Boolean,default:!0},modal:{type:Boolean,default:!0},docked:{type:Boolean,default:!1},size:{default:"1",values:["1/2","1","2","full"],valueAliases:{"1/2":["small"],1:["medium"],2:["large"]}},closeOnEsc:{attribute:"close-on-esc",type:Boolean,default:!0},closeOnOverlay:{attribute:"close-on-overlay",type:Boolean,default:!0},preserveScrollGap:{attribute:"preserve-scroll-gap",type:Boolean,default:!0},showClose:{attribute:"show-close",type:Boolean,default:!0},closePlacement:{attribute:"close-placement",default:"inside",values:["inside","outside"]},title:{default:""},label:{default:""},closeLabel:{attribute:"close-label",default:""},width:{default:""},stackOffset:{attribute:"stack-offset",default:""},gutter:{default:""},zIndex:{attribute:"z-index",default:""},overlayClass:{attribute:"overlay-class",default:""},panelClass:{attribute:"panel-class",default:""},panelStyle:{attribute:"panel-style",default:""},headerClass:{attribute:"header-class",default:""},bodyClass:{attribute:"body-class",default:""},closeClass:{attribute:"close-class",default:""}}}static get defaultTrueAttributes(){return new Set(["overlay","modal","close-on-esc","close-on-overlay","preserve-scroll-gap","show-close"])}constructor(){super(),this.drawerId="",this._portalRoot=null,this._contentNodes=null,this._lastActive=null,this._syncingOpenAttribute=!1,this._hasEmittedReady=!1,this._stackIndex=-1,this._focusAfterRender=!1,this._emitAfterOpen=!1,this._dockObserver=null,this.onKeyDown=this.onKeyDown.bind(this),this.handleRootClick=this.handleRootClick.bind(this)}connectedCallback(){this._contentNodes||(this._contentNodes=Array.from(this.childNodes)),this.drawerId=this.resolveDrawerId(),super.connectedCallback(),v.bindGlobalEvents(),document.addEventListener("keydown",this.onKeyDown),this.openState&&(this._focusAfterRender=this.modal,v.add(this))}disconnectedCallback(){this._areaObserver?.disconnect(),this._areaObserver=null,document.removeEventListener("keydown",this.onKeyDown),this._dockObserver?.disconnect(),this._dockObserver=null,v.remove(this),this.clearPortal(),super.disconnectedCallback()}attributeChangedCallback(e,t,s){t!==s&&("open"!==e||this._syncingOpenAttribute||!this._isMounted?("modal"!==e&&"docked"!==e||!this.openState||v.syncPageLock(),"docked"!==e&&"placement"!==e&&"size"!==e&&"width"!==e||!this.openState||requestAnimationFrame(()=>{v.syncDock(),v.sync()}),super.attributeChangedCallback(e,t,s)):this.syncExternalOpenState(null!==s))}get openState(){return this.hasAttribute("open")}get placement(){return this.getEnumAttr("placement",["left","right","inline-start","inline-end"],"right")}get overlay(){return this.getBooleanAttr("overlay",!0)}get modal(){return!this.docked&&this.getBooleanAttr("modal",!0)}get docked(){return this.getBooleanAttr("docked",!1)}get gutter(){return this.getAttribute("gutter")||""}get stackOffset(){return this.getAttribute("stack-offset")||""}get stackEdge(){const e=this.placement;if(!e.startsWith("inline"))return e;return"inline-start"===e!==("rtl"===(this.closest("[dir]")?.getAttribute("dir")||document.documentElement.dir))?"left":"right"}get dockSide(){const e=this.placement;if("inline-start"===e)return"start";if("inline-end"===e)return"end";const t="rtl"===globalThis.getComputedStyle?.(document.documentElement).direction;return"left"===e?t?"end":"start":t?"start":"end"}get size(){return this.getProp("size")}get closeOnEsc(){return this.getBooleanAttr("close-on-esc",!0)}get closeOnOverlay(){return this.getBooleanAttr("close-on-overlay",!0)}get preserveScrollGap(){return this.getBooleanAttr("preserve-scroll-gap",!0)}get showClose(){return this.getBooleanAttr("show-close",!0)}get closePlacement(){return this.getEnumAttr("close-placement",["inside","outside"],"inside")}resolveDrawerId(){const e=this.id||this.getAttribute("drawer-id");if(e)return this.id||(this.id=e),e;const t=`sf-drawer-${Math.random().toString(36).slice(2,10)}`;return this.id=t,this.setAttribute("drawer-id",t),t}templateContext(){return this.createTemplateContext({closeLabel:this.getAttribute("close-label")||(0,a.pageText)(l,"closeLabel",this),drawerId:this.drawerId||this.resolveDrawerId(),open:this.openState,placement:this.placement,overlay:this.overlay,modal:this.modal,docked:this.docked,size:this.size,showClose:this.showClose,closePlacement:this.closePlacement,title:this.getAttribute("title")||"",label:this.getAttribute("label")||this.getAttribute("title")||"",closeLabel:this.getAttribute("close-label")||this.defaultCloseLabel,width:this.getAttribute("width")||"",stackOffset:this.stackOffset,gutter:this.gutter,zIndex:this.drawerZIndex,overlayClass:this.getAttribute("overlay-class")||"",panelClass:this.getAttribute("panel-class")||"",panelStyle:this.getAttribute("panel-style")||"",headerClass:this.getAttribute("header-class")||"",bodyClass:this.getAttribute("body-class")||"",closeClass:this.getAttribute("close-class")||""})}get drawerZIndex(){return this.getAttribute("z-index")||`calc(var(--sf-drawer-z-index, var(--sf-z-index-9)) + ${2*Math.max(0,this._stackIndex)})`}get defaultCloseLabel(){return(0,a.pageText)(l,"closeLabel",this)}async renderComponent(e=[]){const t=++this._renderToken,s=await this.resolveTemplateResult(e);this._isMounted&&t===this._renderToken&&((0,r.render)(s,this.resolvePortalRoot()),this.afterRender())}resolvePortalRoot(){if(this._portalRoot?.isConnected)return this._portalRoot;const e=this.closest(p)||document.body,t=`[${f}="${s=this.drawerId,globalThis.CSS?.escape?globalThis.CSS.escape(s):String(s).replace(/["\\]/g,"\\$&")}"]`;var s;return this._portalRoot=e.querySelector(t)||document.createElement("div"),this._portalRoot.setAttribute(f,this.drawerId),this._portalRoot.isConnected||e.append(this._portalRoot),this._portalRoot}watchForAreaChildren(){this._areaObserver||(this._areaObserver=new MutationObserver(()=>{const e=this.getDrawerRoot();e&&this.projectAreas(e)}),this._areaObserver.observe(this,{childList:!0}))}projectAreas(e){for(const[t,s]of[["edge","[data-sf-drawer-edge]"]]){const r=e.querySelector(s);if(!r)continue;const o=[...this._contentNodes.filter(e=>h(e,t)&&e.parentElement!==r),...[...this.children].filter(e=>h(e,t))];o.length&&r.append(...new Set(o))}}afterRender(){const e=this.getDrawerRoot();if(!e)return;this.projectAreas(e),this.watchForAreaChildren();const t=e.querySelector("[data-sf-drawer-body]");t&&"1"!==t.dataset.sfDrawerContentReady&&(t.replaceChildren(...this._contentNodes.filter(e=>!u(e))),t.dataset.sfDrawerContentReady="1"),e.removeEventListener("click",this.handleRootClick),e.addEventListener("click",this.handleRootClick),this.applyStackPosition(),this.observeDock(e);const s=this._hasEmittedReady?"drawer:update":"drawer:ready";this.dispatchEvent(new CustomEvent(s,{bubbles:!0,composed:!0,detail:{component:this,drawer:this,drawerId:this.drawerId,root:e}})),this._hasEmittedReady=!0,(this._focusAfterRender||this._emitAfterOpen)&&(this._focusAfterRender=!1,requestAnimationFrame(()=>{this.openState&&this.modal&&this.focusFirst(),this._emitAfterOpen&&this.emitDrawerEvent("drawer:after-open"),this._emitAfterOpen=!1}))}template(){const e=this.templateContext(),t=e.showClose?r.html`<button
1
+ (()=>{"use strict";var e={"5f0529568b98"(e,t,s){s.a(e,async(e,t)=>{try{var r=s("ddf1cdb42ecc"),o=s("fbe0570fcc69"),n=s("0d662e4d7d63"),a=e([r,o,n]);[r,o,n]=a.then?(await a)():a;var i=s.n(o);const l={en:{closeLabel:"Close drawer",handleLabel:"Resize the panel"},ru:{closeLabel:"Закрыть панель",handleLabel:"Изменить высоту панели"}},d="sf-drawer",c=["edge"],h=(e,t)=>1===e.nodeType&&e.getAttribute("slot")===t,u=e=>c.some(t=>h(e,t)),f="data-sf-drawer-portal",p="[data-sf-overlay-container], [data-sf-drawer-container]",b=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(","),m=[],w=48,g=`(min-width: ${w}rem)`,y=["left","right","inline-start","inline-end","bottom"],v=["auto","half","full"],k=.25,S=.5;function _(...e){return e.flat().filter(Boolean).join(" ")}const E={globalBound:!1,lockState:null,add(e){this.remove(e,!1),m.push(e),this.sync(),this.syncPageLock()},remove(e,t=!0){const s=m.indexOf(e);s>=0&&m.splice(s,1),this.sync(),t&&this.syncPageLock()},bringToFront(e){m.includes(e)&&(this.remove(e,!1),m.push(e),this.sync())},isTop:e=>m.at(-1)===e,sync(){m.forEach((e,t)=>e.applyStackPosition(t)),this.syncDock()},syncDock(){const e=document.documentElement;if(!e)return;this.bindDockMedia();const t={start:0,end:0},s=this.reservesDock();for(const e of s?m:[]){if(!e.openState||!e.docked)continue;const s=e.getDrawerRoot()?.querySelector("[data-sf-drawer-panel]"),r=s?Math.round(s.getBoundingClientRect().width):0;t[e.dockSide]+=r}for(const s of["start","end"]){const r=`--sf-drawer-dock-inline-${s}`;t[s]>0?e.style.setProperty(r,`${t[s]}px`):e.style.removeProperty(r)}},bindDockMedia(){void 0===this.dockMedia&&(this.dockMedia="function"==typeof globalThis.matchMedia?globalThis.matchMedia(g):null,this.dockMedia?.addEventListener?.("change",()=>this.syncDock()));const e=document.querySelector("[data-sf-drawer-dock-host]");e!==this.dockHost&&(this.dockHostObserver?.disconnect(),this.dockHost=e,this.dockHostObserver=e&&"function"==typeof ResizeObserver?new ResizeObserver(()=>{const e=this.dockReserved;this.reservesDock()!==e&&this.syncDock()}):null,this.dockHostObserver?.observe(e,{box:"border-box"}))},reservesDock(){const e=this.dockHost;let t;if(e?.isConnected){const s=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;t=e.getBoundingClientRect().width>=w*s}else t=!this.dockMedia||this.dockMedia.matches;return this.dockReserved=t,t},syncPageLock(){const e=m.find(e=>e.openState&&e.modal&&!e.closest(p));e?this.lockPage(e.preserveScrollGap):this.unlockPage()},lockPage(e){const t=document.documentElement,s=document.body;if(!t||!s||this.lockState)return;const r=Math.max(0,window.innerWidth-t.clientWidth);this.lockState={htmlOverflow:t.style.overflow,bodyOverflow:s.style.overflow,bodyPaddingInlineEnd:s.style.paddingInlineEnd},t.style.overflow="hidden",s.style.overflow="hidden",e&&r>0&&(s.style.paddingInlineEnd=`${r}px`)},unlockPage(){if(!this.lockState)return;const e=document.documentElement,t=document.body;e.style.overflow=this.lockState.htmlOverflow,t.style.overflow=this.lockState.bodyOverflow,t.style.paddingInlineEnd=this.lockState.bodyPaddingInlineEnd,this.lockState=null},bindGlobalEvents(){this.globalBound||"undefined"==typeof document||(document.addEventListener("click",e=>{if(!(e.target instanceof Element))return;const t=e.target.closest("[data-drawer]"),s=e.target.closest("[data-sf-drawer-open]"),r=e.target.closest("[data-sf-drawer-toggle]"),o=e.target.closest("[data-sf-drawer-close]"),n=t?.getAttribute("data-drawer")||"",a=["open","toggle","close"].includes(n)?n:s?"open":r?"toggle":o?"close":"",i=t||s||r||o;if(!a||!i)return;const l=i.getAttribute("aria-controls")||i.getAttribute(`data-sf-drawer-${a}`)||i.closest("[data-sf-drawer-id]")?.getAttribute("data-sf-drawer-id");l&&customElements.whenDefined(d).then(()=>{document.getElementById(l)?.[a]?.()})}),this.globalBound=!0)}};class A extends(i()){static get props(){return{templateName:{attribute:"template",default:"default"},opened:{attribute:"open",type:Boolean,default:!1},placement:{default:"right",values:y},snap:{default:"auto",values:v},controlled:{type:Boolean,default:!1},blockStart:{attribute:"block-start",default:""},overlay:{type:Boolean,default:!0},modal:{type:Boolean,default:!0},docked:{type:Boolean,default:!1},size:{default:"1",values:["1/2","1","2","full"],valueAliases:{"1/2":["small"],1:["medium"],2:["large"]}},closeOnEsc:{attribute:"close-on-esc",type:Boolean,default:!0},closeOnOverlay:{attribute:"close-on-overlay",type:Boolean,default:!0},preserveScrollGap:{attribute:"preserve-scroll-gap",type:Boolean,default:!0},showClose:{attribute:"show-close",type:Boolean,default:!0},closePlacement:{attribute:"close-placement",default:"inside",values:["inside","outside"]},title:{default:""},label:{default:""},closeLabel:{attribute:"close-label",default:""},width:{default:""},stackOffset:{attribute:"stack-offset",default:""},gutter:{default:""},zIndex:{attribute:"z-index",default:""},overlayClass:{attribute:"overlay-class",default:""},panelClass:{attribute:"panel-class",default:""},panelStyle:{attribute:"panel-style",default:""},headerClass:{attribute:"header-class",default:""},bodyClass:{attribute:"body-class",default:""},closeClass:{attribute:"close-class",default:""}}}static get defaultTrueAttributes(){return new Set(["overlay","modal","close-on-esc","close-on-overlay","preserve-scroll-gap","show-close"])}constructor(){super(),this.drawerId="",this._portalRoot=null,this._contentNodes=null,this._lastActive=null,this._syncingOpenAttribute=!1,this._hasEmittedReady=!1,this._stackIndex=-1,this._focusAfterRender=!1,this._emitAfterOpen=!1,this._dockObserver=null,this.onKeyDown=this.onKeyDown.bind(this),this.handleRootClick=this.handleRootClick.bind(this),this.onWindowResize=this.onWindowResize.bind(this),this.onSheetPointerDown=this.onSheetPointerDown.bind(this),this.onHandleKeyDown=this.onHandleKeyDown.bind(this),this._switchVisible=!1}connectedCallback(){this._contentNodes||(this._contentNodes=Array.from(this.childNodes)),this.drawerId=this.resolveDrawerId(),super.connectedCallback(),E.bindGlobalEvents(),document.addEventListener("keydown",this.onKeyDown),globalThis.addEventListener?.("resize",this.onWindowResize,{passive:!0}),this.openState&&(this._focusAfterRender=this.modal,E.add(this))}disconnectedCallback(){this._areaObserver?.disconnect(),this._areaObserver=null,document.removeEventListener("keydown",this.onKeyDown),globalThis.removeEventListener?.("resize",this.onWindowResize),this._dockObserver?.disconnect(),this._dockObserver=null,E.remove(this),this.clearPortal(),super.disconnectedCallback()}attributeChangedCallback(e,t,s){t!==s&&("open"!==e||this._syncingOpenAttribute||!this._isMounted?("modal"!==e&&"docked"!==e||!this.openState||E.syncPageLock(),"docked"!==e&&"placement"!==e&&"size"!==e&&"width"!==e||!this.openState||requestAnimationFrame(()=>{E.syncDock(),E.sync()}),super.attributeChangedCallback(e,t,s)):this.syncExternalOpenState(null!==s))}get openState(){return this.hasAttribute("open")}get placement(){return this.getEnumAttr("placement",y,"right")}get sheet(){return"bottom"===this.placement}get snap(){return this.getEnumAttr("snap",v,"auto")}get controlled(){return this.getBooleanAttr("controlled",!1)}hasVisibleSwitch(){const e=this.drawerId||this.id;if(!e||"undefined"==typeof document)return!1;const t=this.getDrawerRoot();return[...document.querySelectorAll("[aria-controls]")].some(s=>!!s.getAttribute("aria-controls").split(/\s+/u).includes(e)&&(!t?.contains(s)&&!this.contains(s)&&(0!==s.getClientRects().length&&"hidden"!==getComputedStyle(s).visibility)))}onWindowResize(){if(!this.controlled||!this._isMounted)return;this.hasVisibleSwitch()!==this._switchVisible&&this.requestComponentUpdate("controlled")}get overlay(){return this.getBooleanAttr("overlay",!0)}get modal(){return!this.docked&&this.getBooleanAttr("modal",!0)}get docked(){return this.getBooleanAttr("docked",!1)&&!this.sheet}get gutter(){return this.getAttribute("gutter")||""}get stackOffset(){return this.getAttribute("stack-offset")||""}get stackEdge(){const e=this.placement;if(!e.startsWith("inline"))return e;return"inline-start"===e!==("rtl"===(this.closest("[dir]")?.getAttribute("dir")||document.documentElement.dir))?"left":"right"}get dockSide(){const e=this.placement;if("inline-start"===e)return"start";if("inline-end"===e)return"end";const t="rtl"===globalThis.getComputedStyle?.(document.documentElement).direction;return"left"===e?t?"end":"start":t?"start":"end"}get size(){return this.getProp("size")}get closeOnEsc(){return this.getBooleanAttr("close-on-esc",!0)}get closeOnOverlay(){return this.getBooleanAttr("close-on-overlay",!0)}get preserveScrollGap(){return this.getBooleanAttr("preserve-scroll-gap",!0)}get showClose(){return this.getBooleanAttr("show-close",!0)}get closePlacement(){return this.getEnumAttr("close-placement",["inside","outside"],"inside")}resolveDrawerId(){const e=this.id||this.getAttribute("drawer-id");if(e)return this.id||(this.id=e),e;const t=`sf-drawer-${Math.random().toString(36).slice(2,10)}`;return this.id=t,this.setAttribute("drawer-id",t),t}templateContext(){return this._switchVisible=this.controlled&&this.hasVisibleSwitch(),this.createTemplateContext({drawerId:this.drawerId||this.resolveDrawerId(),open:this.openState,placement:this.placement,overlay:this.overlay,modal:this.modal,docked:this.docked,size:this.size,showClose:this.showClose&&!this._switchVisible,controlled:this.controlled,sheet:this.sheet,snap:this.snap,handleLabel:(0,n.pageText)(l,"handleLabel",this),blockStart:this.getAttribute("block-start")||"",closePlacement:this.closePlacement,title:this.getAttribute("title")||"",label:this.getAttribute("label")||this.getAttribute("title")||"",closeLabel:this.getAttribute("close-label")||this.defaultCloseLabel,width:this.getAttribute("width")||"",stackOffset:this.stackOffset,gutter:this.gutter,zIndex:this.drawerZIndex,overlayClass:this.getAttribute("overlay-class")||"",panelClass:this.getAttribute("panel-class")||"",panelStyle:this.getAttribute("panel-style")||"",headerClass:this.getAttribute("header-class")||"",bodyClass:this.getAttribute("body-class")||"",closeClass:this.getAttribute("close-class")||""})}get drawerZIndex(){return this.getAttribute("z-index")||`calc(var(--sf-drawer-z-index, var(--sf-z-index-9)) + ${2*Math.max(0,this._stackIndex)})`}get defaultCloseLabel(){return(0,n.pageText)(l,"closeLabel",this)}async renderComponent(e=[]){const t=++this._renderToken,s=await this.resolveTemplateResult(e);this._isMounted&&t===this._renderToken&&((0,r.render)(s,this.resolvePortalRoot()),this.afterRender())}resolvePortalRoot(){if(this._portalRoot?.isConnected)return this._portalRoot;const e=this.closest(p)||document.body,t=`[${f}="${s=this.drawerId,globalThis.CSS?.escape?globalThis.CSS.escape(s):String(s).replace(/["\\]/g,"\\$&")}"]`;var s;return this._portalRoot=e.querySelector(t)||document.createElement("div"),this._portalRoot.setAttribute(f,this.drawerId),this._portalRoot.isConnected||e.append(this._portalRoot),this._portalRoot}watchForAreaChildren(){this._areaObserver||(this._areaObserver=new MutationObserver(()=>{const e=this.getDrawerRoot();e&&this.projectAreas(e)}),this._areaObserver.observe(this,{childList:!0}))}projectAreas(e){for(const[t,s]of[["edge","[data-sf-drawer-edge]"]]){const r=e.querySelector(s);if(!r)continue;const o=[...this._contentNodes.filter(e=>h(e,t)&&e.parentElement!==r),...[...this.children].filter(e=>h(e,t))];o.length&&r.append(...new Set(o))}}afterRender(){const e=this.getDrawerRoot();if(!e)return;this.projectAreas(e),this.watchForAreaChildren();const t=e.querySelector("[data-sf-drawer-body]");t&&"1"!==t.dataset.sfDrawerContentReady&&(t.replaceChildren(...this._contentNodes.filter(e=>!u(e))),t.dataset.sfDrawerContentReady="1"),e.removeEventListener("click",this.handleRootClick),e.addEventListener("click",this.handleRootClick);const s=e.querySelector("[data-sf-drawer-handle]"),r=e.querySelector(".sf-drawer-head");for(const e of[s,r])e?.removeEventListener("pointerdown",this.onSheetPointerDown),e?.addEventListener("pointerdown",this.onSheetPointerDown);s?.removeEventListener("keydown",this.onHandleKeyDown),s?.addEventListener("keydown",this.onHandleKeyDown),this.applyStackPosition(),this.observeDock(e);const o=this._hasEmittedReady?"drawer:update":"drawer:ready";this.dispatchEvent(new CustomEvent(o,{bubbles:!0,composed:!0,detail:{component:this,drawer:this,drawerId:this.drawerId,root:e}})),this._hasEmittedReady=!0,(this._focusAfterRender||this._emitAfterOpen)&&(this._focusAfterRender=!1,requestAnimationFrame(()=>{this.openState&&this.modal&&this.focusFirst(),this._emitAfterOpen&&this.emitDrawerEvent("drawer:after-open"),this._emitAfterOpen=!1}))}template(){const e=this.templateContext(),t=e.showClose?r.html`<button
2
2
  type="button"
3
- class=${y("sf-icon-button sf-drawer-close sf-icon-button--close sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1/3 m-0","outside"===e.closePlacement&&"sf-drawer-close--outside",e.closeClass)}
3
+ class=${_("sf-icon-button sf-drawer-close sf-icon-button--close sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1/3 m-0","outside"===e.closePlacement&&"sf-drawer-close--outside",e.closeClass)}
4
4
  aria-label=${e.closeLabel}
5
5
  data-drawer="close"
6
6
  data-sf-drawer-close=${e.drawerId}
@@ -9,19 +9,20 @@
9
9
  <span class="sf-close-icon"></span>
10
10
  </span>
11
11
  </button>`:r.nothing;return r.html`<div
12
- class=${y("sf-drawer",e.open&&"is-open",e.rootClass)}
13
- style=${`z-index:${e.zIndex};${e.width?`--sf-drawer-width:${e.width};`:""}${e.stackOffset?`--sf-drawer-stack-offset:${e.stackOffset};`:""}${e.rootStyle||""}`}
12
+ class=${_("sf-drawer",e.open&&"is-open",e.rootClass)}
13
+ style=${`z-index:${e.zIndex};${e.width?`--sf-drawer-width:${e.width};`:""}${e.stackOffset?`--sf-drawer-stack-offset:${e.stackOffset};`:""}${e.blockStart?`--sf-drawer-block-start:${e.blockStart};`:""}${e.rootStyle||""}`}
14
14
  data-sf-drawer-root
15
15
  data-sf-drawer-id=${e.drawerId}
16
16
  data-sf-drawer-placement=${e.placement}
17
17
  data-sf-drawer-size=${e.size}
18
18
  data-sf-drawer-modal=${e.modal?"true":"false"}
19
19
  data-sf-drawer-docked=${e.docked?"true":"false"}
20
+ data-sf-drawer-snap=${e.sheet?e.snap:r.nothing}
20
21
  aria-hidden=${e.open?"false":"true"}
21
22
  >
22
- <div class=${y("sf-drawer-overlay",e.overlayClass)} data-sf-drawer-overlay ?hidden=${!e.modal||!e.overlay}></div>
23
+ <div class=${_("sf-drawer-overlay",e.overlayClass)} data-sf-drawer-overlay ?hidden=${!e.modal||!e.overlay}></div>
23
24
  <section
24
- class=${y("sf-drawer-panel",e.panelClass)}
25
+ class=${_("sf-drawer-panel",e.panelClass)}
25
26
  style=${`${e.width?`--sf-drawer-width:${e.width};`:""}${e.stackOffset?`--sf-drawer-stack-offset:${e.stackOffset};`:""}${e.gutter?`--sf-drawer-gutter:${e.gutter};`:""}${e.panelStyle||""}`}
26
27
  role=${e.docked?"region":"dialog"}
27
28
  aria-modal=${e.modal?"true":r.nothing}
@@ -31,14 +32,16 @@
31
32
  ?inert=${!e.open}
32
33
  data-sf-drawer-panel
33
34
  >
35
+ ${e.sheet?r.html`<button type="button" class="sf-drawer-handle" aria-label=${e.handleLabel}
36
+ data-sf-drawer-handle><span class="sf-drawer-handle-bar" aria-hidden="true"></span></button>`:r.nothing}
34
37
  ${e.title||e.showClose&&"inside"===e.closePlacement||e.headerClass?r.html`
35
- <header class=${y("sf-drawer-head",e.headerClass)}>
38
+ <header class=${_("sf-drawer-head",e.headerClass)}>
36
39
  ${e.title?r.html`<div class="sf-drawer-title" id=${`${e.drawerId}-title`}>${e.title}</div>`:r.nothing}
37
40
  ${"inside"===e.closePlacement?t:r.nothing}
38
41
  </header>`:r.nothing}
39
- <div class=${y("sf-drawer-body",e.bodyClass)} data-sf-drawer-body></div>
42
+ <div class=${_("sf-drawer-body",e.bodyClass)} data-sf-drawer-body></div>
40
43
  </section>
41
44
  <div class="sf-drawer-edge" data-sf-drawer-edge>
42
45
  ${"outside"===e.closePlacement?t:r.nothing}
43
46
  </div>
44
- </div>`}open(e={}){return this.openState?(v.bringToFront(this),this):!1===e.emit||this.emitDrawerEvent("drawer:before-open",!0)?(this._lastActive=document.activeElement,this.syncOpenAttribute(!0),v.add(this),this._focusAfterRender=this.modal,this._emitAfterOpen=!1!==e.emit,this.requestComponentUpdate("open"),this):this}close(e={}){return this.openState&&(!1===e.emit||this.emitDrawerEvent("drawer:before-close",!0))?(this.syncOpenAttribute(!1),v.remove(this),this.requestComponentUpdate("close"),this.restoreFocus(),!1!==e.emit&&this.emitDrawerEvent("drawer:after-close"),this):this}toggle(){return this.openState?this.close():this.open()}setState(e={}){if(e&&"object"==typeof e&&Object.prototype.hasOwnProperty.call(e,"open")){const{open:t,...s}=e;return t?this.open():this.close(),super.setState(s)}return super.setState(e)}getState(){return{...this.templateContext(),open:this.openState}}syncExternalOpenState(e){e?(this._lastActive=document.activeElement,this._focusAfterRender=this.modal,v.add(this)):(v.remove(this),this.restoreFocus()),this.requestComponentUpdate(e?"open":"close")}syncOpenAttribute(e){this._syncingOpenAttribute=!0,this.toggleAttribute("open",e),this._syncingOpenAttribute=!1}getDrawerRoot(){return this._portalRoot?.querySelector("[data-sf-drawer-root]")||null}observeDock(e){const t=e.querySelector("[data-sf-drawer-panel]");if(!this.docked||!t||"function"!=typeof ResizeObserver)return this._dockObserver?.disconnect(),this._dockObserver=null,void(this.docked&&v.syncDock());this._dockObserver||(this._dockObserver=new ResizeObserver(()=>v.syncDock())),this._dockObserver.disconnect(),this._dockObserver.observe(t),v.syncDock()}applyStackPosition(e=m.indexOf(this)){this._stackIndex=e;const t=this.getDrawerRoot();if(t){t.style.zIndex=this.drawerZIndex;const s=this.stackEdge,r=this.docked||e<0?0:m.slice(0,e).filter(e=>e.openState&&!e.docked&&e.stackEdge===s).length;t.style.setProperty("--sf-drawer-stack-depth",String(r))}return this}focusFirst(){const e=this.getDrawerRoot()?.querySelector("[data-sf-drawer-panel]"),t=e?.querySelector("[autofocus]");(t||e)?.focus?.()}restoreFocus(){const e=this._lastActive;e instanceof HTMLElement&&e.isConnected&&!e.matches(":disabled,[hidden],[inert]")&&e.focus()}handleRootClick(e){const t=this.getDrawerRoot();e.target===t?.querySelector("[data-sf-drawer-overlay]")&&this.closeOnOverlay?this.close():e.target instanceof Element&&e.target.closest("[data-sf-drawer-close]")&&(e.preventDefault(),this.close())}onKeyDown(e){if(e.defaultPrevented||!this.openState||!v.isTop(this))return;if("Escape"===e.key&&this.closeOnEsc&&!document.documentElement?.dataset?.sfPopoverOpen)return e.preventDefault(),e.stopImmediatePropagation(),void this.close();if(!this.modal)return;if("Tab"!==e.key)return;const t=this.getDrawerRoot()?.querySelector("[data-sf-drawer-panel]"),s=Array.from(t?.querySelectorAll(b)||[]).filter(e=>e.getClientRects().length>0);if(0===s.length)return e.preventDefault(),void t?.focus();const r=s[0],o=s.at(-1);t?.contains(document.activeElement)?e.shiftKey&&document.activeElement===r?(e.preventDefault(),o.focus()):e.shiftKey||document.activeElement!==o||(e.preventDefault(),r.focus()):(e.preventDefault(),(e.shiftKey?o:r).focus())}emitDrawerEvent(e,t=!1){return this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,cancelable:t,detail:{component:this,drawer:this,drawerId:this.drawerId,root:this.getDrawerRoot()}}))}ownDrawerHandler(e){return t=>{t.detail?.drawer===this&&e.call(this,t)}}onBeforeOpen(e,t){return"function"==typeof e&&this.addEventListener("drawer:before-open",this.ownDrawerHandler(e),t),this}onAfterOpen(e,t){return"function"==typeof e&&this.addEventListener("drawer:after-open",this.ownDrawerHandler(e),t),this}onBeforeClose(e,t){return"function"==typeof e&&this.addEventListener("drawer:before-close",this.ownDrawerHandler(e),t),this}onAfterClose(e,t){return"function"==typeof e&&this.addEventListener("drawer:after-close",this.ownDrawerHandler(e),t),this}clearPortal(){this._portalRoot&&((0,r.render)(r.nothing,this._portalRoot),this._portalRoot.remove(),this._portalRoot=null)}}k.define(d),t()}catch(S){t(S)}})},ddf1cdb42ecc(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("lit")),{once:!0}))},"0d662e4d7d63"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("page-language"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("page-language")),{once:!0}))},fbe0570fcc69(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const t={};function s(r){const o=t[r];if(void 0!==o)return o.exports;const a=t[r]={exports:{}};return e[r](a,a.exports,s),a.exports}(()=>{const e="function"==typeof Symbol,t=e?Symbol("webpack queues"):"__webpack_queues__",r=e?Symbol("webpack exports"):"__webpack_exports__",o=e?Symbol("webpack error"):"__webpack_error__",a=e=>{e?.d<1&&(e.d=1,e.forEach(e=>e.r--),e.forEach(e=>e.r--?e.r++:e()))};s.a=(e,s,n)=>{let i;n&&((i=[]).d=-1);const l=new Set,d=e.exports;let c,h,u;const f=new Promise((e,t)=>{u=t,h=e});f[r]=d,f[t]=e=>(i&&e(i),l.forEach(e),f.catch(e=>{})),e.exports=f;s(e=>{let s;c=(e=>e.map(e=>{if(null!==e&&"object"==typeof e){if(e[t])return e;if(e.then){const s=[];s.d=0,e.then(e=>{n[r]=e,a(s)},e=>{n[o]=e,a(s)});const n={};return n[t]=e=>e(s),n}}const s={};return s[t]=e=>{},s[r]=e,s}))(e);const n=()=>c.map(e=>{if(e[o])throw e[o];return e[r]}),d=new Promise(e=>{s=()=>e(n),s.r=0;const r=e=>e!==i&&!l.has(e)&&(l.add(e),e&&!e.d&&(s.r++,e.push(s)));c.map(e=>e[t](r))});return s.r?d:n()},e=>(e?u(f[o]=e):h(d),a(i))),i?.d<0&&(i.d=0)}})(),s.n=e=>{const t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},s.d=(e,t)=>{if(Array.isArray(t))for(var r=0;r<t.length;){var o=t[r++],a=t[r++];s.o(e,o)?0===a&&r++:0===a?Object.defineProperty(e,o,{enumerable:!0,value:t[r++]}):Object.defineProperty(e,o,{enumerable:!0,get:a})}else for(var o in t)s.o(t,o)&&!s.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);s("5f0529568b98")})();
47
+ </div>`}open(e={}){return this.openState?(E.bringToFront(this),this):!1===e.emit||this.emitDrawerEvent("drawer:before-open",!0)?(this._lastActive=document.activeElement,this.syncOpenAttribute(!0),E.add(this),this._focusAfterRender=this.modal,this._emitAfterOpen=!1!==e.emit,this.requestComponentUpdate("open"),this):this}close(e={}){return this.openState&&(!1===e.emit||this.emitDrawerEvent("drawer:before-close",!0))?(this.syncOpenAttribute(!1),E.remove(this),this.requestComponentUpdate("close"),this.restoreFocus(),!1!==e.emit&&this.emitDrawerEvent("drawer:after-close"),this):this}toggle(){return this.openState?this.close():this.open()}setState(e={}){if(e&&"object"==typeof e&&Object.prototype.hasOwnProperty.call(e,"open")){const{open:t,...s}=e;return t?this.open():this.close(),super.setState(s)}return super.setState(e)}getState(){return{...this.templateContext(),open:this.openState}}syncExternalOpenState(e){e?(this._lastActive=document.activeElement,this._focusAfterRender=this.modal,E.add(this)):(E.remove(this),this.restoreFocus()),this.requestComponentUpdate(e?"open":"close")}syncOpenAttribute(e){this._syncingOpenAttribute=!0,this.toggleAttribute("open",e),this._syncingOpenAttribute=!1}getDrawerRoot(){return this._portalRoot?.querySelector("[data-sf-drawer-root]")||null}observeDock(e){const t=e.querySelector("[data-sf-drawer-panel]");if(!this.docked||!t||"function"!=typeof ResizeObserver)return this._dockObserver?.disconnect(),this._dockObserver=null,void(this.docked&&E.syncDock());this._dockObserver||(this._dockObserver=new ResizeObserver(()=>E.syncDock())),this._dockObserver.disconnect(),this._dockObserver.observe(t),E.syncDock()}applyStackPosition(e=m.indexOf(this)){this._stackIndex=e;const t=this.getDrawerRoot();if(t){t.style.zIndex=this.drawerZIndex;const s=this.stackEdge,r=this.docked||e<0?0:m.slice(0,e).filter(e=>e.openState&&!e.docked&&e.stackEdge===s).length;t.style.setProperty("--sf-drawer-stack-depth",String(r))}return this}focusFirst(){const e=this.getDrawerRoot()?.querySelector("[data-sf-drawer-panel]"),t=e?.querySelector("[autofocus]");(t||e)?.focus?.()}restoreFocus(){const e=this._lastActive;e instanceof HTMLElement&&e.isConnected&&!e.matches(":disabled,[hidden],[inert]")&&e.focus()}setSnap(e){return v.includes(e)&&e!==this.snap?(this.setAttribute("snap",e),this.emitDrawerEvent("drawer:snap"),this):this}onHandleKeyDown(e){const t=v.indexOf(this.snap),s={ArrowUp:1,ArrowDown:-1}[e.key];void 0!==s&&(e.preventDefault(),this.setSnap(v[Math.min(v.length-1,Math.max(0,t+s))]))}onSheetPointerDown(e){if(!this.sheet||!this.openState||0!==e.button)return;const t=e.currentTarget;if(t.classList.contains("sf-drawer-head")&&e.target.closest("button, a[href], input, select, textarea, [tabindex]"))return;const s=this.getDrawerRoot()?.querySelector("[data-sf-drawer-panel]");if(!s)return;const r=e.clientY,o=e.timeStamp,n=s.getBoundingClientRect().height||1;let a=!1,i=0;t.setPointerCapture?.(e.pointerId);const l=e=>{i=e.clientY-r,!a&&Math.abs(i)<4||(a=!0,s.classList.add("is-dragging"),s.style.setProperty("--sf-drawer-sheet-drag",`${Math.max(0,i)}px`))},d=e=>{if(t.removeEventListener("pointermove",l),t.removeEventListener("pointerup",d),t.removeEventListener("pointercancel",d),s.classList.remove("is-dragging"),s.style.removeProperty("--sf-drawer-sheet-drag"),!a||"pointercancel"===e.type)return;t.addEventListener("click",e=>e.stopImmediatePropagation(),{capture:!0,once:!0});const r=i/Math.max(1,e.timeStamp-o);i>n*k||r>S?"full"===this.snap?this.setSnap("half"):this.close():(-i>n*k||r<-S)&&this.setSnap("full")};t.addEventListener("pointermove",l),t.addEventListener("pointerup",d),t.addEventListener("pointercancel",d)}handleRootClick(e){const t=this.getDrawerRoot();e.target instanceof Element&&e.target.closest("[data-sf-drawer-handle]")?this.setSnap("full"===this.snap?"half":"full"):e.target===t?.querySelector("[data-sf-drawer-overlay]")&&this.closeOnOverlay?this.close():e.target instanceof Element&&e.target.closest("[data-sf-drawer-close]")&&(e.preventDefault(),this.close())}onKeyDown(e){if(e.defaultPrevented||!this.openState||!E.isTop(this))return;if("Escape"===e.key&&this.closeOnEsc&&!document.documentElement?.dataset?.sfPopoverOpen)return e.preventDefault(),e.stopImmediatePropagation(),void this.close();if(!this.modal)return;if("Tab"!==e.key)return;const t=this.getDrawerRoot()?.querySelector("[data-sf-drawer-panel]"),s=Array.from(t?.querySelectorAll(b)||[]).filter(e=>e.getClientRects().length>0);if(0===s.length)return e.preventDefault(),void t?.focus();const r=s[0],o=s.at(-1);t?.contains(document.activeElement)?e.shiftKey&&document.activeElement===r?(e.preventDefault(),o.focus()):e.shiftKey||document.activeElement!==o||(e.preventDefault(),r.focus()):(e.preventDefault(),(e.shiftKey?o:r).focus())}emitDrawerEvent(e,t=!1){return this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,cancelable:t,detail:{component:this,drawer:this,drawerId:this.drawerId,root:this.getDrawerRoot()}}))}ownDrawerHandler(e){return t=>{t.detail?.drawer===this&&e.call(this,t)}}onBeforeOpen(e,t){return"function"==typeof e&&this.addEventListener("drawer:before-open",this.ownDrawerHandler(e),t),this}onAfterOpen(e,t){return"function"==typeof e&&this.addEventListener("drawer:after-open",this.ownDrawerHandler(e),t),this}onBeforeClose(e,t){return"function"==typeof e&&this.addEventListener("drawer:before-close",this.ownDrawerHandler(e),t),this}onAfterClose(e,t){return"function"==typeof e&&this.addEventListener("drawer:after-close",this.ownDrawerHandler(e),t),this}clearPortal(){this._portalRoot&&((0,r.render)(r.nothing,this._portalRoot),this._portalRoot.remove(),this._portalRoot=null)}}A.define(d),t()}catch(C){t(C)}})},ddf1cdb42ecc(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("lit"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("lit")),{once:!0}))},"0d662e4d7d63"(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("page-language"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("page-language")),{once:!0}))},fbe0570fcc69(e){e.exports=globalThis.SF&&globalThis.SF.runtimeModule?globalThis.SF.runtimeModule("smart-base"):new Promise(e=>globalThis.addEventListener("sf-runtime-ready",()=>e(globalThis.SF.runtimeModule("smart-base")),{once:!0}))}};const t={};function s(r){const o=t[r];if(void 0!==o)return o.exports;const n=t[r]={exports:{}};return e[r](n,n.exports,s),n.exports}(()=>{const e="function"==typeof Symbol,t=e?Symbol("webpack queues"):"__webpack_queues__",r=e?Symbol("webpack exports"):"__webpack_exports__",o=e?Symbol("webpack error"):"__webpack_error__",n=e=>{e?.d<1&&(e.d=1,e.forEach(e=>e.r--),e.forEach(e=>e.r--?e.r++:e()))};s.a=(e,s,a)=>{let i;a&&((i=[]).d=-1);const l=new Set,d=e.exports;let c,h,u;const f=new Promise((e,t)=>{u=t,h=e});f[r]=d,f[t]=e=>(i&&e(i),l.forEach(e),f.catch(e=>{})),e.exports=f;s(e=>{let s;c=(e=>e.map(e=>{if(null!==e&&"object"==typeof e){if(e[t])return e;if(e.then){const s=[];s.d=0,e.then(e=>{a[r]=e,n(s)},e=>{a[o]=e,n(s)});const a={};return a[t]=e=>e(s),a}}const s={};return s[t]=e=>{},s[r]=e,s}))(e);const a=()=>c.map(e=>{if(e[o])throw e[o];return e[r]}),d=new Promise(e=>{s=()=>e(a),s.r=0;const r=e=>e!==i&&!l.has(e)&&(l.add(e),e&&!e.d&&(s.r++,e.push(s)));c.map(e=>e[t](r))});return s.r?d:a()},e=>(e?u(f[o]=e):h(d),n(i))),i?.d<0&&(i.d=0)}})(),s.n=e=>{const t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},s.d=(e,t)=>{if(Array.isArray(t))for(var r=0;r<t.length;){var o=t[r++],n=t[r++];s.o(e,o)?0===n&&r++:0===n?Object.defineProperty(e,o,{enumerable:!0,value:t[r++]}):Object.defineProperty(e,o,{enumerable:!0,get:n})}else for(var o in t)s.o(t,o)&&!s.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);s("5f0529568b98")})();
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schema_version": 2,
3
3
  "id": "smart.drawer",
4
- "version": "1.3.0",
4
+ "version": "1.4.0",
5
5
  "title": "Drawer",
6
6
  "summary": "Workspace side panel that keeps the page usable: docked column or modeless panel. Modal side panels belong to sf-modal; the modal Drawer mode is deprecated.",
7
7
  "kind": "smart",
@@ -45,9 +45,20 @@
45
45
  "left",
46
46
  "right",
47
47
  "inline-start",
48
- "inline-end"
48
+ "inline-end",
49
+ "bottom"
49
50
  ]
50
51
  },
52
+ "snap": {
53
+ "type": "string",
54
+ "default": "auto",
55
+ "enum": [
56
+ "auto",
57
+ "half",
58
+ "full"
59
+ ],
60
+ "description": "A bottom sheet's resting height: its content's, half the room under the app bar, or all of it."
61
+ },
51
62
  "overlay": {
52
63
  "type": "boolean",
53
64
  "default": true
@@ -86,6 +97,11 @@
86
97
  "type": "boolean",
87
98
  "default": true
88
99
  },
100
+ "controlled": {
101
+ "type": "boolean",
102
+ "default": false,
103
+ "description": "An outside switch (an element naming the drawer in aria-controls) opens and closes the panel: no close button while that switch is on screen."
104
+ },
89
105
  "close-placement": {
90
106
  "type": "string",
91
107
  "default": "inside",
@@ -116,6 +132,11 @@
116
132
  "default": "",
117
133
  "description": "How much of each drawer below shows past the one above it at the same edge, as a length (for example var(--sf-space-4)). A drawer stands depth × offset in from its edge, where depth counts the open, undocked drawers below it at that edge. Empty: drawers lie flush."
118
134
  },
135
+ "block-start": {
136
+ "type": "string",
137
+ "default": "",
138
+ "description": "Where this panel starts from the top (an app bar's height); the --sf-drawer-block-start variable sets it for every panel."
139
+ },
119
140
  "gutter": {
120
141
  "type": "string",
121
142
  "default": "",
@@ -329,6 +350,20 @@
329
350
  "type": "object",
330
351
  "description": "The element, for chaining."
331
352
  }
353
+ },
354
+ "setSnap": {
355
+ "summary": "Sets a bottom sheet's resting height (auto, half or full) and dispatches drawer:snap when it changes. Returns the element.",
356
+ "arguments": [
357
+ {
358
+ "name": "snap",
359
+ "type": "string",
360
+ "required": true
361
+ }
362
+ ],
363
+ "returns": {
364
+ "type": "object",
365
+ "description": "The element, for chaining."
366
+ }
332
367
  }
333
368
  },
334
369
  "events": {
@@ -451,6 +486,20 @@
451
486
  }
452
487
  }
453
488
  }
489
+ },
490
+ "drawer:snap": {
491
+ "summary": "A bottom sheet came to rest at another height (handle, swipe or setSnap()).",
492
+ "payload": {
493
+ "type": "object",
494
+ "properties": {
495
+ "drawer": {
496
+ "type": "object"
497
+ },
498
+ "drawerId": {
499
+ "type": "string"
500
+ }
501
+ }
502
+ }
454
503
  }
455
504
  },
456
505
  "state": {
@@ -598,11 +647,11 @@
598
647
  "source_artifacts": [
599
648
  {
600
649
  "path": "src/smart/drawer/index.js",
601
- "sha256": "44a49488adfd4e6a1ea72e1ebb5b51ec5e266945f160a2bdf9034f73ca872af3"
650
+ "sha256": "fc02ff97358a8e507e25134aa43cda59d84feea004351eb5649fdf1c95be2a26"
602
651
  },
603
652
  {
604
653
  "path": "src/smart/drawer/scss/_smart__drawer.scss",
605
- "sha256": "9b40a069b6d1f65f130c808bbe98036bdb5734631a00bcf0ac3bac8bae3ec121"
654
+ "sha256": "7f2e32768fcc089052a33dda962c5ce7c08b60cdf8f10aa0da047bb388716f7f"
606
655
  },
607
656
  {
608
657
  "path": "src/smart/drawer/rule.js",
@@ -610,7 +659,7 @@
610
659
  },
611
660
  {
612
661
  "path": "src/smart/drawer/docs.md",
613
- "sha256": "7a8e2129484db8ce541364d6e98806560e556f572b71f781bbcf06e75b39d90a"
662
+ "sha256": "dcb5d67bb12a183bb19a01a1a2db00365524271d942e65a13ceb615f61f15767"
614
663
  }
615
664
  ],
616
665
  "generated_runtime": [