@eunomia/elements 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/cdn/components/eun-toggle-item.js

@@ -1,4 +1,4 @@
-import{a as l}from"./chunks/chunk-T7WABJEJ.js";import{a as e,f as i,g as n,h as r,n as t,p as c,s}from"./chunks/chunk-XH6NREVZ.js";var u=n`
+import{a as s}from"./chunks/chunk-32DTNR52.js";import{a as e,f as i,g as n,h as r,n as t,p as l,s as c}from"./chunks/chunk-XH6NREVZ.js";var u=n`
   :host {
     --_hoverColor: var(
       --toggle-group-hover-color,
@@ -10,29 +10,37 @@ import{a as l}from"./chunks/chunk-T7WABJEJ.js";import{a as e,f as i,g as n,h as
     position: relative;
     z-index: 1;
     display: inline-block;
+    flex-shrink: 0;
     outline: none !important;
   }
+  :host([full]) {
+    flex: 1 1 0%;
+  }
   #item {
     box-sizing: border-box;
+    width: 100%;
     display: inline-flex;
     align-items: center;
     gap: var(--eun-space-xs, 4px);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-m, 500);
     text-transform: capitalize;
+    white-space: nowrap;
     cursor: pointer;
     color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
     padding: 6px 14px;
     border-radius: calc(
-      var(--toggle-group-border-radius, var(--eun-borderRadius-m, 8px)) - 3px
+      var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
     );
     outline: 2px solid transparent;
     box-shadow: var(--_boxShadow);
-    transition:
+    transition: var(
+      --_toggleTransition,
       background-color 0.2s ease-out,
       color 0.2s ease-out,
-      box-shadow 0.2s ease-out;
+      box-shadow 0.2s ease-out
+    );
   }
   :host(:not([disabled]):hover) #item {
     box-shadow: var(--_boxShadow-hover);
@@ -53,6 +61,9 @@ import{a as l}from"./chunks/chunk-T7WABJEJ.js";import{a as e,f as i,g as n,h as
     cursor: not-allowed;
     opacity: 0.5;
   }
