@simai-studio/ui 0.0.0-stage → 5.20261019.1710

package/distr/smart/datepicker/template/default.js

@@ -0,0 +1,168 @@
+import {html, nothing} from 'lit';
+import {ref} from 'lit/directives/ref.js';
+
+function joinClasses(...tokens) {
+    return tokens.flat().filter(Boolean).join(' ');
+}
+
+function renderYearTop(context) {
+    return html`
+        <div class="sf-datepicker-top flex content-main-between items-cross-center">
+            <sf-icon-button appearance="link" scheme="on-surface" size="1"
+                icon=${context.previousIcon} aria-label=${context.labels.previousYears}
+                @click=${() => context.component.shiftYearPage(-1)}></sf-icon-button>
+            <div class="sf-datepicker-range-title" aria-live="polite">
+                ${context.yearPageStart}–${context.yearPageEnd}
+            </div>
+            <sf-icon-button appearance="link" scheme="on-surface" size="1"
+                icon=${context.nextIcon} aria-label=${context.labels.nextYears}
+                @click=${() => context.component.shiftYearPage(1)}></sf-icon-button>
+        </div>`;
+}
+
+function renderTop(context) {
+    if (context.context === 'year') return renderYearTop(context);
+
+    return html`
+        <div class="sf-datepicker-top grid items-cross-center">
+            <sf-icon-button appearance="link" scheme="on-surface" size="1"
+                icon=${context.previousIcon} aria-label=${context.labels.previousMonth}
+                @click=${() => context.component.shiftMonth(-1)}></sf-icon-button>
+            <div class="sf-datepicker-period flex content-main-center items-cross-center gap-1/4">
+                <sf-button class="sf-datepicker-month-toggle" appearance="link" scheme="on-surface" spacing="compact"
+                    text=${context.monthLabel}
+                    aria-expanded=${context.context === 'month' ? 'true' : 'false'}
+                    @click=${() => context.component.toggleContext('month')}></sf-button>
+                <sf-button class="sf-datepicker-year-toggle" appearance="link" scheme="on-surface" spacing="compact"
+                    text=${String(context.year)}
+                    aria-expanded="false"
+                    @click=${() => context.component.toggleContext('year')}></sf-button>
+            </div>
+            <sf-icon-button appearance="link" scheme="on-surface" size="1"
+                icon=${context.nextIcon} aria-label=${context.labels.nextMonth}
+                @click=${() => context.component.shiftMonth(1)}></sf-icon-button>
+        </div>`;
+}
+
+function renderMonthContext(context) {
+    return html`
+        <div class="sf-datepicker-context absolute top-0 bottom-0 inline-start-0 inline-end-0 grid grid-col-3 content-cross-start items-cross-start overflow-auto gap-1/4"
+             aria-label=${context.labels.chooseMonth}>
+            ${context.months.map((month) => html`
+                <button class=${joinClasses('sf-datepicker-text flex content-main-center items-cross-center', month.selected ? 'active' : '', month.disabled ? 'disabled' : '')}
+                    ?disabled=${month.disabled} aria-pressed=${month.selected ? 'true' : 'false'}
+                    type="button" @click=${() => context.component.selectMonth(month)}>
+                    <span class="sf-datepicker-text-date">${month.label}</span>
+                </button>`)}
+        </div>`;
+}
+
+function renderYearContext(context) {
+    return html`
+        <div class="sf-datepicker-context absolute top-0 bottom-0 inline-start-0 inline-end-0 grid grid-col-3 content-cross-start items-cross-start overflow-auto gap-1/4"
+             aria-label=${context.labels.chooseYear}>
+            ${context.years.map((year) => html`
+                <button class=${joinClasses('sf-datepicker-text flex content-main-center items-cross-center', year.selected ? 'active' : '', year.disabled ? 'disabled' : '')}
+                    type="button" ?disabled=${year.disabled} aria-pressed=${year.selected ? 'true' : 'false'}
+                    @click=${() => context.component.selectYear(year)}>
+                    <span class="sf-datepicker-text-date">${year.year}</span>
+                </button>`)}
+        </div>`;
+}
+
+function renderContext(context) {
+    if (context.context === 'month') return renderMonthContext(context);
+    if (context.context === 'year') return renderYearContext(context);
+    return nothing;
+}
+
+function renderDatepickerInput(context) {
+    return html`
+        <sf-input class="sf-datepicker-input" ${ref(context.component.refs.input)}
+            appearance=${context.inputType} size=${context.inputSize}
+            label=${context.label || nothing} name=${context.inputName || nothing}
+            placeholder=${context.placeholder || nothing} icon-start=${context.iconStart || nothing}
+            root-class=${context.inputRootClass || nothing} value=${context.displayValue || ''}
+            ?disabled=${context.disabled} ?required=${context.required} ?mask=${context.mask}
+            mask-pattern=${context.maskPattern || nothing} mask-lazy=${String(context.maskLazy)}
+            mask-placeholder-char=${context.maskPlaceholderChar || nothing}
+            mask-options=${context.maskOptions || nothing} readonly
+            @click=${(event) => context.component.handleInputClick(event)}
+            @keydown=${(event) => context.component.handleInputKeydown(event)}></sf-input>`;
+}
+
+function renderDay(day, context) {
+    const classes = joinClasses('sf-datepicker-day', day.weekend ? 'sf-datepicker-day-off' : '',
+        day.selected ? 'active' : '', day.rangeStart ? 'sf-datepicker-day-start' : '',
+        day.rangeSelected ? 'sf-datepicker-day-selected' : '', day.rangeEnd ? 'sf-datepicker-day-end' : '',
+        day.currentMonth ? '' : 'sf-datepicker-another-month', day.disabled ? 'disabled' : '');
+
+    return html`
+        <button class=${classes} type="button" ?disabled=${day.disabled}
+            data-date=${day.value} aria-label=${day.label}
+            aria-current=${day.today ? 'date' : nothing}
+            aria-pressed=${day.selected ? 'true' : 'false'} tabindex=${day.tabIndex}
+            @click=${() => context.component.selectDate(day)}
+            @focus=${() => context.component.setActiveDate(day.value)}
+            @keydown=${(event) => context.component.handleDayKeydown(event, day)}>
+            <span class="sf-datepicker-day-date">${day.day}</span>
+        </button>`;
+}
+
+function renderPresets(context) {
+    const items = context.presetItems;
+    if (!items.length) return nothing;
+    // One tab stop: the pressed range, or the first one that can be chosen.
+    const focusable = items.find((item) => item.pressed && !item.disabled) ?? items.find((item) => !item.disabled);
+    // «Свой период» is pressed for a range picked on the grid, not for no range.
+    const custom = !items.some((item) => item.pressed) && Boolean(context.startValue);
+    return html`
+        <div class="sf-datepicker-presets flex flex-col gap-1/4" role="group" aria-label=${context.labels.presets}
+            @keydown=${(event) => context.component.handlePresetKeydown(event)}>
+            ${items.map((item) => html`
+                <button class=${joinClasses('sf-datepicker-text sf-datepicker-preset flex items-cross-center', item.pressed ? 'active' : '')}
+                    type="button" ?disabled=${item.disabled} aria-pressed=${item.pressed ? 'true' : 'false'}
+                    tabindex=${item === focusable ? '0' : '-1'} data-preset=${item.id}
+                    @click=${() => context.component.choosePreset(item)}>${item.label}</button>`)}
+            <button class=${joinClasses('sf-datepicker-text sf-datepicker-preset flex items-cross-center', custom ? 'active' : '')}
+                type="button" aria-pressed=${custom ? 'true' : 'false'} tabindex=${focusable ? '-1' : '0'} data-preset=""
+                @click=${() => context.component.chooseCustomRange()}>${context.labels.customRange}</button>
+        </div>`;
+}
+
+function renderDatepickerPanel(context) {
+    const rootClasses = joinClasses('sf-datepicker inline-flex', context.presetItems.length ? 'sf-datepicker--presets' : '', context.rootClass);
+
+    return html`
+        <div ${ref(context.component.refs.datePickerPanel)} id=${context.panelId}
+            class=${rootClasses} style=${context.rootStyle || nothing}
+            role=${context.input ? 'dialog' : 'group'} aria-label=${context.calendarLabel}
+            @click=${(event) => context.component.handlePanelClick(event)}>
+            ${renderPresets(context)}
+            <div class="sf-datepicker-container flex flex-col">
+                ${renderTop(context)}
+                <div class="sf-datepicker-weekdays grid grid-col-7" aria-hidden="true">
+                    ${context.weekdays.map((weekday) => html`<span class="sf-datepicker-weekday">${weekday}</span>`)}
+                </div>
+                <div class="sf-datepicker-main relative">
+                    ${renderContext(context)}
+                    <div class="sf-datepicker-grid grid grid-col-7">
+                        ${context.days.map((day) => renderDay(day, context))}
+                    </div>
+                </div>
+            </div>
+        </div>`;
+}
+
+export function renderDatepickerTemplate(context) {
+    if (!context.input) return renderDatepickerPanel(context);
+
+    return html`
+        <div class=${joinClasses('sf-datepicker-wrap inline-flex flex-col relative',
+                context.open ? 'is-open' : '',
+                context.openAbove ? 'sf-datepicker-wrap--drop-up' : 'sf-datepicker-wrap--drop-down')}
+            ${ref(context.component.refs.datePickerRoot)} data-portal=${context.portal ? 'true' : 'false'}>
+            ${renderDatepickerInput(context)}
+            ${context.open ? renderDatepickerPanel(context) : nothing}
+        </div>`;
+}

