@kupola/kupola 2.0.0-beta.1 → 2.0.0-beta.10

package/README.md

@@ -1,4 +1,4 @@
-[中文文档](./README.zh-CN.md)
+[中文文档](./README.zh-CN.md)  | [Pages](https://kupola-cn.github.io/kupola/)
 
 ![npm](https://img.shields.io/npm/v/@kupola/kupola)
 ![bundlephobia](https://img.shields.io/bundlephobia/minzip/@kupola/kupola)

package/dist/css/components.min.css

@@ -0,0 +1 @@
+*,::after,::before{box-sizing:border-box}body{margin:0;background:var(--color-background);color:var(--color-foreground);font-family:var(--font-family-default);font-size:var(--body-base-font-size);line-height:var(--body-base-line-height)}.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacer-6);padding:0 var(--spacer-12);height:28px;border-radius:var(--radius-4);border:1px solid transparent;cursor:pointer;user-select:none;white-space:nowrap;font-size:var(--body-sm-font-size);font-weight:var(--font-weight-medium);transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.ds-btn--sm{height:24px;padding:0 var(--spacer-8);font-size:var(--body-xs-font-size)}.ds-btn--lg{height:32px;padding:0 var(--spacer-16);font-size:var(--body-base-font-size)}.ds-btn--primary{background:var(--bg-brand);color:var(--text-onbrand);border-color:var(--bg-brand)}.ds-btn--primary:hover{background:var(--bg-brand-hover)}.ds-btn--secondary{background:var(--bg-overlay-l2);color:var(--text-default);border-color:var(--border-neutral-l1)}.ds-btn--secondary:hover{background:var(--bg-overlay-l3)}.ds-btn--tertiary{background:0 0;color:var(--text-default)}.ds-btn--tertiary:hover{background:var(--bg-overlay-l2)}.ds-btn--danger{background:var(--status-error-default);color:#fff}.ds-btn[disabled]{opacity:.5;cursor:not-allowed}.ds-input{display:flex;align-items:center;gap:var(--spacer-8);padding:0 var(--spacer-12);height:28px;background:var(--bg-overlay-l1);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);color:var(--text-default);width:100%;font-size:var(--body-sm-font-size)}.ds-input:focus-within{border-color:var(--bg-brand)}.ds-input input{flex:1;background:0 0;border:none;outline:0;color:inherit;font:inherit}.ds-input input::placeholder{color:var(--text-tertiary)}.ds-input.is-error{border-color:var(--status-error-default)}.ds-modal-mask{position:fixed;inset:0;z-index:var(--z-index-modal);background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center}.ds-modal-mask.is-visible{display:flex}.ds-modal{background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-8);width:100%;max-width:480px;outline:0}.ds-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-16) var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-modal__title{font-size:var(--heading-sm-font-size);font-weight:var(--font-weight-strong)}.ds-modal__close{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:0 0;border:none;color:var(--icon-secondary);cursor:pointer;border-radius:var(--radius-4)}.ds-modal__close:hover{background:var(--bg-overlay-l2)}.ds-modal__body{padding:var(--spacer-16) var(--spacer-24)}.ds-modal__footer{display:flex;justify-content:flex-end;gap:var(--spacer-8);padding:var(--spacer-12) var(--spacer-24);border-top:1px solid var(--border-neutral-l1)}.ds-drawer-mask{position:fixed;inset:0;z-index:var(--z-index-drawer);background:rgba(0,0,0,.5);display:none}.ds-drawer-mask.is-visible{display:block}.ds-drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-index-drawer);width:360px;max-width:100vw;background:var(--bg-base-secondary);border-left:1px solid var(--border-neutral-l1);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--transition-slow)}.ds-drawer.is-visible{transform:translateX(0)}.ds-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-16) var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-drawer__body{padding:var(--spacer-16) var(--spacer-24);flex:1;overflow-y:auto}.ds-dropdown{position:relative;display:inline-block}.ds-dropdown__menu{position:absolute;top:calc(100% + 4px);left:0;min-width:160px;background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l2);border-radius:var(--radius-4);box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:var(--z-index-dropdown);display:none;padding:var(--spacer-4)}.ds-dropdown__menu.is-open{display:block}.ds-dropdown__item{display:flex;align-items:center;padding:var(--spacer-6) var(--spacer-8);border-radius:var(--radius-2);color:var(--text-default);font-size:var(--body-sm-font-size);cursor:pointer}.ds-dropdown__item:hover{background:var(--bg-overlay-l1)}.ds-tooltip{position:fixed;z-index:var(--z-index-tooltip);padding:var(--spacer-4) var(--spacer-8);background:var(--bg-base-tertiary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);font-size:var(--body-xs-font-size);color:var(--text-default);pointer-events:none;max-width:280px;white-space:pre-wrap}.ds-table{width:100%;border-collapse:collapse}.ds-table td,.ds-table th{text-align:left;padding:var(--spacer-12) var(--spacer-8);border-bottom:1px solid var(--border-neutral-l1);font-size:var(--body-sm-font-size)}.ds-table th{color:var(--text-tertiary);font-weight:var(--font-weight-default);font-size:var(--body-xs-font-size);text-transform:uppercase;letter-spacing:.04em}.ds-table td{color:var(--text-default)}.ds-table--striped tbody tr:nth-child(2n){background:var(--bg-base-secondary)}.ds-table--hover tbody tr:hover{background:var(--bg-overlay-l1)}.ds-form{display:flex;flex-direction:column;gap:var(--spacer-16)}.ds-form__group{display:flex;flex-direction:column;gap:var(--spacer-6)}.ds-form__label{font-size:var(--body-sm-font-size);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-form__error{font-size:var(--body-xs-font-size);color:var(--status-error-default)}.ds-form__actions{display:flex;justify-content:flex-end;gap:var(--spacer-8);margin-top:var(--spacer-16)}.ds-alert{display:flex;gap:var(--spacer-12);padding:var(--spacer-12) var(--spacer-16);background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);color:var(--text-default)}.ds-alert--success{background:var(--status-success-surface-l1);border-color:var(--status-success-default)}.ds-alert--warning{background:var(--status-warning-surface-l1);border-color:var(--status-warning-default)}.ds-alert--error{background:var(--status-error-surface-l1);border-color:var(--status-error-default)}.ds-alert--info{background:var(--status-info-surface-l1);border-color:var(--status-info-default)}.ds-tag{display:inline-flex;align-items:center;padding:0 var(--spacer-6);height:18px;border-radius:var(--radius-2);font-size:var(--body-xs-font-size);background:var(--bg-overlay-l2);color:var(--text-secondary);border:1px solid var(--border-neutral-l1)}.ds-tag--success{background:var(--status-success-surface-l1);color:var(--status-success-default)}.ds-tag--warning{background:var(--status-warning-surface-l1);color:var(--status-warning-default)}.ds-tag--error{background:var(--status-error-surface-l1);color:var(--status-error-default)}.ds-tabs{display:flex;gap:var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-tab{padding:var(--spacer-12) 0;background:0 0;border:none;color:var(--text-tertiary);cursor:pointer;font:inherit;font-size:var(--body-sm-font-size);position:relative}.ds-tab.is-active,.ds-tab:hover{color:var(--text-default)}.ds-tab.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--icon-default)}.ds-message{position:fixed;top:var(--spacer-24);left:50%;transform:translateX(-50%);z-index:var(--z-index-notification);padding:var(--spacer-8) var(--spacer-16);background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);box-shadow:0 4px 12px rgba(0,0,0,.15);font-size:var(--body-sm-font-size);color:var(--text-default)}.ds-progress{width:100%;height:4px;background:var(--bg-overlay-l2);border-radius:var(--radius-full);overflow:hidden}.ds-progress__bar{height:100%;background:var(--bg-brand);border-radius:var(--radius-full);transition:width var(--transition-normal)}.ds-switch{position:relative;width:36px;height:20px;background:var(--bg-overlay-l3);border-radius:var(--radius-full);cursor:pointer;transition:background var(--transition-fast)}.ds-switch.is-active{background:var(--bg-brand)}.ds-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--transition-fast)}.ds-switch.is-active::after{transform:translateX(16px)}.ds-card{background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);padding:var(--spacer-24)}.ds-skeleton{background:var(--bg-overlay-l2);border-radius:var(--radius-4);animation:1.5s ease-in-out infinite ds-skeleton-pulse}@keyframes ds-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.4}}.ds-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacer-40);color:var(--text-tertiary);font-size:var(--body-sm-font-size)}.ds-divider{height:1px;background:var(--border-neutral-l1)}.ds-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--bg-overlay-l3);color:var(--text-default);font-size:var(--body-sm-font-size);font-weight:var(--font-weight-strong)}.ds-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--spacer-4);border-radius:var(--radius-full);font-size:11px;font-weight:600;background:var(--status-error-default);color:#fff}.ds-collapse__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-12) var(--spacer-16);cursor:pointer;color:var(--text-default);font-weight:var(--font-weight-medium)}.ds-collapse__body{padding:0 var(--spacer-16) var(--spacer-16)}.ds-spin{display:inline-block;width:24px;height:24px;border:2px solid var(--bg-overlay-l3);border-top-color:var(--bg-brand);border-radius:50%;animation:.8s linear infinite ds-spin-rotate}@keyframes ds-spin-rotate{to{transform:rotate(360deg)}}

package/dist/css/index.css

@@ -11,3 +11,4 @@
 
 @import './tokens.css';
 @import './components.css';
+@import './responsive.css';

package/dist/css/index.min.css

@@ -0,0 +1 @@
+'Cascadia Code','Fira Code','Segoe UI',-apple-system,[data-theme=dark]{color-scheme:dark;--bg-base-default:#0C0C0D;--bg-base-secondary:#1A1B1D;--bg-base-tertiary:#222427;--bg-overlay-l1:rgba(255, 255, 255, 0.04);--bg-overlay-l2:rgba(255, 255, 255, 0.06);--bg-overlay-l3:rgba(255, 255, 255, 0.08);--bg-overlay-l4:rgba(255, 255, 255, 0.12);--text-default:#E5E7EB;--text-secondary:#B8BDCA;--text-tertiary:#9CA3AF;--text-disabled:#8B93A1;--text-onbrand:#FFFFFF;--icon-default:#E5E7EB;--icon-secondary:#B8BDCA;--icon-tertiary:#9CA3AF;--icon-disabled:#8B93A1;--border-neutral-l1:rgba(255, 255, 255, 0.12);--border-neutral-l2:rgba(255, 255, 255, 0.18);--border-neutral-l3:rgba(255, 255, 255, 0.25);--bg-brand:#32F08C;--bg-brand-hover:#53F4A2;--bg-brand-disabled:rgba(50, 240, 140, 0.3);--status-success-default:#32F08C;--status-warning-default:#FFAD5B;--status-error-default:#FF9CA8;--status-info-default:#79B8FF;--status-success-surface-l1:rgba(50, 240, 140, 0.12);--status-warning-surface-l1:rgba(255, 173, 91, 0.12);--status-error-surface-l1:rgba(255, 156, 168, 0.12);--status-info-surface-l1:rgba(121, 184, 255, 0.12);--color-background:var(--bg-base-default);--color-surface:var(--bg-base-secondary);--color-foreground:var(--text-default);--color-border:var(--border-neutral-l1)}[data-theme=light]{color-scheme:light;--bg-base-default:#FFFFFF;--bg-base-secondary:#F5F6F8;--bg-base-tertiary:#EDF0F5;--bg-overlay-l1:rgba(0, 0, 0, 0.04);--bg-overlay-l2:rgba(0, 0, 0, 0.06);--bg-overlay-l3:rgba(0, 0, 0, 0.08);--bg-overlay-l4:rgba(0, 0, 0, 0.12);--text-default:#0F1117;--text-secondary:#4B5563;--text-tertiary:#5B6370;--text-disabled:#525A68;--text-onbrand:#FFFFFF;--icon-default:#0F1117;--icon-secondary:#4B5563;--icon-tertiary:#5B6370;--icon-disabled:#525A68;--border-neutral-l1:rgba(0, 0, 0, 0.12);--border-neutral-l2:rgba(0, 0, 0, 0.18);--border-neutral-l3:rgba(0, 0, 0, 0.25);--bg-brand:#22C55E;--bg-brand-hover:#16A34A;--bg-brand-disabled:rgba(34, 197, 94, 0.3);--status-success-default:#16A34A;--status-warning-default:#CA8A04;--status-error-default:#DC2626;--status-info-default:#2E69FF;--status-success-surface-l1:rgba(22, 163, 74, 0.08);--status-warning-surface-l1:rgba(202, 138, 4, 0.08);--status-error-surface-l1:rgba(220, 38, 38, 0.08);--status-info-surface-l1:rgba(46, 105, 255, 0.08);--color-background:var(--bg-base-default);--color-surface:var(--bg-base-secondary);--color-foreground:var(--text-default);--color-border:var(--border-neutral-l1)}*,::after,::before{box-sizing:border-box}body{margin:0;background:var(--color-background);color:var(--color-foreground);font-family:var(--font-family-default);font-size:var(--body-base-font-size);line-height:var(--body-base-line-height)}.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacer-6);padding:0 var(--spacer-12);height:28px;border-radius:var(--radius-4);border:1px solid transparent;cursor:pointer;user-select:none;white-space:nowrap;font-size:var(--body-sm-font-size);font-weight:var(--font-weight-medium);transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.ds-btn--sm{height:24px;padding:0 var(--spacer-8);font-size:var(--body-xs-font-size)}.ds-btn--lg{height:32px;padding:0 var(--spacer-16);font-size:var(--body-base-font-size)}.ds-btn--primary{background:var(--bg-brand);color:var(--text-onbrand);border-color:var(--bg-brand)}.ds-btn--primary:hover{background:var(--bg-brand-hover)}.ds-btn--secondary{background:var(--bg-overlay-l2);color:var(--text-default);border-color:var(--border-neutral-l1)}.ds-btn--secondary:hover{background:var(--bg-overlay-l3)}.ds-btn--tertiary{background:0 0;color:var(--text-default)}.ds-btn--tertiary:hover{background:var(--bg-overlay-l2)}.ds-btn--danger{background:var(--status-error-default);color:#fff}.ds-btn[disabled]{opacity:.5;cursor:not-allowed}.ds-input{display:flex;align-items:center;gap:var(--spacer-8);padding:0 var(--spacer-12);height:28px;background:var(--bg-overlay-l1);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);color:var(--text-default);width:100%;font-size:var(--body-sm-font-size)}.ds-input:focus-within{border-color:var(--bg-brand)}.ds-input input{flex:1;background:0 0;border:none;outline:0;color:inherit;font:inherit}.ds-input input::placeholder{color:var(--text-tertiary)}.ds-input.is-error{border-color:var(--status-error-default)}.ds-modal-mask{position:fixed;inset:0;z-index:var(--z-index-modal);background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center}.ds-modal-mask.is-visible{display:flex}.ds-modal{background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-8);width:100%;max-width:480px;outline:0}.ds-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-16) var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-modal__title{font-size:var(--heading-sm-font-size);font-weight:var(--font-weight-strong)}.ds-modal__close{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:0 0;border:none;color:var(--icon-secondary);cursor:pointer;border-radius:var(--radius-4)}.ds-modal__close:hover{background:var(--bg-overlay-l2)}.ds-modal__body{padding:var(--spacer-16) var(--spacer-24)}.ds-modal__footer{display:flex;justify-content:flex-end;gap:var(--spacer-8);padding:var(--spacer-12) var(--spacer-24);border-top:1px solid var(--border-neutral-l1)}.ds-drawer-mask{position:fixed;inset:0;z-index:var(--z-index-drawer);background:rgba(0,0,0,.5);display:none}.ds-drawer-mask.is-visible{display:block}.ds-drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-index-drawer);width:360px;max-width:100vw;background:var(--bg-base-secondary);border-left:1px solid var(--border-neutral-l1);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--transition-slow)}.ds-drawer.is-visible{transform:translateX(0)}.ds-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-16) var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-drawer__body{padding:var(--spacer-16) var(--spacer-24);flex:1;overflow-y:auto}.ds-dropdown{position:relative;display:inline-block}.ds-dropdown__menu{position:absolute;top:calc(100% + 4px);left:0;min-width:160px;background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l2);border-radius:var(--radius-4);box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:var(--z-index-dropdown);display:none;padding:var(--spacer-4)}.ds-dropdown__menu.is-open{display:block}.ds-dropdown__item{display:flex;align-items:center;padding:var(--spacer-6) var(--spacer-8);border-radius:var(--radius-2);color:var(--text-default);font-size:var(--body-sm-font-size);cursor:pointer}.ds-dropdown__item:hover{background:var(--bg-overlay-l1)}.ds-tooltip{position:fixed;z-index:var(--z-index-tooltip);padding:var(--spacer-4) var(--spacer-8);background:var(--bg-base-tertiary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);font-size:var(--body-xs-font-size);color:var(--text-default);pointer-events:none;max-width:280px;white-space:pre-wrap}.ds-table{width:100%;border-collapse:collapse}.ds-table td,.ds-table th{text-align:left;padding:var(--spacer-12) var(--spacer-8);border-bottom:1px solid var(--border-neutral-l1);font-size:var(--body-sm-font-size)}.ds-table th{color:var(--text-tertiary);font-weight:var(--font-weight-default);font-size:var(--body-xs-font-size);text-transform:uppercase;letter-spacing:.04em}.ds-table td{color:var(--text-default)}.ds-table--striped tbody tr:nth-child(2n){background:var(--bg-base-secondary)}.ds-table--hover tbody tr:hover{background:var(--bg-overlay-l1)}.ds-form{display:flex;flex-direction:column;gap:var(--spacer-16)}.ds-form__group{display:flex;flex-direction:column;gap:var(--spacer-6)}.ds-form__label{font-size:var(--body-sm-font-size);font-weight:var(--font-weight-medium);color:var(--text-default)}.ds-form__error{font-size:var(--body-xs-font-size);color:var(--status-error-default)}.ds-form__actions{display:flex;justify-content:flex-end;gap:var(--spacer-8);margin-top:var(--spacer-16)}.ds-alert{display:flex;gap:var(--spacer-12);padding:var(--spacer-12) var(--spacer-16);background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);color:var(--text-default)}.ds-alert--success{background:var(--status-success-surface-l1);border-color:var(--status-success-default)}.ds-alert--warning{background:var(--status-warning-surface-l1);border-color:var(--status-warning-default)}.ds-alert--error{background:var(--status-error-surface-l1);border-color:var(--status-error-default)}.ds-alert--info{background:var(--status-info-surface-l1);border-color:var(--status-info-default)}.ds-tag{display:inline-flex;align-items:center;padding:0 var(--spacer-6);height:18px;border-radius:var(--radius-2);font-size:var(--body-xs-font-size);background:var(--bg-overlay-l2);color:var(--text-secondary);border:1px solid var(--border-neutral-l1)}.ds-tag--success{background:var(--status-success-surface-l1);color:var(--status-success-default)}.ds-tag--warning{background:var(--status-warning-surface-l1);color:var(--status-warning-default)}.ds-tag--error{background:var(--status-error-surface-l1);color:var(--status-error-default)}.ds-tabs{display:flex;gap:var(--spacer-24);border-bottom:1px solid var(--border-neutral-l1)}.ds-tab{padding:var(--spacer-12) 0;background:0 0;border:none;color:var(--text-tertiary);cursor:pointer;font:inherit;font-size:var(--body-sm-font-size);position:relative}.ds-tab.is-active,.ds-tab:hover{color:var(--text-default)}.ds-tab.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--icon-default)}.ds-message{position:fixed;top:var(--spacer-24);left:50%;transform:translateX(-50%);z-index:var(--z-index-notification);padding:var(--spacer-8) var(--spacer-16);background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);box-shadow:0 4px 12px rgba(0,0,0,.15);font-size:var(--body-sm-font-size);color:var(--text-default)}.ds-progress{width:100%;height:4px;background:var(--bg-overlay-l2);border-radius:var(--radius-full);overflow:hidden}.ds-progress__bar{height:100%;background:var(--bg-brand);border-radius:var(--radius-full);transition:width var(--transition-normal)}.ds-switch{position:relative;width:36px;height:20px;background:var(--bg-overlay-l3);border-radius:var(--radius-full);cursor:pointer;transition:background var(--transition-fast)}.ds-switch.is-active{background:var(--bg-brand)}.ds-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--transition-fast)}.ds-switch.is-active::after{transform:translateX(16px)}.ds-card{background:var(--bg-base-secondary);border:1px solid var(--border-neutral-l1);border-radius:var(--radius-4);padding:var(--spacer-24)}.ds-skeleton{background:var(--bg-overlay-l2);border-radius:var(--radius-4);animation:1.5s ease-in-out infinite ds-skeleton-pulse}@keyframes ds-skeleton-pulse{0%,100%{opacity:1}50%{opacity:.4}}.ds-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacer-40);color:var(--text-tertiary);font-size:var(--body-sm-font-size)}.ds-divider{height:1px;background:var(--border-neutral-l1)}.ds-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--bg-overlay-l3);color:var(--text-default);font-size:var(--body-sm-font-size);font-weight:var(--font-weight-strong)}.ds-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--spacer-4);border-radius:var(--radius-full);font-size:11px;font-weight:600;background:var(--status-error-default);color:#fff}.ds-collapse__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacer-12) var(--spacer-16);cursor:pointer;color:var(--text-default);font-weight:var(--font-weight-medium)}.ds-collapse__body{padding:0 var(--spacer-16) var(--spacer-16)}.ds-spin{display:inline-block;width:24px;height:24px;border:2px solid var(--bg-overlay-l3);border-top-color:var(--bg-brand);border-radius:50%;animation:.8s linear infinite ds-spin-rotate}@keyframes ds-spin-rotate{to{transform:rotate(360deg)}}@media (min-width:576px){.ds-show-sm{display:none!important}}@media (min-width:768px){.ds-show-md{display:none!important}}@media (max-width:1023.98px){.ds-hide-below-lg,.ds-hide-lg{display:none!important}}@media (min-width:1024px){.ds-show-lg{display:none!important}}@media (max-width:1279.98px){.ds-hide-below-xl,.ds-hide-xl{display:none!important}}@media (min-width:1280px){.ds-show-xl{display:none!important}}@media (max-width:767.98px){.ds-hide-below-md,.ds-hide-md{display:none!important}.ds-padding-responsive{padding:var(--spacing-3,12px)!important}.ds-margin-responsive{margin:var(--spacing-3,12px)!important}.ds-text-responsive{font-size:var(--font-size-sm, 13px)!important}.ds-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.ds-table{min-width:600px}.ds-table td,.ds-table th{white-space:nowrap;padding:var(--spacing-2,8px) var(--spacing-3,12px);font-size:var(--font-size-sm, 13px)}}@media (max-width:575.98px){.ds-hide-below-sm,.ds-hide-sm{display:none!important}.ds-modal-content{width:100%!important;max-width:100%!important;min-height:100vh!important;border-radius:0!important;margin:0!important}.ds-modal-mask{padding:0!important}.ds-drawer-left,.ds-drawer-right{width:100%!important;max-width:100%!important}.ds-drawer-bottom,.ds-drawer-top{height:90vh!important;max-height:90vh!important}.ds-dialog{width:calc(100% - 32px)!important;max-width:100%!important;margin:16px!important}.ds-select-dropdown{position:fixed!important;bottom:0;left:0;right:0;max-height:50vh;border-radius:12px 12px 0 0;z-index:var(--z-index-modal,3000)}.ds-datepicker-panel{width:calc(100vw - 32px)!important;max-width:100%!important}.ds-notification{width:calc(100% - 24px)!important;max-width:100%!important;right:12px!important;left:12px!important}}

package/dist/css/responsive.css

@@ -0,0 +1,153 @@
+/**
+ * Kupola CSS — Responsive utilities & component adaptations.
+ *
+ * Breakpoints:
+ *   sm: 576px  (phones landscape)
+ *   md: 768px  (tablets)
+ *   lg: 1024px (laptops)
+ *   xl: 1280px (desktops)
+ *
+ * Usage:
+ *   <div class="ds-hide-sm">Hidden on phones</div>
+ *   <div class="ds-show-md">Only visible on tablets+</div>
+ *   <div class="ds-hide-lg">Hidden below laptops</div>
+ */
+
+/* ═══════════════════════════════════════════════════════════
+   Responsive display utilities
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── sm: < 576px (phones) ─────────────────────────────── */
+@media (max-width: 575.98px) {
+  .ds-hide-sm { display: none !important; }
+  .ds-hide-below-sm { display: none !important; }
+}
+@media (min-width: 576px) {
+  .ds-show-sm { display: none !important; }
+}
+
+/* ── md: < 768px (below tablets) ──────────────────────── */
+@media (max-width: 767.98px) {
+  .ds-hide-md { display: none !important; }
+  .ds-hide-below-md { display: none !important; }
+}
+@media (min-width: 768px) {
+  .ds-show-md { display: none !important; }
+}
+
+/* ── lg: < 1024px (below laptops) ─────────────────────── */
+@media (max-width: 1023.98px) {
+  .ds-hide-lg { display: none !important; }
+  .ds-hide-below-lg { display: none !important; }
+}
+@media (min-width: 1024px) {
+  .ds-show-lg { display: none !important; }
+}
+
+/* ── xl: < 1280px (below desktops) ────────────────────── */
+@media (max-width: 1279.98px) {
+  .ds-hide-xl { display: none !important; }
+  .ds-hide-below-xl { display: none !important; }
+}
+@media (min-width: 1280px) {
+  .ds-show-xl { display: none !important; }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Responsive spacing utilities
+   ═══════════════════════════════════════════════════════════ */
+
+@media (max-width: 767.98px) {
+  .ds-padding-responsive { padding: var(--spacing-3, 12px) !important; }
+  .ds-margin-responsive { margin: var(--spacing-3, 12px) !important; }
+  .ds-text-responsive { font-size: var(--font-size-sm, 13px) !important; }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Component responsive adaptations
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── Modal: full-screen on phones ─────────────────────────── */
+@media (max-width: 575.98px) {
+  .ds-modal-content {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-height: 100vh !important;
+    border-radius: 0 !important;
+    margin: 0 !important;
+  }
+  .ds-modal-mask {
+    padding: 0 !important;
+  }
+}
+
+/* ── Drawer: full-width/height on phones ──────────────────── */
+@media (max-width: 575.98px) {
+  .ds-drawer-right,
+  .ds-drawer-left {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+  .ds-drawer-bottom,
+  .ds-drawer-top {
+    height: 90vh !important;
+    max-height: 90vh !important;
+  }
+}
+
+/* ── Dialog: full-width on phones ─────────────────────────── */
+@media (max-width: 575.98px) {
+  .ds-dialog {
+    width: calc(100% - 32px) !important;
+    max-width: 100% !important;
+    margin: 16px !important;
+  }
+}
+
+/* ── Table: horizontal scroll on small screens ────────────── */
+@media (max-width: 767.98px) {
+  .ds-table-wrapper {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .ds-table {
+    min-width: 600px;
+  }
+  .ds-table th,
+  .ds-table td {
+    white-space: nowrap;
+    padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
+    font-size: var(--font-size-sm, 13px);
+  }
+}
+
+/* ── Select: full-width on phones ─────────────────────────── */
+@media (max-width: 575.98px) {
+  .ds-select-dropdown {
+    position: fixed !important;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    max-height: 50vh;
+    border-radius: 12px 12px 0 0;
+    z-index: var(--z-index-modal, 3000);
+  }
+}
+
+/* ── DatePicker: full-width on phones ─────────────────────── */
+@media (max-width: 575.98px) {
+  .ds-datepicker-panel {
+    width: calc(100vw - 32px) !important;
+    max-width: 100% !important;
+  }
+}
+
+/* ── Notification: stack full-width on phones ─────────────── */
+@media (max-width: 575.98px) {
+  .ds-notification {
+    width: calc(100% - 24px) !important;
+    max-width: 100% !important;
+    right: 12px !important;
+    left: 12px !important;
+  }
+}

package/dist/css/responsive.min.css

@@ -0,0 +1 @@
+@media (min-width:576px){.ds-show-sm{display:none!important}}@media (min-width:768px){.ds-show-md{display:none!important}}@media (max-width:1023.98px){.ds-hide-below-lg,.ds-hide-lg{display:none!important}}@media (min-width:1024px){.ds-show-lg{display:none!important}}@media (max-width:1279.98px){.ds-hide-below-xl,.ds-hide-xl{display:none!important}}@media (min-width:1280px){.ds-show-xl{display:none!important}}@media (max-width:767.98px){.ds-hide-below-md,.ds-hide-md{display:none!important}.ds-padding-responsive{padding:var(--spacing-3,12px)!important}.ds-margin-responsive{margin:var(--spacing-3,12px)!important}.ds-text-responsive{font-size:var(--font-size-sm, 13px)!important}.ds-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.ds-table{min-width:600px}.ds-table td,.ds-table th{white-space:nowrap;padding:var(--spacing-2,8px) var(--spacing-3,12px);font-size:var(--font-size-sm, 13px)}}@media (max-width:575.98px){.ds-hide-below-sm,.ds-hide-sm{display:none!important}.ds-modal-content{width:100%!important;max-width:100%!important;min-height:100vh!important;border-radius:0!important;margin:0!important}.ds-modal-mask{padding:0!important}.ds-drawer-left,.ds-drawer-right{width:100%!important;max-width:100%!important}.ds-drawer-bottom,.ds-drawer-top{height:90vh!important;max-height:90vh!important}.ds-dialog{width:calc(100% - 32px)!important;max-width:100%!important;margin:16px!important}.ds-select-dropdown{position:fixed!important;bottom:0;left:0;right:0;max-height:50vh;border-radius:12px 12px 0 0;z-index:var(--z-index-modal,3000)}.ds-datepicker-panel{width:calc(100vw - 32px)!important;max-width:100%!important}.ds-notification{width:calc(100% - 24px)!important;max-width:100%!important;right:12px!important;left:12px!important}}

package/dist/css/tokens.css

@@ -8,6 +8,9 @@
  */
 
 :root {
+
+/* ── Anti-FOUC: hide elements until JS removes [k-cloak] ── */
+[k-cloak] { display: none !important; }
   /* ── Primitives: Radius ─────────────────────────────────── */
   --radius-2: 2px;
   --radius-4: 4px;
@@ -75,6 +78,12 @@
   --transition-fast: 0.12s ease;
   --transition-normal: 0.2s ease;
   --transition-slow: 0.3s ease;
+
+  /* ── Breakpoints ────────────────────────────────────────── */
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
 }
 
 /* ═══════════════════════════════════════════════════════════

package/dist/css/tokens.min.css

@@ -0,0 +1 @@
+'Cascadia Code','Fira Code','Segoe UI',-apple-system,[data-theme=dark]{color-scheme:dark;--bg-base-default:#0C0C0D;--bg-base-secondary:#1A1B1D;--bg-base-tertiary:#222427;--bg-overlay-l1:rgba(255, 255, 255, 0.04);--bg-overlay-l2:rgba(255, 255, 255, 0.06);--bg-overlay-l3:rgba(255, 255, 255, 0.08);--bg-overlay-l4:rgba(255, 255, 255, 0.12);--text-default:#E5E7EB;--text-secondary:#B8BDCA;--text-tertiary:#9CA3AF;--text-disabled:#8B93A1;--text-onbrand:#FFFFFF;--icon-default:#E5E7EB;--icon-secondary:#B8BDCA;--icon-tertiary:#9CA3AF;--icon-disabled:#8B93A1;--border-neutral-l1:rgba(255, 255, 255, 0.12);--border-neutral-l2:rgba(255, 255, 255, 0.18);--border-neutral-l3:rgba(255, 255, 255, 0.25);--bg-brand:#32F08C;--bg-brand-hover:#53F4A2;--bg-brand-disabled:rgba(50, 240, 140, 0.3);--status-success-default:#32F08C;--status-warning-default:#FFAD5B;--status-error-default:#FF9CA8;--status-info-default:#79B8FF;--status-success-surface-l1:rgba(50, 240, 140, 0.12);--status-warning-surface-l1:rgba(255, 173, 91, 0.12);--status-error-surface-l1:rgba(255, 156, 168, 0.12);--status-info-surface-l1:rgba(121, 184, 255, 0.12);--color-background:var(--bg-base-default);--color-surface:var(--bg-base-secondary);--color-foreground:var(--text-default);--color-border:var(--border-neutral-l1)}[data-theme=light]{color-scheme:light;--bg-base-default:#FFFFFF;--bg-base-secondary:#F5F6F8;--bg-base-tertiary:#EDF0F5;--bg-overlay-l1:rgba(0, 0, 0, 0.04);--bg-overlay-l2:rgba(0, 0, 0, 0.06);--bg-overlay-l3:rgba(0, 0, 0, 0.08);--bg-overlay-l4:rgba(0, 0, 0, 0.12);--text-default:#0F1117;--text-secondary:#4B5563;--text-tertiary:#5B6370;--text-disabled:#525A68;--text-onbrand:#FFFFFF;--icon-default:#0F1117;--icon-secondary:#4B5563;--icon-tertiary:#5B6370;--icon-disabled:#525A68;--border-neutral-l1:rgba(0, 0, 0, 0.12);--border-neutral-l2:rgba(0, 0, 0, 0.18);--border-neutral-l3:rgba(0, 0, 0, 0.25);--bg-brand:#22C55E;--bg-brand-hover:#16A34A;--bg-brand-disabled:rgba(34, 197, 94, 0.3);--status-success-default:#16A34A;--status-warning-default:#CA8A04;--status-error-default:#DC2626;--status-info-default:#2E69FF;--status-success-surface-l1:rgba(22, 163, 74, 0.08);--status-warning-surface-l1:rgba(202, 138, 4, 0.08);--status-error-surface-l1:rgba(220, 38, 38, 0.08);--status-info-surface-l1:rgba(46, 105, 255, 0.08);--color-background:var(--bg-base-default);--color-surface:var(--bg-base-secondary);--color-foreground:var(--text-default);--color-border:var(--border-neutral-l1)}

package/dist/kupola-core-datepicker.cjs

@@ -0,0 +1,28 @@
+"use strict";class t{constructor(t,e){this.strings=t,this.values=e}}function e(e,...n){return new t(e,n)}function n(t){const e={t:t,o:new Set,i:null,l:!1};return e.i=()=>{e.l||o(e)},o(e),()=>function(t){if(t.l)return;t.l=!0,i(t)}(e)}function o(t){i(t);try{t.t()}finally{}}function i(t){for(const e of t.o)e.u.delete(t);t.o.clear()}function s(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function c(t){if(null==t||"object"!=typeof t)return!1;const e=Object.getOwnPropertyDescriptor(t,"value");if(e&&"function"==typeof e.get)return!0;const n=Object.getPrototypeOf(t);if(n){const t=Object.getOwnPropertyDescriptor(n,"value");if(t&&"function"==typeof t.get)return!0}return!1}const r=t=>`຿${t}຿`;function l(e){const n=[];for(let o=0;o<e.strings.length;o++)if(n.push(e.strings[o]),o<e.values.length){const i=e.values[o];i instanceof t?n.push(l(i)):Array.isArray(i)&&i.length>0&&i[0]instanceof t?n.push(i.map(l).join("")):c(i)?n.push(s(i.value)):"function"!=typeof i&&n.push(s(i??""))}return n.join("")}function a(t,e){const n=t.indexOf(e);if(-1===n)return{type:"text"};const o=t.substring(0,n).lastIndexOf("<");if(-1===o)return{type:"text"};if(t.substring(o,n).includes(">"))return{type:"text"};const i=t.substring(o+1,n).match(/([\w\-@:.]+)\s*=\s*(?:"[^"]*|'[^']*|[^\s>]*?)$/);if(!i)return{type:"text"};const s=i[1];return s.startsWith("on")&&s.length>2?{type:"event",attrName:s}:{type:"attr",attrName:s}}class u{constructor(t,e){this.container=t,this.rawValue=e,this.node=null,this.h=null}mount(){const e=document.createTextNode("");if(this.p?this.container.insertBefore(e,this.p):this.container.appendChild(e),this.node=e,c(this.rawValue)){const t=this.rawValue;this.h=n(()=>{this.node.textContent=null!=t.value?String(t.value):""})}else this.rawValue instanceof t?this.node.textContent=l(this.rawValue):this.node.textContent=null!=this.rawValue?String(this.rawValue):""}destroy(){this.h?.(),this.node?.remove()}}class d{constructor(t,e,n){this.element=t,this.attrName=e,this.rawValue=n,this.h=null}mount(){if(c(this.rawValue)){const t=this.rawValue;this.h=n(()=>{const e=t.value;null==e||!1===e?this.element.removeAttribute(this.attrName):this.element.setAttribute(this.attrName,String(e))})}else null!=this.rawValue&&!1!==this.rawValue&&this.element.setAttribute(this.attrName,String(this.rawValue))}destroy(){this.h?.()}}class f{constructor(t,e,n){this.element=t,this.eventName=e.slice(2).toLowerCase(),this.handler=n,this.k=null}mount(){"function"==typeof this.handler&&(this.k=t=>this.handler(t),this.element.addEventListener(this.eventName,this.k))}destroy(){this.k&&(this.element.removeEventListener(this.eventName,this.k),this.k=null)}}class h{constructor(){this.parts=[],this.fragment=null}destroy(){for(const t of this.parts)t.destroy();this.parts.length=0}}function p(e,n){const o=new h,i=function(e){const n=[];for(let o=0;o<e.strings.length;o++)if(n.push(e.strings[o]),o<e.values.length){const i=e.values[o];i instanceof t?n.push(l(i)):Array.isArray(i)&&i.length>0&&i[0]instanceof t?n.push(i.map(l).join("")):"function"==typeof i||c(i)?n.push(r(o)):n.push(s(i??""))}return n.join("")}(e),a=function(t){const e=document.createElement("template");return e.innerHTML=t,e.content}(i);o.fragment=a,k(a,e.values,i,o);for(const t of o.parts)t.mount();return n.appendChild(a),o}function k(t,e,n,o){const i=[...t.childNodes];for(const s of i)3===s.nodeType?y(s,e,n,o,t):1===s.nodeType&&g(s,e,n,o)}function y(t,e,n,o,i){const s=t.textContent||"";for(let c=0;c<e.length;c++){const l=r(c),d=s.indexOf(l);if(-1===d)continue;if("text"!==a(n,l).type)continue;const f=s.substring(0,d),h=s.substring(d+l.length);f&&i.insertBefore(document.createTextNode(f),t);const p=new u(i,e[c]);o.parts.push(p);let k=t;return h&&(k=document.createTextNode(h),i.insertBefore(k,t)),i.removeChild(t),p.p=k!==t?k:null,void(h&&y(k,e,n,o,i))}}function g(t,e,n,o){const i=[...t.attributes];for(const s of i)for(let i=0;i<e.length;i++){const c=r(i);if(!s.value.includes(c))continue;const l=a(n,c);if("event"===l.type&&l.attrName===s.name){t.removeAttribute(s.name);const n=new f(t,s.name,e[i]);o.parts.push(n)}else if("attr"===l.type&&l.attrName===s.name){const n=s.value.replace(c,"");n?t.setAttribute(s.name,n):t.removeAttribute(s.name);const r=new d(t,s.name,e[i]);o.parts.push(r)}}k(t,e,n,o)}const w={"en-US":{"modal.close":"Close","dialog.ok":"OK","dialog.cancel":"Cancel","table.empty":"No data","pagination.page":"Page","pagination.of":"of","select.placeholder":"Select...","datepicker.placeholder":"Select date","timepicker.placeholder":"Select time","fileupload.drag":"Drag files here or","fileupload.browse":"Browse","empty.text":"No data","datepicker.months":"Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec","datepicker.weekdays":"Mo,Tu,We,Th,Fr,Sa,Su","timepicker.placeholder":"Select time"},"zh-CN":{"modal.close":"关闭","dialog.ok":"确定","dialog.cancel":"取消","table.empty":"暂无数据","pagination.page":"页","pagination.of":"/","select.placeholder":"请选择","datepicker.placeholder":"选择日期","datepicker.months":"1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月","datepicker.weekdays":"一,二,三,四,五,六,日","timepicker.placeholder":"选择时间","fileupload.drag":"拖拽文件到此处或","fileupload.browse":"浏览","empty.text":"暂无数据"}};function m(t,e={}){let n=(w["en-US"]||w["en-US"])[t]||t;for(const[t,o]of Object.entries(e))n=n.replace(`{${t}}`,o);return n}exports.Datepicker=function(t={}){const{placeholder:n=null,format:o="YYYY-MM-DD",value:i="",weekStart:s=1,minDate:c=null,maxDate:r=null,onChange:l=null}=t,a=n||m("datepicker.placeholder"),u=m("datepicker.months").split(","),d=m("datepicker.weekdays").split(",");let f=!1,h=(new Date).getFullYear(),k=(new Date).getMonth(),y=null,g=null;i&&(y=v(i),y&&(h=y.getFullYear(),k=y.getMonth()));const w=c?v(c):null,_=r?v(r):null;function v(t){if(!t)return null;let e=t.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);return e?new Date(+e[1],+e[2]-1,+e[3]):(e=t.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/),e?new Date(+e[3],+e[1]-1,+e[2]):(e=t.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/),e?new Date(+e[3],+e[2]-1,+e[1]):null))}function $(t){if(!t)return"";const e=t.getFullYear(),n=String(t.getMonth()+1).padStart(2,"0"),i=String(t.getDate()).padStart(2,"0");switch(o){case"MM/DD/YYYY":return`${n}/${i}/${e}`;case"DD/MM/YYYY":return`${i}.${n}.${e}`;default:return`${e}-${n}-${i}`}}function x(t){return!!(w&&t<w)||!!(_&&t>_)}function D(t,e){return new Date(t,e+1,0).getDate()}function b(){if(f)return;f=!0;const t=B?B.querySelector(".ds-datepicker__calendar"):null;t&&(t.style.display="block")}function S(){if(!f)return;f=!1;const t=B?B.querySelector(".ds-datepicker__calendar"):null;t&&(t.style.display="none")}function Y(){f?S():b()}function M(){const t=B?B.querySelector(".ds-datepicker__input"):null;t&&(t.value=y?$(y):"")}function C(){const t=B?B.querySelector(".ds-datepicker__calendar"):null;if(!t)return;const e=t.querySelector(".ds-datepicker__title");e&&(e.textContent=`${u[k]} ${h}`);const n=t.querySelector(".ds-datepicker__days");if(!n)return;n.innerHTML="";(function(){const t=D(h,k);let e=new Date(h,k,1).getDay();1===s&&(e=0===e?6:e-1);const n=[],o=0===k?11:k-1,i=0===k?h-1:h,c=D(i,o);for(let t=e-1;t>=0;t--)n.push({date:new Date(i,o,c-t),outside:!0});for(let e=1;e<=t;e++)n.push({date:new Date(h,k,e),outside:!1});const r=7-n.length%7;if(r<7){const t=11===k?0:k+1,e=11===k?h+1:h;for(let o=1;o<=r;o++)n.push({date:new Date(e,t,o),outside:!0})}return n})().forEach(({date:t,outside:e})=>{const o=document.createElement("button");o.textContent=t.getDate(),e&&o.classList.add("is-outside"),function(t){const e=new Date;return t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()&&t.getDate()===e.getDate()}(t)&&o.classList.add("is-today"),function(t){return!!y&&t.getFullYear()===y.getFullYear()&&t.getMonth()===y.getMonth()&&t.getDate()===y.getDate()}(t)&&o.classList.add("is-selected"),x(t)&&(o.disabled=!0,o.style.opacity="0.3",o.style.cursor="not-allowed"),o.addEventListener("click",e=>{e.stopPropagation(),function(t){x(t)||(y=t,h=t.getFullYear(),k=t.getMonth(),M(),C(),S(),l&&l($(t),t))}(t)}),n.appendChild(o)})}const N=t=>{f&&B&&!B.contains(t.target)&&S()};document.addEventListener("click",N);const O=t=>{"Escape"===t.key&&f&&S()};document.addEventListener("keydown",O);const j=e`
+    <div class="ds-datepicker">
+      <div class="ds-datepicker__input-wrap" onclick="${t=>{t.stopPropagation(),Y()}}">
+        <input class="ds-datepicker__input" type="text" readonly placeholder="${a}" value="${y?$(y):""}" />
+        <button class="ds-datepicker__icon" onclick="${t=>{t.stopPropagation(),Y()}}">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+            <line x1="16" y1="2" x2="16" y2="6"/>
+            <line x1="8" y1="2" x2="8" y2="6"/>
+            <line x1="3" y1="10" x2="21" y2="10"/>
+          </svg>
+        </button>
+      </div>
+      <div class="ds-datepicker__calendar" style="display:none">
+        <div class="ds-datepicker__header">
+          <button class="ds-datepicker__nav" onclick="${function(){0===k?(k=11,h--):k--,C()}}" aria-label="Previous month">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
+          </button>
+          <span class="ds-datepicker__title">${`${u[k]} ${h}`}</span>
+          <button class="ds-datepicker__nav" onclick="${function(){11===k?(k=0,h++):k++,C()}}" aria-label="Next month">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+          </button>
+        </div>
+        <div class="ds-datepicker__weekdays">${(1===s?d:[d[6],...d.slice(0,6)]).map(t=>e`<span>${t}</span>`)}</div>
+        <div class="ds-datepicker__days"></div>
+      </div>
+    </div>
+  `,A=document.createDocumentFragment();g=p(j,A);const B=A.querySelector(".ds-datepicker");return C(),{get element(){return A},open:b,close:S,toggle:Y,getValue:function(){return y?$(y):""},setValue:function(t){y=v(t),y&&(h=y.getFullYear(),k=y.getMonth()),M(),C()},destroy(){document.removeEventListener("click",N),document.removeEventListener("keydown",O),g&&g.destroy()}}};

package/dist/kupola-core-datepicker.esm.js

@@ -1,8 +1,8 @@
-class t{constructor(t,n){this.strings=t,this.values=n}}function n(n,...e){return new t(n,e)}function e(t){const n={t:t,i:new Set,o:null,u:!1};return n.o=()=>{n.u||s(n)},s(n),()=>function(t){if(t.u)return;t.u=!0,i(t)}(n)}function s(t){i(t);try{t.t()}finally{}}function i(t){for(const n of t.i)n.l.delete(t);t.i.clear()}function o(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function c(t){if(null==t||"object"!=typeof t)return!1;const n=Object.getOwnPropertyDescriptor(t,"value");if(n&&"function"==typeof n.get)return!0;const e=Object.getPrototypeOf(t);if(e){const t=Object.getOwnPropertyDescriptor(e,"value");if(t&&"function"==typeof t.get)return!0}return!1}const r=t=>`຿${t}຿`;function u(n){const e=[];for(let s=0;s<n.strings.length;s++)if(e.push(n.strings[s]),s<n.values.length){const i=n.values[s];i instanceof t?e.push(u(i)):Array.isArray(i)&&i.length>0&&i[0]instanceof t?e.push(i.map(u).join("")):c(i)?e.push(o(i.value)):"function"!=typeof i&&e.push(o(i??""))}return e.join("")}function l(t,n){const e=t.indexOf(n);if(-1===e)return{type:"text"};const s=t.substring(0,e).lastIndexOf("<");if(-1===s)return{type:"text"};if(t.substring(s,e).includes(">"))return{type:"text"};const i=t.substring(s+1,e).match(/([\w\-@:.]+)\s*=\s*(?:"[^"]*|'[^']*|[^\s>]*?)$/);if(!i)return{type:"text"};const o=i[1];return o.startsWith("on")&&o.length>2?{type:"event",attrName:o}:{type:"attr",attrName:o}}class a{constructor(t,n){this.container=t,this.rawValue=n,this.node=null,this.h=null}mount(){const n=document.createTextNode("");if(this.p?this.container.insertBefore(n,this.p):this.container.appendChild(n),this.node=n,c(this.rawValue)){const t=this.rawValue;this.h=e(()=>{this.node.textContent=null!=t.value?String(t.value):""})}else this.rawValue instanceof t?this.node.textContent=u(this.rawValue):this.node.textContent=null!=this.rawValue?String(this.rawValue):""}destroy(){this.h?.(),this.node?.remove()}}class d{constructor(t,n,e){this.element=t,this.attrName=n,this.rawValue=e,this.h=null}mount(){if(c(this.rawValue)){const t=this.rawValue;this.h=e(()=>{const n=t.value;null==n||!1===n?this.element.removeAttribute(this.attrName):this.element.setAttribute(this.attrName,String(n))})}else null!=this.rawValue&&!1!==this.rawValue&&this.element.setAttribute(this.attrName,String(this.rawValue))}destroy(){this.h?.()}}class f{constructor(t,n,e){this.element=t,this.eventName=n.slice(2).toLowerCase(),this.handler=e,this.k=null}mount(){"function"==typeof this.handler&&(this.k=t=>this.handler(t),this.element.addEventListener(this.eventName,this.k))}destroy(){this.k&&(this.element.removeEventListener(this.eventName,this.k),this.k=null)}}class h{constructor(){this.parts=[],this.fragment=null}destroy(){for(const t of this.parts)t.destroy();this.parts.length=0}}function p(n,e){const s=new h,i=function(n){const e=[];for(let s=0;s<n.strings.length;s++)if(e.push(n.strings[s]),s<n.values.length){const i=n.values[s];i instanceof t?e.push(u(i)):Array.isArray(i)&&i.length>0&&i[0]instanceof t?e.push(i.map(u).join("")):"function"==typeof i||c(i)?e.push(r(s)):e.push(o(i??""))}return e.join("")}(n),l=function(t){const n=document.createElement("template");return n.innerHTML=t,n.content}(i);s.fragment=l,y(l,n.values,i,s);for(const t of s.parts)t.mount();return e.appendChild(l),s}function y(t,n,e,s){const i=[...t.childNodes];for(const o of i)3===o.nodeType?k(o,n,e,s,t):1===o.nodeType&&_(o,n,e,s)}function k(t,n,e,s,i){const o=t.textContent||"";for(let c=0;c<n.length;c++){const u=r(c),d=o.indexOf(u);if(-1===d)continue;if("text"!==l(e,u).type)continue;const f=o.substring(0,d),h=o.substring(d+u.length);f&&i.insertBefore(document.createTextNode(f),t);const p=new a(i,n[c]);s.parts.push(p);let y=t;return h&&(y=document.createTextNode(h),i.insertBefore(y,t)),i.removeChild(t),p.p=y!==t?y:null,void(h&&k(y,n,e,s,i))}}function _(t,n,e,s){const i=[...t.attributes];for(const o of i)for(let i=0;i<n.length;i++){const c=r(i);if(!o.value.includes(c))continue;const u=l(e,c);if("event"===u.type&&u.attrName===o.name){t.removeAttribute(o.name);const e=new f(t,o.name,n[i]);s.parts.push(e)}else if("attr"===u.type&&u.attrName===o.name){const e=o.value.replace(c,"");e?t.setAttribute(o.name,e):t.removeAttribute(o.name);const r=new d(t,o.name,n[i]);s.parts.push(r)}}y(t,n,e,s)}const w=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];function v(t={}){const{placeholder:e="Select date",format:s="YYYY-MM-DD",value:i="",weekStart:o=1,minDate:c=null,maxDate:r=null,onChange:u=null}=t;let l=!1,a=(new Date).getFullYear(),d=(new Date).getMonth(),f=null,h=null;i&&(f=_(i),f&&(a=f.getFullYear(),d=f.getMonth()));const y=c?_(c):null,k=r?_(r):null;function _(t){if(!t)return null;let n=t.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);return n?new Date(+n[1],+n[2]-1,+n[3]):(n=t.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/),n?new Date(+n[3],+n[1]-1,+n[2]):(n=t.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/),n?new Date(+n[3],+n[2]-1,+n[1]):null))}function v(t){if(!t)return"";const n=t.getFullYear(),e=String(t.getMonth()+1).padStart(2,"0"),i=String(t.getDate()).padStart(2,"0");switch(s){case"MM/DD/YYYY":return`${e}/${i}/${n}`;case"DD/MM/YYYY":return`${i}.${e}.${n}`;default:return`${n}-${e}-${i}`}}function g(t){return!!(y&&t<y)||!!(k&&t>k)}function $(t,n){return new Date(t,n+1,0).getDate()}function m(){if(l)return;l=!0;const t=C?C.querySelector(".ds-datepicker__calendar"):null;t&&(t.style.display="block")}function x(){if(!l)return;l=!1;const t=C?C.querySelector(".ds-datepicker__calendar"):null;t&&(t.style.display="none")}function D(){l?x():m()}function b(){const t=C?C.querySelector(".ds-datepicker__input"):null;t&&(t.value=f?v(f):"")}function S(){const t=C?C.querySelector(".ds-datepicker__calendar"):null;if(!t)return;const n=t.querySelector(".ds-datepicker__title");n&&(n.textContent=`${w[d]} ${a}`);const e=t.querySelector(".ds-datepicker__days");if(!e)return;e.innerHTML="";(function(){const t=$(a,d);let n=new Date(a,d,1).getDay();1===o&&(n=0===n?6:n-1);const e=[],s=0===d?11:d-1,i=0===d?a-1:a,c=$(i,s);for(let t=n-1;t>=0;t--)e.push({date:new Date(i,s,c-t),outside:!0});for(let n=1;n<=t;n++)e.push({date:new Date(a,d,n),outside:!1});const r=7-e.length%7;if(r<7){const t=11===d?0:d+1,n=11===d?a+1:a;for(let s=1;s<=r;s++)e.push({date:new Date(n,t,s),outside:!0})}return e})().forEach(({date:t,outside:n})=>{const s=document.createElement("button");s.textContent=t.getDate(),n&&s.classList.add("is-outside"),function(t){const n=new Date;return t.getFullYear()===n.getFullYear()&&t.getMonth()===n.getMonth()&&t.getDate()===n.getDate()}(t)&&s.classList.add("is-today"),function(t){return!!f&&t.getFullYear()===f.getFullYear()&&t.getMonth()===f.getMonth()&&t.getDate()===f.getDate()}(t)&&s.classList.add("is-selected"),g(t)&&(s.disabled=!0,s.style.opacity="0.3",s.style.cursor="not-allowed"),s.addEventListener("click",n=>{n.stopPropagation(),function(t){g(t)||(f=t,a=t.getFullYear(),d=t.getMonth(),b(),S(),x(),u&&u(v(t),t))}(t)}),e.appendChild(s)})}const Y=t=>{l&&C&&!C.contains(t.target)&&x()};document.addEventListener("click",Y);const M=t=>{"Escape"===t.key&&l&&x()};document.addEventListener("keydown",M);const j=n`
+class t{constructor(t,e){this.strings=t,this.values=e}}function e(e,...n){return new t(e,n)}function n(t){const e={t:t,o:new Set,i:null,l:!1};return e.i=()=>{e.l||o(e)},o(e),()=>function(t){if(t.l)return;t.l=!0,i(t)}(e)}function o(t){i(t);try{t.t()}finally{}}function i(t){for(const e of t.o)e.u.delete(t);t.o.clear()}function s(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function c(t){if(null==t||"object"!=typeof t)return!1;const e=Object.getOwnPropertyDescriptor(t,"value");if(e&&"function"==typeof e.get)return!0;const n=Object.getPrototypeOf(t);if(n){const t=Object.getOwnPropertyDescriptor(n,"value");if(t&&"function"==typeof t.get)return!0}return!1}const r=t=>`຿${t}຿`;function l(e){const n=[];for(let o=0;o<e.strings.length;o++)if(n.push(e.strings[o]),o<e.values.length){const i=e.values[o];i instanceof t?n.push(l(i)):Array.isArray(i)&&i.length>0&&i[0]instanceof t?n.push(i.map(l).join("")):c(i)?n.push(s(i.value)):"function"!=typeof i&&n.push(s(i??""))}return n.join("")}function a(t,e){const n=t.indexOf(e);if(-1===n)return{type:"text"};const o=t.substring(0,n).lastIndexOf("<");if(-1===o)return{type:"text"};if(t.substring(o,n).includes(">"))return{type:"text"};const i=t.substring(o+1,n).match(/([\w\-@:.]+)\s*=\s*(?:"[^"]*|'[^']*|[^\s>]*?)$/);if(!i)return{type:"text"};const s=i[1];return s.startsWith("on")&&s.length>2?{type:"event",attrName:s}:{type:"attr",attrName:s}}class u{constructor(t,e){this.container=t,this.rawValue=e,this.node=null,this.h=null}mount(){const e=document.createTextNode("");if(this.p?this.container.insertBefore(e,this.p):this.container.appendChild(e),this.node=e,c(this.rawValue)){const t=this.rawValue;this.h=n(()=>{this.node.textContent=null!=t.value?String(t.value):""})}else this.rawValue instanceof t?this.node.textContent=l(this.rawValue):this.node.textContent=null!=this.rawValue?String(this.rawValue):""}destroy(){this.h?.(),this.node?.remove()}}class d{constructor(t,e,n){this.element=t,this.attrName=e,this.rawValue=n,this.h=null}mount(){if(c(this.rawValue)){const t=this.rawValue;this.h=n(()=>{const e=t.value;null==e||!1===e?this.element.removeAttribute(this.attrName):this.element.setAttribute(this.attrName,String(e))})}else null!=this.rawValue&&!1!==this.rawValue&&this.element.setAttribute(this.attrName,String(this.rawValue))}destroy(){this.h?.()}}class f{constructor(t,e,n){this.element=t,this.eventName=e.slice(2).toLowerCase(),this.handler=n,this.k=null}mount(){"function"==typeof this.handler&&(this.k=t=>this.handler(t),this.element.addEventListener(this.eventName,this.k))}destroy(){this.k&&(this.element.removeEventListener(this.eventName,this.k),this.k=null)}}class h{constructor(){this.parts=[],this.fragment=null}destroy(){for(const t of this.parts)t.destroy();this.parts.length=0}}function p(e,n){const o=new h,i=function(e){const n=[];for(let o=0;o<e.strings.length;o++)if(n.push(e.strings[o]),o<e.values.length){const i=e.values[o];i instanceof t?n.push(l(i)):Array.isArray(i)&&i.length>0&&i[0]instanceof t?n.push(i.map(l).join("")):"function"==typeof i||c(i)?n.push(r(o)):n.push(s(i??""))}return n.join("")}(e),a=function(t){const e=document.createElement("template");return e.innerHTML=t,e.content}(i);o.fragment=a,k(a,e.values,i,o);for(const t of o.parts)t.mount();return n.appendChild(a),o}function k(t,e,n,o){const i=[...t.childNodes];for(const s of i)3===s.nodeType?y(s,e,n,o,t):1===s.nodeType&&g(s,e,n,o)}function y(t,e,n,o,i){const s=t.textContent||"";for(let c=0;c<e.length;c++){const l=r(c),d=s.indexOf(l);if(-1===d)continue;if("text"!==a(n,l).type)continue;const f=s.substring(0,d),h=s.substring(d+l.length);f&&i.insertBefore(document.createTextNode(f),t);const p=new u(i,e[c]);o.parts.push(p);let k=t;return h&&(k=document.createTextNode(h),i.insertBefore(k,t)),i.removeChild(t),p.p=k!==t?k:null,void(h&&y(k,e,n,o,i))}}function g(t,e,n,o){const i=[...t.attributes];for(const s of i)for(let i=0;i<e.length;i++){const c=r(i);if(!s.value.includes(c))continue;const l=a(n,c);if("event"===l.type&&l.attrName===s.name){t.removeAttribute(s.name);const n=new f(t,s.name,e[i]);o.parts.push(n)}else if("attr"===l.type&&l.attrName===s.name){const n=s.value.replace(c,"");n?t.setAttribute(s.name,n):t.removeAttribute(s.name);const r=new d(t,s.name,e[i]);o.parts.push(r)}}k(t,e,n,o)}const w={"en-US":{"modal.close":"Close","dialog.ok":"OK","dialog.cancel":"Cancel","table.empty":"No data","pagination.page":"Page","pagination.of":"of","select.placeholder":"Select...","datepicker.placeholder":"Select date","timepicker.placeholder":"Select time","fileupload.drag":"Drag files here or","fileupload.browse":"Browse","empty.text":"No data","datepicker.months":"Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec","datepicker.weekdays":"Mo,Tu,We,Th,Fr,Sa,Su","timepicker.placeholder":"Select time"},"zh-CN":{"modal.close":"关闭","dialog.ok":"确定","dialog.cancel":"取消","table.empty":"暂无数据","pagination.page":"页","pagination.of":"/","select.placeholder":"请选择","datepicker.placeholder":"选择日期","datepicker.months":"1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月","datepicker.weekdays":"一,二,三,四,五,六,日","timepicker.placeholder":"选择时间","fileupload.drag":"拖拽文件到此处或","fileupload.browse":"浏览","empty.text":"暂无数据"}};function m(t,e={}){let n=(w["en-US"]||w["en-US"])[t]||t;for(const[t,o]of Object.entries(e))n=n.replace(`{${t}}`,o);return n}function _(t={}){const{placeholder:n=null,format:o="YYYY-MM-DD",value:i="",weekStart:s=1,minDate:c=null,maxDate:r=null,onChange:l=null}=t,a=n||m("datepicker.placeholder"),u=m("datepicker.months").split(","),d=m("datepicker.weekdays").split(",");let f=!1,h=(new Date).getFullYear(),k=(new Date).getMonth(),y=null,g=null;i&&(y=v(i),y&&(h=y.getFullYear(),k=y.getMonth()));const w=c?v(c):null,_=r?v(r):null;function v(t){if(!t)return null;let e=t.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);return e?new Date(+e[1],+e[2]-1,+e[3]):(e=t.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/),e?new Date(+e[3],+e[1]-1,+e[2]):(e=t.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/),e?new Date(+e[3],+e[2]-1,+e[1]):null))}function $(t){if(!t)return"";const e=t.getFullYear(),n=String(t.getMonth()+1).padStart(2,"0"),i=String(t.getDate()).padStart(2,"0");switch(o){case"MM/DD/YYYY":return`${n}/${i}/${e}`;case"DD/MM/YYYY":return`${i}.${n}.${e}`;default:return`${e}-${n}-${i}`}}function x(t){return!!(w&&t<w)||!!(_&&t>_)}function D(t,e){return new Date(t,e+1,0).getDate()}function b(){if(f)return;f=!0;const t=B?B.querySelector(".ds-datepicker__calendar"):null;t&&(t.style.display="block")}function S(){if(!f)return;f=!1;const t=B?B.querySelector(".ds-datepicker__calendar"):null;t&&(t.style.display="none")}function Y(){f?S():b()}function M(){const t=B?B.querySelector(".ds-datepicker__input"):null;t&&(t.value=y?$(y):"")}function C(){const t=B?B.querySelector(".ds-datepicker__calendar"):null;if(!t)return;const e=t.querySelector(".ds-datepicker__title");e&&(e.textContent=`${u[k]} ${h}`);const n=t.querySelector(".ds-datepicker__days");if(!n)return;n.innerHTML="";(function(){const t=D(h,k);let e=new Date(h,k,1).getDay();1===s&&(e=0===e?6:e-1);const n=[],o=0===k?11:k-1,i=0===k?h-1:h,c=D(i,o);for(let t=e-1;t>=0;t--)n.push({date:new Date(i,o,c-t),outside:!0});for(let e=1;e<=t;e++)n.push({date:new Date(h,k,e),outside:!1});const r=7-n.length%7;if(r<7){const t=11===k?0:k+1,e=11===k?h+1:h;for(let o=1;o<=r;o++)n.push({date:new Date(e,t,o),outside:!0})}return n})().forEach(({date:t,outside:e})=>{const o=document.createElement("button");o.textContent=t.getDate(),e&&o.classList.add("is-outside"),function(t){const e=new Date;return t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()&&t.getDate()===e.getDate()}(t)&&o.classList.add("is-today"),function(t){return!!y&&t.getFullYear()===y.getFullYear()&&t.getMonth()===y.getMonth()&&t.getDate()===y.getDate()}(t)&&o.classList.add("is-selected"),x(t)&&(o.disabled=!0,o.style.opacity="0.3",o.style.cursor="not-allowed"),o.addEventListener("click",e=>{e.stopPropagation(),function(t){x(t)||(y=t,h=t.getFullYear(),k=t.getMonth(),M(),C(),S(),l&&l($(t),t))}(t)}),n.appendChild(o)})}const N=t=>{f&&B&&!B.contains(t.target)&&S()};document.addEventListener("click",N);const O=t=>{"Escape"===t.key&&f&&S()};document.addEventListener("keydown",O);const j=e`
     <div class="ds-datepicker">
-      <div class="ds-datepicker__input-wrap" onclick="${t=>{t.stopPropagation(),D()}}">
-        <input class="ds-datepicker__input" type="text" readonly placeholder="${e}" value="${f?v(f):""}" />
-        <button class="ds-datepicker__icon" onclick="${t=>{t.stopPropagation(),D()}}">
+      <div class="ds-datepicker__input-wrap" onclick="${t=>{t.stopPropagation(),Y()}}">
+        <input class="ds-datepicker__input" type="text" readonly placeholder="${a}" value="${y?$(y):""}" />
+        <button class="ds-datepicker__icon" onclick="${t=>{t.stopPropagation(),Y()}}">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
             <line x1="16" y1="2" x2="16" y2="6"/>
@@ -13,16 +13,16 @@ class t{constructor(t,n){this.strings=t,this.values=n}}function n(n,...e){return
       </div>
       <div class="ds-datepicker__calendar" style="display:none">
         <div class="ds-datepicker__header">
-          <button class="ds-datepicker__nav" onclick="${function(){0===d?(d=11,a--):d--,S()}}" aria-label="Previous month">
+          <button class="ds-datepicker__nav" onclick="${function(){0===k?(k=11,h--):k--,C()}}" aria-label="Previous month">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
           </button>
-          <span class="ds-datepicker__title">${`${w[d]} ${a}`}</span>
-          <button class="ds-datepicker__nav" onclick="${function(){11===d?(d=0,a++):d++,S()}}" aria-label="Next month">
+          <span class="ds-datepicker__title">${`${u[k]} ${h}`}</span>
+          <button class="ds-datepicker__nav" onclick="${function(){11===k?(k=0,h++):k++,C()}}" aria-label="Next month">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
           </button>
         </div>
-        <div class="ds-datepicker__weekdays">${(1===o?["Mo","Tu","We","Th","Fr","Sa","Su"]:["Su","Mo","Tu","We","Th","Fr","Sa"]).map(t=>n`<span>${t}</span>`)}</div>
+        <div class="ds-datepicker__weekdays">${(1===s?d:[d[6],...d.slice(0,6)]).map(t=>e`<span>${t}</span>`)}</div>
         <div class="ds-datepicker__days"></div>
       </div>
     </div>
-  `,A=document.createDocumentFragment();h=p(j,A);const C=A.querySelector(".ds-datepicker");return S(),{get element(){return A},open:m,close:x,toggle:D,getValue:function(){return f?v(f):""},setValue:function(t){f=_(t),f&&(a=f.getFullYear(),d=f.getMonth()),b(),S()},destroy(){document.removeEventListener("click",Y),document.removeEventListener("keydown",M),h&&h.destroy()}}}export{v as Datepicker};
+  `,A=document.createDocumentFragment();g=p(j,A);const B=A.querySelector(".ds-datepicker");return C(),{get element(){return A},open:b,close:S,toggle:Y,getValue:function(){return y?$(y):""},setValue:function(t){y=v(t),y&&(h=y.getFullYear(),k=y.getMonth()),M(),C()},destroy(){document.removeEventListener("click",N),document.removeEventListener("keydown",O),g&&g.destroy()}}}export{_ as Datepicker};

package/dist/kupola-core-dialog.cjs

@@ -0,0 +1,13 @@
+"use strict";class t{constructor(t,n){this.strings=t,this.values=n}}function n(n,...e){return new t(n,e)}function e(t){const n={t:t,o:new Set,i:null,l:!1};return n.i=()=>{n.l||o(n)},o(n),()=>function(t){if(t.l)return;t.l=!0,i(t)}(n)}function o(t){i(t);try{t.t()}finally{}}function i(t){for(const n of t.o)n.u.delete(t);t.o.clear()}function s(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function c(t){if(null==t||"object"!=typeof t)return!1;const n=Object.getOwnPropertyDescriptor(t,"value");if(n&&"function"==typeof n.get)return!0;const e=Object.getPrototypeOf(t);if(e){const t=Object.getOwnPropertyDescriptor(e,"value");if(t&&"function"==typeof t.get)return!0}return!1}const l=t=>`຿${t}຿`;function r(n){const e=[];for(let o=0;o<n.strings.length;o++)if(e.push(n.strings[o]),o<n.values.length){const i=n.values[o];i instanceof t?e.push(r(i)):Array.isArray(i)&&i.length>0&&i[0]instanceof t?e.push(i.map(r).join("")):c(i)?e.push(s(i.value)):"function"!=typeof i&&e.push(s(i??""))}return e.join("")}function a(t,n){const e=t.indexOf(n);if(-1===e)return{type:"text"};const o=t.substring(0,e).lastIndexOf("<");if(-1===o)return{type:"text"};if(t.substring(o,e).includes(">"))return{type:"text"};const i=t.substring(o+1,e).match(/([\w\-@:.]+)\s*=\s*(?:"[^"]*|'[^']*|[^\s>]*?)$/);if(!i)return{type:"text"};const s=i[1];return s.startsWith("on")&&s.length>2?{type:"event",attrName:s}:{type:"attr",attrName:s}}class d{constructor(t,n){this.container=t,this.rawValue=n,this.node=null,this.h=null}mount(){const n=document.createTextNode("");if(this.p?this.container.insertBefore(n,this.p):this.container.appendChild(n),this.node=n,c(this.rawValue)){const t=this.rawValue;this.h=e(()=>{this.node.textContent=null!=t.value?String(t.value):""})}else this.rawValue instanceof t?this.node.textContent=r(this.rawValue):this.node.textContent=null!=this.rawValue?String(this.rawValue):""}destroy(){this.h?.(),this.node?.remove()}}class u{constructor(t,n,e){this.element=t,this.attrName=n,this.rawValue=e,this.h=null}mount(){if(c(this.rawValue)){const t=this.rawValue;this.h=e(()=>{const n=t.value;null==n||!1===n?this.element.removeAttribute(this.attrName):this.element.setAttribute(this.attrName,String(n))})}else null!=this.rawValue&&!1!==this.rawValue&&this.element.setAttribute(this.attrName,String(this.rawValue))}destroy(){this.h?.()}}class h{constructor(t,n,e){this.element=t,this.eventName=n.slice(2).toLowerCase(),this.handler=e,this.m=null}mount(){"function"==typeof this.handler&&(this.m=t=>this.handler(t),this.element.addEventListener(this.eventName,this.m))}destroy(){this.m&&(this.element.removeEventListener(this.eventName,this.m),this.m=null)}}class f{constructor(){this.parts=[],this.fragment=null}destroy(){for(const t of this.parts)t.destroy();this.parts.length=0}}function p(n,e){const o=new f,i=function(n){const e=[];for(let o=0;o<n.strings.length;o++)if(e.push(n.strings[o]),o<n.values.length){const i=n.values[o];i instanceof t?e.push(r(i)):Array.isArray(i)&&i.length>0&&i[0]instanceof t?e.push(i.map(r).join("")):"function"==typeof i||c(i)?e.push(l(o)):e.push(s(i??""))}return e.join("")}(n),a=function(t){const n=document.createElement("template");return n.innerHTML=t,n.content}(i);o.fragment=a,g(a,n.values,i,o);for(const t of o.parts)t.mount();return e.appendChild(a),o}function g(t,n,e,o){const i=[...t.childNodes];for(const s of i)3===s.nodeType?y(s,n,e,o,t):1===s.nodeType&&m(s,n,e,o)}function y(t,n,e,o,i){const s=t.textContent||"";for(let c=0;c<n.length;c++){const r=l(c),u=s.indexOf(r);if(-1===u)continue;if("text"!==a(e,r).type)continue;const h=s.substring(0,u),f=s.substring(u+r.length);h&&i.insertBefore(document.createTextNode(h),t);const p=new d(i,n[c]);o.parts.push(p);let g=t;return f&&(g=document.createTextNode(f),i.insertBefore(g,t)),i.removeChild(t),p.p=g!==t?g:null,void(f&&y(g,n,e,o,i))}}function m(t,n,e,o){const i=[...t.attributes];for(const s of i)for(let i=0;i<n.length;i++){const c=l(i);if(!s.value.includes(c))continue;const r=a(e,c);if("event"===r.type&&r.attrName===s.name){t.removeAttribute(s.name);const e=new h(t,s.name,n[i]);o.parts.push(e)}else if("attr"===r.type&&r.attrName===s.name){const e=s.value.replace(c,"");e?t.setAttribute(s.name,e):t.removeAttribute(s.name);const l=new u(t,s.name,n[i]);o.parts.push(l)}}g(t,n,e,o)}const v={"en-US":{"modal.close":"Close","dialog.ok":"OK","dialog.cancel":"Cancel","table.empty":"No data","pagination.page":"Page","pagination.of":"of","select.placeholder":"Select...","datepicker.placeholder":"Select date","timepicker.placeholder":"Select time","fileupload.drag":"Drag files here or","fileupload.browse":"Browse","empty.text":"No data","datepicker.months":"Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec","datepicker.weekdays":"Mo,Tu,We,Th,Fr,Sa,Su","timepicker.placeholder":"Select time"},"zh-CN":{"modal.close":"关闭","dialog.ok":"确定","dialog.cancel":"取消","table.empty":"暂无数据","pagination.page":"页","pagination.of":"/","select.placeholder":"请选择","datepicker.placeholder":"选择日期","datepicker.months":"1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月","datepicker.weekdays":"一,二,三,四,五,六,日","timepicker.placeholder":"选择时间","fileupload.drag":"拖拽文件到此处或","fileupload.browse":"浏览","empty.text":"暂无数据"}};function x(t,n={}){let e=(v["en-US"]||v["en-US"])[t]||t;for(const[t,o]of Object.entries(n))e=e.replace(`{${t}}`,o);return e}const w={success:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',warning:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',error:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',info:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',normal:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>'};function k(t={}){const{title:e="",content:o="",type:i="normal",confirmText:s=null,cancelText:c=null,showCancel:l=!0}=t,r=s||x("dialog.ok"),a=c||x("dialog.cancel");return new Promise(t=>{const s=()=>{k(),t(!0)},c=()=>{k(),t(!1)},d=t=>{t.target===t.currentTarget&&c()},u=t=>{"Escape"===t.key&&c(),"Enter"===t.key&&s()},h=n`
+      <div class="ds-modal-mask">
+        <div class="ds-dialog" role="alertdialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-content" tabindex="-1">
+          <div class="ds-dialog__icon ds-dialog__icon--${i}">${w[i]||w.normal}</div>
+          <div class="ds-dialog__title" id="dialog-title">${e}</div>
+          <div class="ds-dialog__content" id="dialog-content">${o}</div>
+          <div class="ds-dialog__actions">
+            ${l?n`<button class="ds-btn ds-btn--ghost" data-action="cancel" type="button">${a}</button>`:""}
+            <button class="ds-btn ds-btn--primary" data-action="confirm" type="button">${r}</button>
+          </div>
+        </div>
+      </div>
+    `,f=document.createDocumentFragment(),g=p(h,f);document.body.appendChild(f);const y=document.body.querySelector(".ds-modal-mask:last-of-type")||document.body.lastElementChild;y&&y.classList.add("is-visible"),document.body.style.overflow="hidden";const m=y?.querySelector(".ds-dialog");m&&m.focus();const v=y.querySelector('[data-action="confirm"]'),x=y.querySelector('[data-action="cancel"]');function k(){document.removeEventListener("keydown",u),document.body.style.overflow="",y&&y.classList.remove("is-visible"),setTimeout(()=>{g.destroy(),y&&y.parentNode&&y.parentNode.removeChild(y)},50)}v&&v.addEventListener("click",s),x&&x.addEventListener("click",c),y&&y.addEventListener("click",d),document.addEventListener("keydown",u)})}const b={confirm:k,alert:function(t={}){return k({...t,showCancel:!1}).then(()=>{})}};exports.Dialog=b;

package/dist/kupola-core-dialog.esm.js

@@ -1,13 +1,13 @@
-class t{constructor(t,n){this.strings=t,this.values=n}}function n(n,...i){return new t(n,i)}function i(t){const n={t:t,i:new Set,o:null,l:!1};return n.o=()=>{n.l||s(n)},s(n),()=>function(t){if(t.l)return;t.l=!0,o(t)}(n)}function s(t){o(t);try{t.t()}finally{}}function o(t){for(const n of t.i)n.u.delete(t);t.i.clear()}function e(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function c(t){if(null==t||"object"!=typeof t)return!1;const n=Object.getOwnPropertyDescriptor(t,"value");if(n&&"function"==typeof n.get)return!0;const i=Object.getPrototypeOf(t);if(i){const t=Object.getOwnPropertyDescriptor(i,"value");if(t&&"function"==typeof t.get)return!0}return!1}const r=t=>`຿${t}຿`;function l(n){const i=[];for(let s=0;s<n.strings.length;s++)if(i.push(n.strings[s]),s<n.values.length){const o=n.values[s];o instanceof t?i.push(l(o)):Array.isArray(o)&&o.length>0&&o[0]instanceof t?i.push(o.map(l).join("")):c(o)?i.push(e(o.value)):"function"!=typeof o&&i.push(e(o??""))}return i.join("")}function u(t,n){const i=t.indexOf(n);if(-1===i)return{type:"text"};const s=t.substring(0,i).lastIndexOf("<");if(-1===s)return{type:"text"};if(t.substring(s,i).includes(">"))return{type:"text"};const o=t.substring(s+1,i).match(/([\w\-@:.]+)\s*=\s*(?:"[^"]*|'[^']*|[^\s>]*?)$/);if(!o)return{type:"text"};const e=o[1];return e.startsWith("on")&&e.length>2?{type:"event",attrName:e}:{type:"attr",attrName:e}}class h{constructor(t,n){this.container=t,this.rawValue=n,this.node=null,this.h=null}mount(){const n=document.createTextNode("");if(this.v?this.container.insertBefore(n,this.v):this.container.appendChild(n),this.node=n,c(this.rawValue)){const t=this.rawValue;this.h=i(()=>{this.node.textContent=null!=t.value?String(t.value):""})}else this.rawValue instanceof t?this.node.textContent=l(this.rawValue):this.node.textContent=null!=this.rawValue?String(this.rawValue):""}destroy(){this.h?.(),this.node?.remove()}}class f{constructor(t,n,i){this.element=t,this.attrName=n,this.rawValue=i,this.h=null}mount(){if(c(this.rawValue)){const t=this.rawValue;this.h=i(()=>{const n=t.value;null==n||!1===n?this.element.removeAttribute(this.attrName):this.element.setAttribute(this.attrName,String(n))})}else null!=this.rawValue&&!1!==this.rawValue&&this.element.setAttribute(this.attrName,String(this.rawValue))}destroy(){this.h?.()}}class a{constructor(t,n,i){this.element=t,this.eventName=n.slice(2).toLowerCase(),this.handler=i,this.m=null}mount(){"function"==typeof this.handler&&(this.m=t=>this.handler(t),this.element.addEventListener(this.eventName,this.m))}destroy(){this.m&&(this.element.removeEventListener(this.eventName,this.m),this.m=null)}}class d{constructor(){this.parts=[],this.fragment=null}destroy(){for(const t of this.parts)t.destroy();this.parts.length=0}}function y(n,i){const s=new d,o=function(n){const i=[];for(let s=0;s<n.strings.length;s++)if(i.push(n.strings[s]),s<n.values.length){const o=n.values[s];o instanceof t?i.push(l(o)):Array.isArray(o)&&o.length>0&&o[0]instanceof t?i.push(o.map(l).join("")):"function"==typeof o||c(o)?i.push(r(s)):i.push(e(o??""))}return i.join("")}(n),u=function(t){const n=document.createElement("template");return n.innerHTML=t,n.content}(o);s.fragment=u,v(u,n.values,o,s);for(const t of s.parts)t.mount();return i.appendChild(u),s}function v(t,n,i,s){const o=[...t.childNodes];for(const e of o)3===e.nodeType?g(e,n,i,s,t):1===e.nodeType&&m(e,n,i,s)}function g(t,n,i,s,o){const e=t.textContent||"";for(let c=0;c<n.length;c++){const l=r(c),f=e.indexOf(l);if(-1===f)continue;if("text"!==u(i,l).type)continue;const a=e.substring(0,f),d=e.substring(f+l.length);a&&o.insertBefore(document.createTextNode(a),t);const y=new h(o,n[c]);s.parts.push(y);let v=t;return d&&(v=document.createTextNode(d),o.insertBefore(v,t)),o.removeChild(t),y.v=v!==t?v:null,void(d&&g(v,n,i,s,o))}}function m(t,n,i,s){const o=[...t.attributes];for(const e of o)for(let o=0;o<n.length;o++){const c=r(o);if(!e.value.includes(c))continue;const l=u(i,c);if("event"===l.type&&l.attrName===e.name){t.removeAttribute(e.name);const i=new a(t,e.name,n[o]);s.parts.push(i)}else if("attr"===l.type&&l.attrName===e.name){const i=e.value.replace(c,"");i?t.setAttribute(e.name,i):t.removeAttribute(e.name);const r=new f(t,e.name,n[o]);s.parts.push(r)}}v(t,n,i,s)}const x={success:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',warning:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',error:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',info:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',normal:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>'};function w(t={}){const{title:i="",content:s="",type:o="normal",confirmText:e="OK",cancelText:c="Cancel",showCancel:r=!0}=t;return new Promise(t=>{const l=()=>{p(),t(!0)},u=()=>{p(),t(!1)},h=t=>{t.target===t.currentTarget&&u()},f=t=>{"Escape"===t.key&&u(),"Enter"===t.key&&l()},a=n`
+class t{constructor(t,n){this.strings=t,this.values=n}}function n(n,...e){return new t(n,e)}function e(t){const n={t:t,o:new Set,i:null,l:!1};return n.i=()=>{n.l||o(n)},o(n),()=>function(t){if(t.l)return;t.l=!0,i(t)}(n)}function o(t){i(t);try{t.t()}finally{}}function i(t){for(const n of t.o)n.u.delete(t);t.o.clear()}function s(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function c(t){if(null==t||"object"!=typeof t)return!1;const n=Object.getOwnPropertyDescriptor(t,"value");if(n&&"function"==typeof n.get)return!0;const e=Object.getPrototypeOf(t);if(e){const t=Object.getOwnPropertyDescriptor(e,"value");if(t&&"function"==typeof t.get)return!0}return!1}const l=t=>`຿${t}຿`;function r(n){const e=[];for(let o=0;o<n.strings.length;o++)if(e.push(n.strings[o]),o<n.values.length){const i=n.values[o];i instanceof t?e.push(r(i)):Array.isArray(i)&&i.length>0&&i[0]instanceof t?e.push(i.map(r).join("")):c(i)?e.push(s(i.value)):"function"!=typeof i&&e.push(s(i??""))}return e.join("")}function a(t,n){const e=t.indexOf(n);if(-1===e)return{type:"text"};const o=t.substring(0,e).lastIndexOf("<");if(-1===o)return{type:"text"};if(t.substring(o,e).includes(">"))return{type:"text"};const i=t.substring(o+1,e).match(/([\w\-@:.]+)\s*=\s*(?:"[^"]*|'[^']*|[^\s>]*?)$/);if(!i)return{type:"text"};const s=i[1];return s.startsWith("on")&&s.length>2?{type:"event",attrName:s}:{type:"attr",attrName:s}}class d{constructor(t,n){this.container=t,this.rawValue=n,this.node=null,this.h=null}mount(){const n=document.createTextNode("");if(this.p?this.container.insertBefore(n,this.p):this.container.appendChild(n),this.node=n,c(this.rawValue)){const t=this.rawValue;this.h=e(()=>{this.node.textContent=null!=t.value?String(t.value):""})}else this.rawValue instanceof t?this.node.textContent=r(this.rawValue):this.node.textContent=null!=this.rawValue?String(this.rawValue):""}destroy(){this.h?.(),this.node?.remove()}}class u{constructor(t,n,e){this.element=t,this.attrName=n,this.rawValue=e,this.h=null}mount(){if(c(this.rawValue)){const t=this.rawValue;this.h=e(()=>{const n=t.value;null==n||!1===n?this.element.removeAttribute(this.attrName):this.element.setAttribute(this.attrName,String(n))})}else null!=this.rawValue&&!1!==this.rawValue&&this.element.setAttribute(this.attrName,String(this.rawValue))}destroy(){this.h?.()}}class h{constructor(t,n,e){this.element=t,this.eventName=n.slice(2).toLowerCase(),this.handler=e,this.m=null}mount(){"function"==typeof this.handler&&(this.m=t=>this.handler(t),this.element.addEventListener(this.eventName,this.m))}destroy(){this.m&&(this.element.removeEventListener(this.eventName,this.m),this.m=null)}}class f{constructor(){this.parts=[],this.fragment=null}destroy(){for(const t of this.parts)t.destroy();this.parts.length=0}}function p(n,e){const o=new f,i=function(n){const e=[];for(let o=0;o<n.strings.length;o++)if(e.push(n.strings[o]),o<n.values.length){const i=n.values[o];i instanceof t?e.push(r(i)):Array.isArray(i)&&i.length>0&&i[0]instanceof t?e.push(i.map(r).join("")):"function"==typeof i||c(i)?e.push(l(o)):e.push(s(i??""))}return e.join("")}(n),a=function(t){const n=document.createElement("template");return n.innerHTML=t,n.content}(i);o.fragment=a,g(a,n.values,i,o);for(const t of o.parts)t.mount();return e.appendChild(a),o}function g(t,n,e,o){const i=[...t.childNodes];for(const s of i)3===s.nodeType?y(s,n,e,o,t):1===s.nodeType&&m(s,n,e,o)}function y(t,n,e,o,i){const s=t.textContent||"";for(let c=0;c<n.length;c++){const r=l(c),u=s.indexOf(r);if(-1===u)continue;if("text"!==a(e,r).type)continue;const h=s.substring(0,u),f=s.substring(u+r.length);h&&i.insertBefore(document.createTextNode(h),t);const p=new d(i,n[c]);o.parts.push(p);let g=t;return f&&(g=document.createTextNode(f),i.insertBefore(g,t)),i.removeChild(t),p.p=g!==t?g:null,void(f&&y(g,n,e,o,i))}}function m(t,n,e,o){const i=[...t.attributes];for(const s of i)for(let i=0;i<n.length;i++){const c=l(i);if(!s.value.includes(c))continue;const r=a(e,c);if("event"===r.type&&r.attrName===s.name){t.removeAttribute(s.name);const e=new h(t,s.name,n[i]);o.parts.push(e)}else if("attr"===r.type&&r.attrName===s.name){const e=s.value.replace(c,"");e?t.setAttribute(s.name,e):t.removeAttribute(s.name);const l=new u(t,s.name,n[i]);o.parts.push(l)}}g(t,n,e,o)}const v={"en-US":{"modal.close":"Close","dialog.ok":"OK","dialog.cancel":"Cancel","table.empty":"No data","pagination.page":"Page","pagination.of":"of","select.placeholder":"Select...","datepicker.placeholder":"Select date","timepicker.placeholder":"Select time","fileupload.drag":"Drag files here or","fileupload.browse":"Browse","empty.text":"No data","datepicker.months":"Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec","datepicker.weekdays":"Mo,Tu,We,Th,Fr,Sa,Su","timepicker.placeholder":"Select time"},"zh-CN":{"modal.close":"关闭","dialog.ok":"确定","dialog.cancel":"取消","table.empty":"暂无数据","pagination.page":"页","pagination.of":"/","select.placeholder":"请选择","datepicker.placeholder":"选择日期","datepicker.months":"1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月","datepicker.weekdays":"一,二,三,四,五,六,日","timepicker.placeholder":"选择时间","fileupload.drag":"拖拽文件到此处或","fileupload.browse":"浏览","empty.text":"暂无数据"}};function x(t,n={}){let e=(v["en-US"]||v["en-US"])[t]||t;for(const[t,o]of Object.entries(n))e=e.replace(`{${t}}`,o);return e}const w={success:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>',warning:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',error:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',info:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',normal:'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>'};function k(t={}){const{title:e="",content:o="",type:i="normal",confirmText:s=null,cancelText:c=null,showCancel:l=!0}=t,r=s||x("dialog.ok"),a=c||x("dialog.cancel");return new Promise(t=>{const s=()=>{k(),t(!0)},c=()=>{k(),t(!1)},d=t=>{t.target===t.currentTarget&&c()},u=t=>{"Escape"===t.key&&c(),"Enter"===t.key&&s()},h=n`
       <div class="ds-modal-mask">
-        <div class="ds-dialog">
-          <div class="ds-dialog__icon ds-dialog__icon--${o}">${x[o]||x.normal}</div>
-          <div class="ds-dialog__title">${i}</div>
-          <div class="ds-dialog__content">${s}</div>
+        <div class="ds-dialog" role="alertdialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-content" tabindex="-1">
+          <div class="ds-dialog__icon ds-dialog__icon--${i}">${w[i]||w.normal}</div>
+          <div class="ds-dialog__title" id="dialog-title">${e}</div>
+          <div class="ds-dialog__content" id="dialog-content">${o}</div>
           <div class="ds-dialog__actions">
-            ${r?n`<button class="ds-btn ds-btn--ghost" data-action="cancel">${c}</button>`:""}
-            <button class="ds-btn ds-btn--primary" data-action="confirm">${e}</button>
+            ${l?n`<button class="ds-btn ds-btn--ghost" data-action="cancel" type="button">${a}</button>`:""}
+            <button class="ds-btn ds-btn--primary" data-action="confirm" type="button">${r}</button>
           </div>
         </div>
       </div>
-    `,d=document.createDocumentFragment(),v=y(a,d);document.body.appendChild(d);const g=document.body.querySelector(".ds-modal-mask:last-of-type")||document.body.lastElementChild;g&&g.classList.add("is-visible"),document.body.style.overflow="hidden";const m=g.querySelector('[data-action="confirm"]'),w=g.querySelector('[data-action="cancel"]');function p(){document.removeEventListener("keydown",f),document.body.style.overflow="",g&&g.classList.remove("is-visible"),setTimeout(()=>{v.destroy(),g&&g.parentNode&&g.parentNode.removeChild(g)},50)}m&&m.addEventListener("click",l),w&&w.addEventListener("click",u),g&&g.addEventListener("click",h),document.addEventListener("keydown",f)})}const p={confirm:w,alert:function(t={}){return w({...t,showCancel:!1}).then(()=>{})}};export{p as Dialog};
+    `,f=document.createDocumentFragment(),g=p(h,f);document.body.appendChild(f);const y=document.body.querySelector(".ds-modal-mask:last-of-type")||document.body.lastElementChild;y&&y.classList.add("is-visible"),document.body.style.overflow="hidden";const m=y?.querySelector(".ds-dialog");m&&m.focus();const v=y.querySelector('[data-action="confirm"]'),x=y.querySelector('[data-action="cancel"]');function k(){document.removeEventListener("keydown",u),document.body.style.overflow="",y&&y.classList.remove("is-visible"),setTimeout(()=>{g.destroy(),y&&y.parentNode&&y.parentNode.removeChild(y)},50)}v&&v.addEventListener("click",s),x&&x.addEventListener("click",c),y&&y.addEventListener("click",d),document.addEventListener("keydown",u)})}const b={confirm:k,alert:function(t={}){return k({...t,showCancel:!1}).then(()=>{})}};export{b as Dialog};

package/dist/kupola-core-drawer.cjs

@@ -0,0 +1,15 @@
+"use strict";class t{constructor(t,n){this.strings=t,this.values=n}}function n(n,...s){return new t(n,s)}function s(t){const n={t:t,i:new Set,o:null,u:!1};return n.o=()=>{n.u||i(n)},i(n),()=>function(t){if(t.u)return;t.u=!0,e(t)}(n)}function i(t){e(t);try{t.t()}finally{}}function e(t){for(const n of t.i)n.l.delete(t);t.i.clear()}function o(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function r(t){if(null==t||"object"!=typeof t)return!1;const n=Object.getOwnPropertyDescriptor(t,"value");if(n&&"function"==typeof n.get)return!0;const s=Object.getPrototypeOf(t);if(s){const t=Object.getOwnPropertyDescriptor(s,"value");if(t&&"function"==typeof t.get)return!0}return!1}const c=t=>`຿${t}຿`;function u(n){const s=[];for(let i=0;i<n.strings.length;i++)if(s.push(n.strings[i]),i<n.values.length){const e=n.values[i];e instanceof t?s.push(u(e)):Array.isArray(e)&&e.length>0&&e[0]instanceof t?s.push(e.map(u).join("")):r(e)?s.push(o(e.value)):"function"!=typeof e&&s.push(o(e??""))}return s.join("")}function l(t,n){const s=t.indexOf(n);if(-1===s)return{type:"text"};const i=t.substring(0,s).lastIndexOf("<");if(-1===i)return{type:"text"};if(t.substring(i,s).includes(">"))return{type:"text"};const e=t.substring(i+1,s).match(/([\w\-@:.]+)\s*=\s*(?:"[^"]*|'[^']*|[^\s>]*?)$/);if(!e)return{type:"text"};const o=e[1];return o.startsWith("on")&&o.length>2?{type:"event",attrName:o}:{type:"attr",attrName:o}}class f{constructor(t,n){this.container=t,this.rawValue=n,this.node=null,this.h=null}mount(){const n=document.createTextNode("");if(this.p?this.container.insertBefore(n,this.p):this.container.appendChild(n),this.node=n,r(this.rawValue)){const t=this.rawValue;this.h=s(()=>{this.node.textContent=null!=t.value?String(t.value):""})}else this.rawValue instanceof t?this.node.textContent=u(this.rawValue):this.node.textContent=null!=this.rawValue?String(this.rawValue):""}destroy(){this.h?.(),this.node?.remove()}}class h{constructor(t,n,s){this.element=t,this.attrName=n,this.rawValue=s,this.h=null}mount(){if(r(this.rawValue)){const t=this.rawValue;this.h=s(()=>{const n=t.value;null==n||!1===n?this.element.removeAttribute(this.attrName):this.element.setAttribute(this.attrName,String(n))})}else null!=this.rawValue&&!1!==this.rawValue&&this.element.setAttribute(this.attrName,String(this.rawValue))}destroy(){this.h?.()}}class d{constructor(t,n,s){this.element=t,this.eventName=n.slice(2).toLowerCase(),this.handler=s,this.m=null}mount(){"function"==typeof this.handler&&(this.m=t=>this.handler(t),this.element.addEventListener(this.eventName,this.m))}destroy(){this.m&&(this.element.removeEventListener(this.eventName,this.m),this.m=null)}}class a{constructor(){this.parts=[],this.fragment=null}destroy(){for(const t of this.parts)t.destroy();this.parts.length=0}}function y(n,s){const i=new a,e=function(n){const s=[];for(let i=0;i<n.strings.length;i++)if(s.push(n.strings[i]),i<n.values.length){const e=n.values[i];e instanceof t?s.push(u(e)):Array.isArray(e)&&e.length>0&&e[0]instanceof t?s.push(e.map(u).join("")):"function"==typeof e||r(e)?s.push(c(i)):s.push(o(e??""))}return s.join("")}(n),l=function(t){const n=document.createElement("template");return n.innerHTML=t,n.content}(e);i.fragment=l,w(l,n.values,e,i);for(const t of i.parts)t.mount();return s.appendChild(l),i}function w(t,n,s,i){const e=[...t.childNodes];for(const o of e)3===o.nodeType?p(o,n,s,i,t):1===o.nodeType&&m(o,n,s,i)}function p(t,n,s,i,e){const o=t.textContent||"";for(let r=0;r<n.length;r++){const u=c(r),h=o.indexOf(u);if(-1===h)continue;if("text"!==l(s,u).type)continue;const d=o.substring(0,h),a=o.substring(h+u.length);d&&e.insertBefore(document.createTextNode(d),t);const y=new f(e,n[r]);i.parts.push(y);let w=t;return a&&(w=document.createTextNode(a),e.insertBefore(w,t)),e.removeChild(t),y.p=w!==t?w:null,void(a&&p(w,n,s,i,e))}}function m(t,n,s,i){const e=[...t.attributes];for(const o of e)for(let e=0;e<n.length;e++){const r=c(e);if(!o.value.includes(r))continue;const u=l(s,r);if("event"===u.type&&u.attrName===o.name){t.removeAttribute(o.name);const s=new d(t,o.name,n[e]);i.parts.push(s)}else if("attr"===u.type&&u.attrName===o.name){const s=o.value.replace(r,"");s?t.setAttribute(o.name,s):t.removeAttribute(o.name);const c=new h(t,o.name,n[e]);i.parts.push(c)}}w(t,n,s,i)}exports.Drawer=function(t={},s=null){const{title:i="",placement:e="left",width:o="",closableOnMask:r=!0,escClose:c=!0}=t;let u=!1;function l(){u||(u=!0,p&&p.classList.add("is-visible"),m&&m.classList.add("is-visible"),document.body.style.overflow="hidden",m&&m.focus())}function f(){u&&(u=!1,p&&p.classList.remove("is-visible"),m&&m.classList.remove("is-visible"),document.body.style.overflow="")}const h=t=>{c&&"Escape"===t.key&&u&&f()};document.addEventListener("keydown",h);const d=n`
+    <div class="ds-drawer-mask" onclick="${t=>{r&&t.target===t.currentTarget&&f()}}">
+      <div class="${"right"===e?"ds-drawer ds-drawer--right":"ds-drawer"}" style="${o?`width: ${o}`:""}" role="dialog" aria-modal="true" aria-labelledby="drawer-title" tabindex="-1">
+        <div class="ds-drawer__header">
+          <span class="ds-drawer__title" id="drawer-title">${i}</span>
+          <button class="ds-drawer__close" onclick="${f}" aria-label="Close" type="button">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 6L6 18M6 6l12 12"/>
+            </svg>
+          </button>
+        </div>
+        <div class="ds-drawer__body">${s}</div>
+      </div>
+    </div>
+  `,a=document.createDocumentFragment(),w=y(d,a),p=a.querySelector(".ds-drawer-mask"),m=a.querySelector(".ds-drawer");return{get element(){return a},open:l,close:f,toggle:function(){u?f():l()},destroy(){document.removeEventListener("keydown",h),document.body.style.overflow="",w.destroy()}}};

package/dist/kupola-core-drawer.esm.js

@@ -1,9 +1,9 @@
-class t{constructor(t,n){this.strings=t,this.values=n}}function n(n,...s){return new t(n,s)}function s(t){const n={t:t,i:new Set,o:null,u:!1};return n.o=()=>{n.u||i(n)},i(n),()=>function(t){if(t.u)return;t.u=!0,o(t)}(n)}function i(t){o(t);try{t.t()}finally{}}function o(t){for(const n of t.i)n.l.delete(t);t.i.clear()}function e(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function c(t){if(null==t||"object"!=typeof t)return!1;const n=Object.getOwnPropertyDescriptor(t,"value");if(n&&"function"==typeof n.get)return!0;const s=Object.getPrototypeOf(t);if(s){const t=Object.getOwnPropertyDescriptor(s,"value");if(t&&"function"==typeof t.get)return!0}return!1}const r=t=>`຿${t}຿`;function u(n){const s=[];for(let i=0;i<n.strings.length;i++)if(s.push(n.strings[i]),i<n.values.length){const o=n.values[i];o instanceof t?s.push(u(o)):Array.isArray(o)&&o.length>0&&o[0]instanceof t?s.push(o.map(u).join("")):c(o)?s.push(e(o.value)):"function"!=typeof o&&s.push(e(o??""))}return s.join("")}function l(t,n){const s=t.indexOf(n);if(-1===s)return{type:"text"};const i=t.substring(0,s).lastIndexOf("<");if(-1===i)return{type:"text"};if(t.substring(i,s).includes(">"))return{type:"text"};const o=t.substring(i+1,s).match(/([\w\-@:.]+)\s*=\s*(?:"[^"]*|'[^']*|[^\s>]*?)$/);if(!o)return{type:"text"};const e=o[1];return e.startsWith("on")&&e.length>2?{type:"event",attrName:e}:{type:"attr",attrName:e}}class f{constructor(t,n){this.container=t,this.rawValue=n,this.node=null,this.h=null}mount(){const n=document.createTextNode("");if(this.p?this.container.insertBefore(n,this.p):this.container.appendChild(n),this.node=n,c(this.rawValue)){const t=this.rawValue;this.h=s(()=>{this.node.textContent=null!=t.value?String(t.value):""})}else this.rawValue instanceof t?this.node.textContent=u(this.rawValue):this.node.textContent=null!=this.rawValue?String(this.rawValue):""}destroy(){this.h?.(),this.node?.remove()}}class h{constructor(t,n,s){this.element=t,this.attrName=n,this.rawValue=s,this.h=null}mount(){if(c(this.rawValue)){const t=this.rawValue;this.h=s(()=>{const n=t.value;null==n||!1===n?this.element.removeAttribute(this.attrName):this.element.setAttribute(this.attrName,String(n))})}else null!=this.rawValue&&!1!==this.rawValue&&this.element.setAttribute(this.attrName,String(this.rawValue))}destroy(){this.h?.()}}class d{constructor(t,n,s){this.element=t,this.eventName=n.slice(2).toLowerCase(),this.handler=s,this.m=null}mount(){"function"==typeof this.handler&&(this.m=t=>this.handler(t),this.element.addEventListener(this.eventName,this.m))}destroy(){this.m&&(this.element.removeEventListener(this.eventName,this.m),this.m=null)}}class a{constructor(){this.parts=[],this.fragment=null}destroy(){for(const t of this.parts)t.destroy();this.parts.length=0}}function y(n,s){const i=new a,o=function(n){const s=[];for(let i=0;i<n.strings.length;i++)if(s.push(n.strings[i]),i<n.values.length){const o=n.values[i];o instanceof t?s.push(u(o)):Array.isArray(o)&&o.length>0&&o[0]instanceof t?s.push(o.map(u).join("")):"function"==typeof o||c(o)?s.push(r(i)):s.push(e(o??""))}return s.join("")}(n),l=function(t){const n=document.createElement("template");return n.innerHTML=t,n.content}(o);i.fragment=l,w(l,n.values,o,i);for(const t of i.parts)t.mount();return s.appendChild(l),i}function w(t,n,s,i){const o=[...t.childNodes];for(const e of o)3===e.nodeType?p(e,n,s,i,t):1===e.nodeType&&m(e,n,s,i)}function p(t,n,s,i,o){const e=t.textContent||"";for(let c=0;c<n.length;c++){const u=r(c),h=e.indexOf(u);if(-1===h)continue;if("text"!==l(s,u).type)continue;const d=e.substring(0,h),a=e.substring(h+u.length);d&&o.insertBefore(document.createTextNode(d),t);const y=new f(o,n[c]);i.parts.push(y);let w=t;return a&&(w=document.createTextNode(a),o.insertBefore(w,t)),o.removeChild(t),y.p=w!==t?w:null,void(a&&p(w,n,s,i,o))}}function m(t,n,s,i){const o=[...t.attributes];for(const e of o)for(let o=0;o<n.length;o++){const c=r(o);if(!e.value.includes(c))continue;const u=l(s,c);if("event"===u.type&&u.attrName===e.name){t.removeAttribute(e.name);const s=new d(t,e.name,n[o]);i.parts.push(s)}else if("attr"===u.type&&u.attrName===e.name){const s=e.value.replace(c,"");s?t.setAttribute(e.name,s):t.removeAttribute(e.name);const r=new h(t,e.name,n[o]);i.parts.push(r)}}w(t,n,s,i)}function v(t={},s=null){const{title:i="",placement:o="left",width:e="",closableOnMask:c=!0,escClose:r=!0}=t;let u=!1;function l(){u||(u=!0,p&&p.classList.add("is-visible"),m&&m.classList.add("is-visible"),document.body.style.overflow="hidden")}function f(){u&&(u=!1,p&&p.classList.remove("is-visible"),m&&m.classList.remove("is-visible"),document.body.style.overflow="")}const h=t=>{r&&"Escape"===t.key&&u&&f()};document.addEventListener("keydown",h);const d=n`
-    <div class="ds-drawer-mask" onclick="${t=>{c&&t.target===t.currentTarget&&f()}}">
-      <div class="${"right"===o?"ds-drawer ds-drawer--right":"ds-drawer"}" style="${e?`width: ${e}`:""}">
+class t{constructor(t,n){this.strings=t,this.values=n}}function n(n,...s){return new t(n,s)}function s(t){const n={t:t,i:new Set,o:null,u:!1};return n.o=()=>{n.u||i(n)},i(n),()=>function(t){if(t.u)return;t.u=!0,e(t)}(n)}function i(t){e(t);try{t.t()}finally{}}function e(t){for(const n of t.i)n.l.delete(t);t.i.clear()}function o(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function r(t){if(null==t||"object"!=typeof t)return!1;const n=Object.getOwnPropertyDescriptor(t,"value");if(n&&"function"==typeof n.get)return!0;const s=Object.getPrototypeOf(t);if(s){const t=Object.getOwnPropertyDescriptor(s,"value");if(t&&"function"==typeof t.get)return!0}return!1}const c=t=>`຿${t}຿`;function u(n){const s=[];for(let i=0;i<n.strings.length;i++)if(s.push(n.strings[i]),i<n.values.length){const e=n.values[i];e instanceof t?s.push(u(e)):Array.isArray(e)&&e.length>0&&e[0]instanceof t?s.push(e.map(u).join("")):r(e)?s.push(o(e.value)):"function"!=typeof e&&s.push(o(e??""))}return s.join("")}function l(t,n){const s=t.indexOf(n);if(-1===s)return{type:"text"};const i=t.substring(0,s).lastIndexOf("<");if(-1===i)return{type:"text"};if(t.substring(i,s).includes(">"))return{type:"text"};const e=t.substring(i+1,s).match(/([\w\-@:.]+)\s*=\s*(?:"[^"]*|'[^']*|[^\s>]*?)$/);if(!e)return{type:"text"};const o=e[1];return o.startsWith("on")&&o.length>2?{type:"event",attrName:o}:{type:"attr",attrName:o}}class f{constructor(t,n){this.container=t,this.rawValue=n,this.node=null,this.h=null}mount(){const n=document.createTextNode("");if(this.p?this.container.insertBefore(n,this.p):this.container.appendChild(n),this.node=n,r(this.rawValue)){const t=this.rawValue;this.h=s(()=>{this.node.textContent=null!=t.value?String(t.value):""})}else this.rawValue instanceof t?this.node.textContent=u(this.rawValue):this.node.textContent=null!=this.rawValue?String(this.rawValue):""}destroy(){this.h?.(),this.node?.remove()}}class h{constructor(t,n,s){this.element=t,this.attrName=n,this.rawValue=s,this.h=null}mount(){if(r(this.rawValue)){const t=this.rawValue;this.h=s(()=>{const n=t.value;null==n||!1===n?this.element.removeAttribute(this.attrName):this.element.setAttribute(this.attrName,String(n))})}else null!=this.rawValue&&!1!==this.rawValue&&this.element.setAttribute(this.attrName,String(this.rawValue))}destroy(){this.h?.()}}class d{constructor(t,n,s){this.element=t,this.eventName=n.slice(2).toLowerCase(),this.handler=s,this.m=null}mount(){"function"==typeof this.handler&&(this.m=t=>this.handler(t),this.element.addEventListener(this.eventName,this.m))}destroy(){this.m&&(this.element.removeEventListener(this.eventName,this.m),this.m=null)}}class a{constructor(){this.parts=[],this.fragment=null}destroy(){for(const t of this.parts)t.destroy();this.parts.length=0}}function y(n,s){const i=new a,e=function(n){const s=[];for(let i=0;i<n.strings.length;i++)if(s.push(n.strings[i]),i<n.values.length){const e=n.values[i];e instanceof t?s.push(u(e)):Array.isArray(e)&&e.length>0&&e[0]instanceof t?s.push(e.map(u).join("")):"function"==typeof e||r(e)?s.push(c(i)):s.push(o(e??""))}return s.join("")}(n),l=function(t){const n=document.createElement("template");return n.innerHTML=t,n.content}(e);i.fragment=l,w(l,n.values,e,i);for(const t of i.parts)t.mount();return s.appendChild(l),i}function w(t,n,s,i){const e=[...t.childNodes];for(const o of e)3===o.nodeType?p(o,n,s,i,t):1===o.nodeType&&m(o,n,s,i)}function p(t,n,s,i,e){const o=t.textContent||"";for(let r=0;r<n.length;r++){const u=c(r),h=o.indexOf(u);if(-1===h)continue;if("text"!==l(s,u).type)continue;const d=o.substring(0,h),a=o.substring(h+u.length);d&&e.insertBefore(document.createTextNode(d),t);const y=new f(e,n[r]);i.parts.push(y);let w=t;return a&&(w=document.createTextNode(a),e.insertBefore(w,t)),e.removeChild(t),y.p=w!==t?w:null,void(a&&p(w,n,s,i,e))}}function m(t,n,s,i){const e=[...t.attributes];for(const o of e)for(let e=0;e<n.length;e++){const r=c(e);if(!o.value.includes(r))continue;const u=l(s,r);if("event"===u.type&&u.attrName===o.name){t.removeAttribute(o.name);const s=new d(t,o.name,n[e]);i.parts.push(s)}else if("attr"===u.type&&u.attrName===o.name){const s=o.value.replace(r,"");s?t.setAttribute(o.name,s):t.removeAttribute(o.name);const c=new h(t,o.name,n[e]);i.parts.push(c)}}w(t,n,s,i)}function v(t={},s=null){const{title:i="",placement:e="left",width:o="",closableOnMask:r=!0,escClose:c=!0}=t;let u=!1;function l(){u||(u=!0,p&&p.classList.add("is-visible"),m&&m.classList.add("is-visible"),document.body.style.overflow="hidden",m&&m.focus())}function f(){u&&(u=!1,p&&p.classList.remove("is-visible"),m&&m.classList.remove("is-visible"),document.body.style.overflow="")}const h=t=>{c&&"Escape"===t.key&&u&&f()};document.addEventListener("keydown",h);const d=n`
+    <div class="ds-drawer-mask" onclick="${t=>{r&&t.target===t.currentTarget&&f()}}">
+      <div class="${"right"===e?"ds-drawer ds-drawer--right":"ds-drawer"}" style="${o?`width: ${o}`:""}" role="dialog" aria-modal="true" aria-labelledby="drawer-title" tabindex="-1">
         <div class="ds-drawer__header">
-          <span class="ds-drawer__title">${i}</span>
-          <button class="ds-drawer__close" onclick="${f}" aria-label="Close">
+          <span class="ds-drawer__title" id="drawer-title">${i}</span>
+          <button class="ds-drawer__close" onclick="${f}" aria-label="Close" type="button">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M18 6L6 18M6 6l12 12"/>
             </svg>