+  :host([full]) #item {
+    justify-content: center;
+  }
   :host([checked]:not([exclusive])) #item {
     background: var(
       --toggle-group-active-background,
@@ -67,69 +78,77 @@ import{a as l}from"./chunks/chunk-T7WABJEJ.js";import{a as e,f as i,g as n,h as
   }
 
   :host {
+    --_variantColorDefault: var(--eun-color-primary-500, #3d6fff);
+    --_variantTintDefault: var(--eun-color-primary-transparent, #3d6fff33);
     --_variantColor: var(
       --toggle-group-active-background,
-      var(--eun-color-primary-500, #3d6fff)
+      var(--_variantColorDefault)
+    );
+    --_variantTint: var(--_customTint, var(--_variantTintDefault));
+    --_customTint: color-mix(
+      in srgb,
+      var(--toggle-group-active-background) 15%,
+      transparent
     );
-    --_variantTint: var(--eun-color-primary-transparent, #3d6fff33);
   }
-  :host([variant="secondary"]) {
-    --_variantColor: var(--eun-color-secondary-500, #e5a030);
-    --_variantTint: var(--eun-color-secondary-transparent, #e5a03033);
+  :host([color="secondary"]) {
+    --_variantColorDefault: var(--eun-color-secondary-500, #e5a030);
+    --_variantTintDefault: var(--eun-color-secondary-transparent, #e5a03033);
   }
-  :host([variant="critical"]) {
-    --_variantColor: var(--eun-color-critical-100, #aa0014);
-    --_variantTint: var(--eun-color-critical-30, #faf0f1);
+  :host([color="critical"]) {
+    --_variantColorDefault: var(--eun-color-critical-100, #aa0014);
+    --_variantTintDefault: var(--eun-color-critical-30, #faf0f1);
   }
-  :host([variant="success"]) {
-    --_variantColor: var(--eun-color-success-100, #1a9948);
-    --_variantTint: var(--eun-color-success-30, #f1f9f4);
+  :host([color="success"]) {
+    --_variantColorDefault: var(--eun-color-success-100, #1a9948);
+    --_variantTintDefault: var(--eun-color-success-30, #f1f9f4);
   }
-  :host([variant="warning"]) {
-    --_variantColor: var(--eun-color-warning-100, #c85207);
-    --_variantTint: var(--eun-color-warning-30, #fcf5f0);
+  :host([color="warning"]) {
+    --_variantColorDefault: var(--eun-color-warning-100, #c85207);
+    --_variantTintDefault: var(--eun-color-warning-30, #fcf5f0);
   }
   :host([appearance="outline"]) #item,
   :host([appearance="flat"]) #item {
     border-radius: var(
       --toggle-group-border-radius,
-      var(--eun-borderRadius-m, 8px)
+      var(--eun-border-radius-m, 8px)
     );
   }
   :host([appearance="outline"]) #item {
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--toggle-group-border-color, var(--eun-color-grey-300, #dee0e7));
   }
   :host([appearance="flat"]) #item {
-    border: var(--eun-borderWidth-s, 1px) solid transparent;
+    border: var(--eun-border-width-s, 1px) solid
+      var(--toggle-group-border-color, transparent);
   }
   :host([appearance="outline"][checked]) #item,
   :host([appearance="flat"][checked]) #item {
     background: var(--_variantTint);
-    color: var(--_variantColor);
-    font-weight: var(--eun-fontWeight-b, 700);
+    color: var(--toggle-group-active-color, var(--_variantColor));
+    font-weight: var(--eun-font-weight-b, 700);
   }
   :host([appearance="outline"][checked]) #item {
     border-color: var(--_variantColor);
   }
   :host([appearance="outline"]:not([disabled]):not([checked]):hover) #item,
   :host([appearance="flat"]:not([disabled]):not([checked]):hover) #item {
-    color: var(--_variantColor);
+    color: var(--toggle-group-hover-color, var(--_variantColor));
   }
   :host([appearance="outline"]:focus-visible) #item,
   :host([appearance="flat"]:focus-visible) #item {
     outline-color: var(--_variantColor);
-    color: var(--_variantColor);
+    color: var(--toggle-group-hover-color, var(--_variantColor));
   }
   :host([appearance="outline"]:not([disabled]):not([checked]):hover) #item,
   :host([appearance="outline"]:focus-visible) #item {
     border-color: var(--_variantColor);
   }
-`;var d="eun-toggle-item",v="eun-toggle-group",o=class extends l(s){constructor(){super(...arguments);this.checked=!1;this.activate=()=>{this.disabled||this.closest(v)?.activateItem(this)}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","checkbox"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("click",this.activate)}disconnectedCallback(){this.removeEventListener("click",this.activate),super.disconnectedCallback?.()}updated(a){super.updated(a),a.has("checked")&&this.setAttribute("aria-checked",String(this.checked))}render(){return t`
+`;var v="eun-toggle-item",d="eun-toggle-group",o=class extends s(c){constructor(){super(...arguments);this.checked=!1;this.activate=()=>{this.disabled||this.closest(d)?.activateItem(this)}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","checkbox"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.addEventListener("click",this.activate)}disconnectedCallback(){this.removeEventListener("click",this.activate),super.disconnectedCallback?.()}updated(a){super.updated(a),a.has("checked")&&this.setAttribute("aria-checked",String(this.checked))}render(){return t`
       <div id="item" part="item">
         <slot name="icon">
-          ${this.icon?t`<eun-icon name=${this.icon} size="16"></eun-icon>`:c}
+          ${this.icon?t`<eun-icon name=${this.icon} size="16"></eun-icon>`:l}
         </slot>
         <slot></slot>
       </div>
-    `}};o.styles=[u],e([r({reflect:!0})],o.prototype,"value",2),e([r()],o.prototype,"icon",2),e([r({reflect:!0})],o.prototype,"variant",2),e([r({type:Boolean,reflect:!0})],o.prototype,"checked",2),o=e([i(d)],o);export{o as EunomiaToggleItem,d as EunomiaToggleItemTagName};
+    `}};o.styles=[u],e([r({reflect:!0})],o.prototype,"value",2),e([r()],o.prototype,"icon",2),e([r({reflect:!0})],o.prototype,"color",2),e([r({type:Boolean,reflect:!0})],o.prototype,"checked",2),o=e([i(v)],o);export{o as EunomiaToggleItem,v as EunomiaToggleItemTagName};

package/dist/cdn/components/eun-toggle.js

@@ -1,4 +1,4 @@
-import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk-T7WABJEJ.js";import{a as r,f as l,g as s,h as t,n as a,s as n}from"./chunks/chunk-XH6NREVZ.js";var i=s`
+import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk-32DTNR52.js";import{a as r,f as l,g as s,h as t,n as a,s as n}from"./chunks/chunk-XH6NREVZ.js";var i=s`
   :host {
     --_hoverColor: var(
       --toggle-hover-color,
@@ -19,8 +19,8 @@ import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk
     gap: var(--eun-space-xs, 4px);
     cursor: pointer;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-m, 500);
     text-transform: capitalize;
     color: var(--toggle-color, var(--eun-color-grey-600, #666e8a));
     padding: var(
@@ -28,9 +28,9 @@ import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk
       calc(var(--eun-space-xs, 4px) * 1.5) var(--eun-space-m, 16px)
     );
     outline: 2px solid transparent;
-    border-radius: var(--toggle-border-radius, var(--eun-borderRadius-m, 8px));
-    background: var(--toggle-background, var(--eun-color-grey-100, #f7f8fa));
-    border: var(--toggle-border-size, var(--eun-borderWidth-s, 1px)) solid
+    border-radius: var(--toggle-border-radius, var(--eun-border-radius-m, 8px));
+    background: var(--toggle-background, var(--eun-surface-sunken, #f7f8fa));
+    border: var(--toggle-border-size, var(--eun-border-width-s, 1px)) solid
       var(--toggle-border-color, var(--eun-color-grey-300, #dee0e7));
     box-shadow: var(--_boxShadow);
     transition:
@@ -73,11 +73,14 @@ import{a as c}from"./chunks/chunk-YYCEPZUN.js";import{a as d}from"./chunks/chunk
     );
   }
   :host([appearance="flat"]:not([disabled])) #toggle {
-    background: var(--toggle-background, var(--eun-color-grey-100, #f7f8fa));
-    border-color: transparent;
+    background: var(--toggle-background, var(--eun-surface-sunken, #f7f8fa));
+    border-color: var(--toggle-border-color, transparent);
   }
   :host([appearance="flat"]:not([disabled]):hover) #toggle {
-    border-color: var(--toggle-border-color-hover, transparent);
+    border-color: var(
+      --toggle-border-color-hover,
+      var(--toggle-border-color, transparent)
+    );
   }
   :host([checked]:not([swap])) #toggle {
     background: var(

package/dist/cdn/components/eun-toolbar.js

@@ -1,4 +1,4 @@
-import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js";import"./chunks/chunk-UDOZRIJZ.js";import{a as s}from"./chunks/chunk-YYCEPZUN.js";import{a as b}from"./chunks/chunk-VRGRCYIO.js";import{a as v}from"./chunks/chunk-BKHD4S57.js";import{a as i,f as c,g as h,h as r,j as p,l as d,n as o,p as l,s as u}from"./chunks/chunk-XH6NREVZ.js";var f=h`
+import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js";import"./chunks/chunk-UDOZRIJZ.js";import{a as s}from"./chunks/chunk-YYCEPZUN.js";import{a as b}from"./chunks/chunk-VRGRCYIO.js";import{a as v}from"./chunks/chunk-5GKM5DIB.js";import{a as i,f as c,g as h,h as r,j as p,l as d,n as o,p as l,s as u}from"./chunks/chunk-XH6NREVZ.js";var f=h`
   :host {
     --_height: var(--toolbar-height, 72px);
     --_heightCollapsed: var(--toolbar-height-collapsed, 56px);
@@ -31,7 +31,9 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
       color-mix(in srgb, var(--_background) 90%, transparent)
     );
     --_panelColor: var(--toolbar-panel-color, var(--_color));
-    --_panelPadding: var(--toolbar-panel-padding, 24px);
+    --_panelPadding: var(--toolbar-panel-padding, 14px);
+    --_burgerAlign: var(--toolbar-burger-align, center);
+    --_burgerPadding: var(--toolbar-burger-padding, 0 var(--_panelPadding));
     --_panelGap: var(--toolbar-panel-gap, 8px);
     --_panelBackdropBlur: var(--toolbar-panel-backdrop-blur, 8px);
     --_skipLinksHeight: var(--toolbar-skip-links-height, 40px);
@@ -85,7 +87,7 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
     padding: var(--_padding);
     background: var(--_background);
     color: var(--_color);
-    border-block-end: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-block-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     box-shadow: var(--_shadow);
     transition:
       height var(--_transitionDuration) ease,
@@ -144,7 +146,7 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
     outline-offset: 2px;
     outline: 2px solid transparent;
     transition: outline 0.2s ease-out;
-    border-radius: var(--eun-borderRadius-s);
+    border-radius: var(--eun-border-radius-s);
   }
   #logo-link:focus-visible {
     outline-color: var(--eun-color-primary-500);
@@ -191,7 +193,7 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
     display: inline-flex;
     align-items: center;
     color: inherit;
-    font-size: var(--eun-fontSize-s, 13px);
+    font-size: var(--eun-font-size-s, 13px);
     text-decoration: none;
     white-space: nowrap;
   }
@@ -202,7 +204,7 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
     --link-color-focus: var(--_skipLinksColor);
     --link-padding: var(--eun-space-xs, 4px);
     --link-background-focus: var(--eun-color-secondary-transparent, #edbd6f33);
-    --link-border-radius: var(--eun-borderRadius-l, 999px);
+    --link-border-radius: var(--eun-border-radius-l, 999px);
   }
 
   #skip-links ::slotted(a),
@@ -210,7 +212,7 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
     padding: var(--eun-space-xs, 4px);
     outline: 2px solid transparent;
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-l, 999px);
+    border-radius: var(--eun-border-radius-l, 999px);
     transition:
       outline 0.2s ease-out,
       background 0.2s ease-out;
@@ -279,13 +281,17 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
   }
 
   #panel-header {
+    box-sizing: border-box;
     position: absolute;
     inset-block-start: 0;
     inset-inline-end: 0;
     z-index: 1;
     display: flex;
-    padding: var(--_panelPadding);
+    align-items: var(--_burgerAlign);
+    height: calc(var(--_currentHeight) - var(--eun-border-width-s, 1px));
+    padding: var(--_burgerPadding);
     pointer-events: auto;
+    transition: height var(--_transitionDuration) ease;
   }
 
   #panel-body {
@@ -350,6 +356,7 @@ import{a as g}from"./chunks/chunk-N6ZW5CDN.js";import"./chunks/chunk-RIFF2D2F.js
   @media (prefers-reduced-motion: reduce) {
     #bar,
     #panel,
+    #panel-header,
     #panel-body,
     #skip-links {
       transition-duration: 0.01ms;