package/distr/smart/download-file/js/download-file.min.js

@@ -0,0 +1,32 @@
+(()=>{"use strict";var e={"723de9a51114"(e,t,n){n.d(t,{_Y:()=>h,$U:()=>w});class o{lifecycleName(){return this.componentName??this.constructor.componentName}constructor(e){this.props=e,this.id=e?.id,this.params=e?.param,this.attrs=e?.attrs||{},this.template=null,window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:beforeRender`,{detail:this}))}getUtilityMap(){return this.constructor.utilityMap||null}extractUtilityClasses(e){if(!Array.isArray(e))return[];const t=new Set;return e.forEach(e=>{if("string"!=typeof e)return;const n=e.match(/\(([^)]+)\)/g);n&&n.forEach(e=>{e.slice(1,-1).split(/\s+/).filter(Boolean).forEach(e=>{e.startsWith(".")&&e.length>1&&t.add(e.slice(1))})})}),Array.from(t)}applyLayoutUtilities(e,t){if(!e||!t)return;const n=this.getUtilityMap();if(!n||!n[t])return;this.extractUtilityClasses(n[t]).forEach(t=>e.classList.add(t))}render(){return this.html=this.template,"function"==typeof this.init&&this.init(),this.html&&window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:render`,{detail:this})),this.html}destroy(){this.destroyInternal?.(),this.props=null,this.id=null,this.params=null,this.template=null,this.html&&(this.html.remove(),this.html=null),window.dispatchEvent(new CustomEvent(`${this.lifecycleName()}:destroy`,{detail:this}))}destroyInternal(){}}const i=function(e,t){if(e&&t)if("undefined"==typeof window||"function"!=typeof window.registerSfComponent){if("undefined"!=typeof window&&window.SF?.Loader?.registerComponent)window.SF.Loader.registerComponent(e,t);else if("undefined"!=typeof window){(window.SF_PENDING_COMPONENTS=window.SF_PENDING_COMPONENTS||[]).push([e,t])}}else window.registerSfComponent(e,t)},a=JSON.parse('{".sf-download-file":["display/flex (.flex)","flex-direction/row (.flex-row)","flex-wrap/nowrap (.flex-nowrap)","gap/var(--sf-e5)","justify-content/space-between (.justify-between)","align-items/center (.items-center)"],".sf-download-file .sf-download-file-wrap":["display/flex (.flex)","flex-direction/row (.flex-row)","flex-wrap/nowrap (.flex-nowrap)","gap/var(--sf-download-file-wrap--gap)","justify-content/flex-start (.justify-start)","align-items/center (.items-center)"]}'),l="sfDownloadFileBound";function s(e,t=!1){return null==e||""===e?t:"boolean"==typeof e?e:["1","true","yes","on","disabled","download"].includes(String(e).toLowerCase())}function r(e){const t=String(e||"").toLowerCase();return["1/3","1/2","1","2","3"].includes(t)?t:"1"}function d(e,t=""){if(!e)return;const n=document.createElement("a");n.href=e,t&&(n.download=t),n.target="_blank",n.rel="noopener noreferrer",document.body.append(n),n.click(),n.remove()}async function f(e){if(!e)return"";try{const t=await fetch(e,{method:"HEAD",credentials:"same-origin"});if(!t.ok)return"";const n=t.headers.get("content-length");return n?function(e){const t=Number(e);if(!Number.isFinite(t)||t<0)return"";if(t<1024)return`${t} B`;const n=["KB","MB","GB","TB"];let o=t/1024,i=0;for(;o>=1024&&i<n.length-1;)o/=1024,i+=1;return`${o>=10?o.toFixed(0):o.toFixed(1)}${n[i]}`}(n):""}catch{return""}}function c(e){const t=e?.getAttribute?.("href");if(t)return t;const n=function(e){return e&&e instanceof HTMLElement?"a"===e.tagName.toLowerCase()?e:e.querySelector("a.sf-download-file"):null}(e);return n?.getAttribute?.("href")||""}function u(e){return!!e&&(e.classList.contains("disabled")||e.hasAttribute("disabled")||"true"===e.getAttribute("aria-disabled"))}function h(e){if(!e||"1"===e.dataset[l])return;const t=t=>{if(u(e))return t.preventDefault(),void t.stopPropagation();const n=c(e),o=e.getAttribute("download")||e.dataset.fileName||e.querySelector(".sf-download-file__name, .sf-download-file-file-name")?.textContent?.trim()||"",i=e.hasAttribute("download")||"true"===e.dataset.download;!function(e,t,n,o){e?.dispatchEvent(new CustomEvent("sf-download-file:click",{bubbles:!0,detail:{href:t,fileName:n,download:o}}))}(e,n,o,i),"a"!==e.tagName.toLowerCase()&&n&&(t.preventDefault(),d(n,i?o:""))};e.addEventListener("click",t),e.__sfDownloadFileClick=t,e.dataset[l]="1",async function(e){if(!e||u(e))return;const t=function(e){return e?.querySelector?.(".sf-download-file-file-size")||null}(e);if(!t)return;if(String(t.textContent||"").trim())return;const n=c(e);if(!n)return;const o=await f(n);o&&t.isConnected&&(t.textContent=o)}(e)}function w(e){e&&"1"===e.dataset[l]&&(e.__sfDownloadFileClick&&e.removeEventListener("click",e.__sfDownloadFileClick),delete e.__sfDownloadFileClick,delete e.dataset[l])}function p(e=document){e.querySelectorAll(".sf-download-file").forEach(h)}"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>p(),{once:!0}):p()),"undefined"!=typeof window&&(window.SF=window.SF||{},window.SF.DownloadFile=window.SF.DownloadFile||{},window.SF.DownloadFile.bind=h,window.SF.DownloadFile.unbind=w,window.SF.DownloadFile.initAll=p),i("DownloadFile",class extends o{static componentName="DownloadFile";static utilityMap=a;html=null;constructor(e){super(e);const{size:t="1",fileName:n="File.pdf",fileSize:o="36MB",icon:i="download",href:a="",download:l=!1,disabled:d=!1,target:f="_blank"}=this.params||{},c=this.attrs.class||this.attrs.className,u=s(d,!1),h=Boolean(a)&&!u,w=document.createElement(h?"a":"button");this.id&&(w.id=this.id),h?(w.href=String(a),w.target=String(f||"_blank"),w.rel="noopener noreferrer",s(l,!1)&&(w.download=String(n||""))):w.type="button",w.classList.add("sf-download-file"),"1"!==r(t)&&w.classList.add(`sf-download-file--size-${r(t)}`),u?(w.classList.add("disabled"),w.setAttribute("aria-disabled","true"),w.tabIndex=-1):w.classList.add("cursor-pointer","transition"),c&&w.classList.add(...String(c).split(" ").filter(Boolean));const p=document.createElement("span");p.classList.add("sf-download-file__body","sf-download-file-wrap");const m=document.createElement("span");m.classList.add("sf-download-file__main","sf-download-file-container");const b=document.createElement("i");b.classList.add("sf-download-file__icon","sf-icon"),b.setAttribute("aria-hidden","true"),b.textContent=String(i||"download");const g=document.createElement("span");g.classList.add("sf-download-file__name","sf-download-file-file-name"),g.textContent=String(n||""),m.append(b,g);const y=document.createElement("span");y.classList.add("sf-download-file__size","sf-download-file-file-size"),y.textContent=String(o||""),p.append(m,y),w.append(p),this.href=String(a||""),this.download=s(l,!1),this.fileName=String(n||""),this.fileSize=String(o||""),this.disabled=u,this.fileSizeNode=y,this.template=w,this.applyLayoutUtilities(w,".sf-download-file"),this.applyLayoutUtilities(p,".sf-download-file .sf-download-file-wrap")}init(){h(this.template)}handleClick=e=>{if(this.disabled)return e.preventDefault(),void e.stopPropagation();"a"!==this.template?.tagName?.toLowerCase()?(this.href&&(e.preventDefault(),d(this.href,this.download?this.fileName:"")),this.template?.dispatchEvent(new CustomEvent("sf-download-file:click",{bubbles:!0,detail:{href:this.href,fileName:this.fileName,download:this.download}}))):this.template.dispatchEvent(new CustomEvent("sf-download-file:click",{bubbles:!0,detail:{href:this.href,fileName:this.fileName,download:this.download}}))};destroyInternal(){w(this.template)}})},c8c78be1ad16(e,t,n){n.a(e,async(e,t)=>{try{var o=n("723de9a51114"),i=n("fbe0570fcc69"),a=n("d5a098e10ec0"),l=e([i,a]);[i,a]=l.then?(await l)():l;var s=n.n(i);class r extends(s()){static get props(){return{templateName:{attribute:"template",default:"default"},size:{default:"1"},fileName:{default:"File.pdf"},fileSize:{default:""},icon:{default:"download"},href:{default:""},download:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},target:{default:"_blank"},ariaLabel:{default:""}}}constructor(){super(),this._boundRoot=null}get templateName(){return this.getAttribute("template")||"default"}get size(){return this.getAttribute("size")||"1"}get fileName(){return this.getAttribute("file-name")||"File.pdf"}get fileSize(){return this.getAttribute("file-size")||""}get icon(){return this.getAttribute("icon")||"download"}get href(){return this.getAttribute("href")||""}get download(){return this.getBooleanAttr("download",!1)}get disabled(){return this.getBooleanAttr("disabled",!1)}get target(){return this.getAttribute("target")||"_blank"}get ariaLabel(){return this.getAttribute("aria-label")||""}templateContext(){const e=this.getPropsContext();return this.createTemplateContext({...e,component:this})}template(){return(0,a.Z)(this.templateContext())}afterRender(){this._boundRoot&&((0,o.$U)(this._boundRoot),this._boundRoot=null),this._boundRoot=this.querySelector(".sf-download-file"),this._boundRoot&&(0,o._Y)(this._boundRoot)}onDisconnected(){this._boundRoot&&((0,o.$U)(this._boundRoot),this._boundRoot=null)}}r.define("sf-download-file"),t()}catch(e){t(e)}})},d5a098e10ec0(e,t,n){n.a(e,async(e,o)=>{try{n.d(t,{Z:()=>s});var i=n("ddf1cdb42ecc"),a=e([i]),l=a.then?(await a)():a;i=l[0];function s(e){const{size:t,fileName:n,fileSize:o,icon:a,href:l,download:s,disabled:r,target:d,ariaLabel:f}=e,c=l&&!r?"a":"button",u=["sf-download-file",`sf-download-file--size-${t}`,e.rootClass,r?"disabled":"cursor-pointer transition"].filter(Boolean),h=i.html`
+    <span class="sf-download-file__body sf-download-file-wrap">
+      <span class="sf-download-file__main sf-download-file-container">
+        <i class="sf-download-file__icon sf-icon" aria-hidden="true">${a}</i>
+        <span class="sf-download-file__name sf-download-file-file-name">${n}</span>
+      </span>
+      <span class="sf-download-file__size sf-download-file-file-size">${o}</span>
+    </span>
+  `;return"a"===c?i.html`
+      <a
+        class=${u.join(" ")}
+        style=${e.rootStyle||i.nothing}
+        href=${l}
+        target=${s?i.nothing:d}
+        rel=${s?i.nothing:"noopener noreferrer"}
+        download=${s?n||"":i.nothing}
+        aria-label=${f||i.nothing}
+      >
+        ${h}
+      </a>
+    `:i.html`
+    <button
+      type="button"
+      class=${u.join(" ")}
+      style=${e.rootStyle||i.nothing}
+      ?disabled=${r}
+      aria-disabled=${r?"true":i.nothing}
+      aria-label=${f||i.nothing}
+    >
+      ${h}
+    </button>
+  `}o()}catch(r){o(r)}})},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}))},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 n(o){const i=t[o];if(void 0!==i)return i.exports;const a=t[o]={exports:{}};return e[o](a,a.exports,n),a.exports}(()=>{const e="function"==typeof Symbol,t=e?Symbol("webpack queues"):"__webpack_queues__",o=e?Symbol("webpack exports"):"__webpack_exports__",i=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()))};n.a=(e,n,l)=>{let s;l&&((s=[]).d=-1);const r=new Set,d=e.exports;let f,c,u;const h=new Promise((e,t)=>{u=t,c=e});h[o]=d,h[t]=e=>(s&&e(s),r.forEach(e),h.catch(e=>{})),e.exports=h;n(e=>{let n;f=(e=>e.map(e=>{if(null!==e&&"object"==typeof e){if(e[t])return e;if(e.then){const n=[];n.d=0,e.then(e=>{l[o]=e,a(n)},e=>{l[i]=e,a(n)});const l={};return l[t]=e=>e(n),l}}const n={};return n[t]=e=>{},n[o]=e,n}))(e);const l=()=>f.map(e=>{if(e[i])throw e[i];return e[o]}),d=new Promise(e=>{n=()=>e(l),n.r=0;const o=e=>e!==s&&!r.has(e)&&(r.add(e),e&&!e.d&&(n.r++,e.push(n)));f.map(e=>e[t](o))});return n.r?d:l()},e=>(e?u(h[i]=e):c(d),a(s))),s?.d<0&&(s.d=0)}})(),n.n=e=>{const t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{if(Array.isArray(t))for(var o=0;o<t.length;){var i=t[o++],a=t[o++];n.o(e,i)?0===a&&o++:0===a?Object.defineProperty(e,i,{enumerable:!0,value:t[o++]}):Object.defineProperty(e,i,{enumerable:!0,get:a})}else for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);n("c8c78be1ad16")})();

package/distr/smart/download-file/smart.manifest.json

@@ -0,0 +1,273 @@
+{
+  "schema_version": 2,
+  "id": "smart.download-file",
+  "version": "1.0.0",
+  "title": "Download File",
+  "summary": "Native file download or application-owned file preparation action.",
+  "kind": "smart",
+  "reuse_mode": "whole",
+  "lifecycle": "experimental",
+  "tags": [
+    "download-file"
+  ],
+  "capabilities": [
+    "render",
+    "theme",
+    "responsive"
+  ],
+  "custom_element": "sf-download-file",
+  "templates": [
+    "default"
+  ],
+  "exported_parts": [],
+  "composition": {
+    "uses": [
+      "component.download-file",
+      "smart.icons"
+    ],
+    "public_parts": []
+  },
+  "inputs": {
+    "type": "object",
+    "properties": {
+      "template": {
+        "type": "string",
+        "default": "default"
+      },
+      "size": {
+        "type": "string",
+        "default": "1",
+        "enum": [
+          "1/3",
+          "1/2",
+          "1",
+          "2",
+          "3"
+        ],
+        "description": "Existing compact-to-prominent component size scale."
+      },
+      "file-name": {
+        "type": "string",
+        "default": "File.pdf",
+        "description": "Visible filename and default native download name."
+      },
+      "file-size": {
+        "type": "string",
+        "default": "",
+        "description": "Known human-readable size. Pass it when available to avoid discovery."
+      },
+      "icon": {
+        "type": "string",
+        "default": "download",
+        "description": "Decorative icon name."
+      },
+      "href": {
+        "type": "string",
+        "default": "",
+        "description": "Real resource destination; renders a native anchor when enabled."
+      },
+      "download": {
+        "type": "boolean",
+        "default": false,
+        "description": "Apply native download semantics to an anchor destination."
+      },
+      "disabled": {
+        "type": "boolean",
+        "default": false,
+        "description": "Render a disabled button with no live destination."
+      },
+      "target": {
+        "type": "string",
+        "default": "_blank"
+      },
+      "aria-label": {
+        "type": "string",
+        "default": ""
+      }
+    },
+    "additionalProperties": false
+  },
+  "item_contract": {},
+  "contracts": {
+    "owner_semantics": {
+      "resource": "href renders a native anchor",
+      "application_action": "no href renders a button and emits sf-download-file:click",
+      "disabled": "disabled button with no live destination"
+    },
+    "canonical_elements": {
+      "type": "string",
+      "enum": [
+        "sf-download-file__body",
+        "sf-download-file__main",
+        "sf-download-file__icon",
+        "sf-download-file__name",
+        "sf-download-file__size"
+      ]
+    },
+    "interaction_states": {
+      "type": "string",
+      "enum": [
+        "hover",
+        "active",
+        "focus-visible"
+      ]
+    },
+    "compatibility": {
+      "size_lookup": "an empty size preserves the existing Content-Length lookup"
+    }
+  },
+  "methods": {},
+  "events": {
+    "sf-download-file:click": {
+      "summary": "Emitted once for an enabled native destination or application-owned action, from the rendered .sf-download-file root; bubbles to the host, is not composed and not cancelable.",
+      "payload": {
+        "type": "object",
+        "properties": {
+          "href": {
+            "type": "string",
+            "description": "Empty for an application-owned action."
+          },
+          "fileName": {
+            "type": "string"
+          },
+          "download": {
+            "type": "boolean"
+          }
+        }
+      }
+    }
+  },
+  "state": {
+    "machines": {},
+    "visual_states": [
+      "default",
+      "active",
+      "disabled"
+    ]
+  },
+  "persistence": {
+    "mode": "none",
+    "source_of_truth": "component",
+    "network_owner": "none",
+    "revision_field": null
+  },
+  "ownership": {
+    "source": "simai/ui-source",
+    "data": "fixture",
+    "effects": "component",
+    "forbidden_client_responsibilities": [
+      "backend access decisions",
+      "host route invention"
+    ]
+  },
+  "security": {
+    "permissions_owner": "none",
+    "untrusted_inputs": [
+      "props",
+      "children"
+    ],
+    "network_policy": "deny"
+  },
+  "accessibility": {
+    "role": null,
+    "accessible_name": "recommended",
+    "keyboard": [
+      "Tab"
+    ],
+    "focus": "Keep visible focus on the active control."
+  },
+  "presentation": {
+    "themes": [
+      "light",
+      "dark"
+    ],
+    "locales": [
+      "ru",
+      "en"
+    ],
+    "responsive": [
+      "desktop",
+      "mobile"
+    ],
+    "skeleton": {
+      "shape": "none",
+      "while_loading": "none"
+    }
+  },
+  "adapter": {
+    "kind": "generic",
+    "protocol": "simai.smart-studio-adapter.v1",
+    "module": null
+  },
+  "artifacts": {
+    "fixtures": [
+      "studio.fixture.json"
+    ],
+    "scenarios": [
+      "studio.scenario.json"
+    ]
+  },
+  "readiness": {
+    "level": "described",
+    "required_checks": [
+      "manifest",
+      "fixture",
+      "runtime-upgrade",
+      "scenario-smoke"
+    ]
+  },
+  "compatibility": {
+    "contract_schema": {
+      "id": "https://simai.io/contracts/smart-component-manifest.v2.schema.json",
+      "version": 2
+    },
+    "runtime_pair": {
+      "ui_revision": "094f3d549aa7921d2d7f8773972c73711dd6a72e",
+      "ui_smart_revision": "856fb5d751fad1c76104c32515f4c1869dd75b6c"
+    },
+    "aliases": [],
+    "deprecations": [],
+    "replacement": null,
+    "migrations": []
+  },
+  "provenance": {
+    "source_repository": "simai/ui-source",
+    "source_revision": "d73527c92056a684b5f34a46ec7315e1ded9be19",
+    "source_artifacts": [
+      {
+        "path": "src/smart/download-file/index.js",
+        "sha256": "6452e87d436eb46deadd5164c4a8475a82b8a91cd209f149b142dfc4ad356181"
+      }
+    ],
+    "generated_runtime": [
+      {
+        "repository": "simai/ui-smart",
+        "revision": "856fb5d751fad1c76104c32515f4c1869dd75b6c",
+        "path": "smart/download-file/js/download-file.js",
+        "sha256": "5832578dd6cd97a6bc69f235343c032db297a60e5f92b8917e73bdcd79dc9f20"
+      }
+    ]
+  },
+  "ai_guidance": {
+    "use_when": "Use sf-download-file for one downloadable resource or an application-owned file preparation action.",
+    "do_not": [
+      "Do not use a button when a stable resource href already exists",
+      "Do not leave href on an unavailable file",
+      "Do not use the decorative icon as the accessible name",
+      "Do not copy generated ui-smart code",
+      "Do not move host data or access decisions into the component"
+    ],
+    "required_reads": [
+      "inputs",
+      "methods",
+      "events",
+      "ownership",
+      "provenance"
+    ],
+    "minimal_example": "<sf-download-file file-name=\"Report.pdf\" file-size=\"2.4 MB\" href=\"/files/report.pdf\" download></sf-download-file>",
+    "owner_commands": [
+      "npm run contract:verify",
+      "npm test"
+    ]
+  }
+}

package/distr/smart/download-file/studio.fixture.json

@@ -0,0 +1,16 @@
+{
+  "schema": "simai.smart-component-fixture.v2",
+  "id": "reference",
+  "component": "smart.download-file",
+  "title": "Download File reference",
+  "summary": "Deterministic reference fixture for sf-download-file.",
+  "locale": "ru",
+  "props": {
+    "file-name": "Отчёт за август.pdf",
+    "file-size": "2,4 МБ",
+    "href": "#",
+    "download": true
+  },
+  "children": [],
+  "state": "default"
+}

package/distr/smart/download-file/studio.scenario.json

@@ -0,0 +1,22 @@
+{
+  "schema": "simai.smart-component-scenario.v1",
+  "id": "smoke",
+  "component": "smart.download-file",
+  "fixture": "reference",
+  "viewport": "desktop",
+  "actions": [],
+  "assertions": [
+    {
+      "type": "upgraded"
+    },
+    {
+      "type": "visible"
+    },
+    {
+      "type": "no-console-error"
+    },
+    {
+      "type": "no-network"
+    }
+  ]
+}

package/distr/smart/download-file/template/default.js

@@ -0,0 +1,62 @@
+import { html, nothing } from 'lit';
+
+export function renderDownloadFileTemplate(context) {
+  const {
+    size,
+    fileName,
+    fileSize,
+    icon,
+    href,
+    download,
+    disabled,
+    target,
+    ariaLabel,
+  } = context;
+
+  const tagName = href && !disabled ? 'a' : 'button';
+  const rootClasses = [
+    'sf-download-file',
+    `sf-download-file--size-${size}`,
+    context.rootClass,
+    disabled ? 'disabled' : 'cursor-pointer transition',
+  ].filter(Boolean);
+
+  const content = html`
+    <span class="sf-download-file__body sf-download-file-wrap">
+      <span class="sf-download-file__main sf-download-file-container">
+        <i class="sf-download-file__icon sf-icon" aria-hidden="true">${icon}</i>
+        <span class="sf-download-file__name sf-download-file-file-name">${fileName}</span>
+      </span>
+      <span class="sf-download-file__size sf-download-file-file-size">${fileSize}</span>
+    </span>
+  `;
+
+  if (tagName === 'a') {
+    return html`
+      <a
+        class=${rootClasses.join(' ')}
+        style=${context.rootStyle || nothing}
+        href=${href}
+        target=${download ? nothing : target}
+        rel=${download ? nothing : 'noopener noreferrer'}
+        download=${download ? fileName || '' : nothing}
+        aria-label=${ariaLabel || nothing}
+      >
+        ${content}
+      </a>
+    `;
+  }
+
+  return html`
+    <button
+      type="button"
+      class=${rootClasses.join(' ')}
+      style=${context.rootStyle || nothing}
+      ?disabled=${disabled}
+      aria-disabled=${disabled ? 'true' : nothing}
+      aria-label=${ariaLabel || nothing}
+    >
+      ${content}
+    </button>
+  `;
+}

package/distr/smart/drawer/css/drawer.min.css

@@ -0,0 +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);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}}}