@ecopages/radiant-ui 0.1.0-beta.0 → 0.1.0-beta.2

package/dist/components/ui/grid/grid.css

@@ -1,47 +1,176 @@
-@reference '../../../styles/radiant-ui.css';
-
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 rui-grid {
-	@apply block;
+  display: block;
 }
-
 @layer components {
-	.rui-grid {
-		@apply w-full overflow-hidden rounded-container border border-border text-sm shadow-sm;
-		display: table;
-		border-collapse: separate;
-		border-spacing: 0;
-	}
-
-	.rui-grid__row {
-		display: table-row;
-	}
-
-	.rui-grid__row:not(:first-child):hover .rui-grid__cell {
-		@apply bg-surface/60;
-	}
-
-	.rui-grid__cell {
-		display: table-cell;
-		@apply border-b border-r border-border bg-background px-control-x py-2.5 align-middle text-on-background;
-	}
-
-	.rui-grid__row .rui-grid__cell:last-child {
-		@apply border-r-0;
-	}
-
-	.rui-grid__row:last-child .rui-grid__cell {
-		@apply border-b-0;
-	}
-
-	.rui-grid__row:first-child .rui-grid__cell {
-		@apply bg-surface font-semibold text-on-background;
-	}
-
-	.rui-grid__cell a {
-		@apply font-medium text-link no-underline underline-offset-2 hover:underline;
-	}
-
-	.rui-grid__cell:focus-visible {
-		@apply relative z-dropdown outline-none ring-2 ring-inset ring-focus-ring;
-	}
+  .rui-grid {
+    width: 100%;
+    overflow: hidden;
+    border-radius: var(--radius-container, var(--radius-container));
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border, var(--border));
+    font-size: var(--text-sm, var(--text-sm));
+    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+    --tw-shadow: var(--shadow-control);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    display: table;
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+  .rui-grid__row {
+    display: table-row;
+  }
+  .rui-grid__row:not(:first-child):hover .rui-grid__cell {
+    background-color: var(--color-surface, var(--surface));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-surface, var(--surface)) 60%, transparent);
+    }
+  }
+  .rui-grid__cell {
+    display: table-cell;
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--color-border, var(--border));
+    background-color: var(--color-background, var(--background));
+    padding-inline: var(--spacing-control-x, var(--space-control-x));
+    padding-block: calc(var(--spacing, 0.25rem) * 2.5);
+    vertical-align: middle;
+    color: var(--color-on-background, var(--on-background));
+  }
+  .rui-grid__row .rui-grid__cell:last-child {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0px;
+  }
+  .rui-grid__row:last-child .rui-grid__cell {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
+  .rui-grid__row:first-child .rui-grid__cell {
+    background-color: var(--color-surface, var(--surface));
+    --tw-font-weight: var(--font-weight-semibold, var(--weight-semibold));
+    font-weight: var(--font-weight-semibold, var(--weight-semibold));
+    color: var(--color-on-background, var(--on-background));
+  }
+  .rui-grid__cell a {
+    --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
+    font-weight: var(--font-weight-medium, var(--weight-medium));
+    color: var(--color-link, var(--link));
+    text-decoration-line: none;
+    text-underline-offset: 2px;
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
+  .rui-grid__cell:focus-visible {
+    position: relative;
+    z-index: var(--z-index-dropdown, var(--z-dropdown));
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
+    --tw-outline-style: none;
+    outline-style: none;
+    --tw-ring-inset: inset;
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-font-weight: initial;
+    }
+  }
 }

package/dist/components/ui/input/input.css

@@ -1,32 +1,128 @@
-@reference '../../../styles/radiant-ui.css';
-
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 @layer components {
-	.rui-input {
-		@apply w-full border border-border bg-background text-on-background outline-none;
-		border-radius: var(--radius-control);
-		padding-inline: var(--space-control-x);
-		padding-block: var(--space-control-y);
-		font-size: var(--text-control, 0.875rem);
-		transition-duration: var(--duration-normal);
-	}
-
-	.rui-input:focus-visible {
-		@apply ring-2 ring-focus-ring;
-	}
-
-	.rui-input:disabled {
-		@apply cursor-not-allowed opacity-disabled;
-	}
-
-	.rui-input[aria-invalid='true'] {
-		@apply border-error;
-	}
-
-	.rui-input--sm {
-		padding-block: calc(var(--space-control-y) * 0.75);
-	}
-
-	.rui-input--lg {
-		padding-block: calc(var(--space-control-y) * 1.25);
-	}
+  .rui-input {
+    width: 100%;
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border, var(--border));
+    background-color: var(--color-background, var(--background));
+    color: var(--color-on-background, var(--on-background));
+    --tw-outline-style: none;
+    outline-style: none;
+    border-radius: var(--radius-control);
+    padding-inline: var(--space-control-x);
+    padding-block: var(--space-control-y);
+    font-size: var(--text-control, 0.875rem);
+    transition-duration: var(--duration-normal);
+  }
+  .rui-input:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
+  }
+  .rui-input:disabled {
+    cursor: not-allowed;
+    opacity: var(--opacity-disabled, var(--opacity-disabled));
+  }
+  .rui-input[aria-invalid='true'] {
+    border-color: var(--color-error, var(--error));
+  }
+  .rui-input--sm {
+    padding-block: calc(var(--space-control-y) * 0.75);
+  }
+  .rui-input--lg {
+    padding-block: calc(var(--space-control-y) * 1.25);
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
 }

package/dist/components/ui/label/label.css

@@ -1,8 +1,22 @@
-@reference '../../../styles/radiant-ui.css';
-
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 @layer components {
-	.rui-label {
-		@apply block font-medium text-on-background;
-		font-size: var(--text-control, 0.875rem);
-	}
+  .rui-label {
+    display: block;
+    --tw-font-weight: var(--font-weight-medium, var(--weight-medium));
+    font-weight: var(--font-weight-medium, var(--weight-medium));
+    color: var(--color-on-background, var(--on-background));
+    font-size: var(--text-control, 0.875rem);
+  }
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-font-weight: initial;
+    }
+  }
 }

package/dist/components/ui/listbox/listbox.css

@@ -1,23 +1,141 @@
-@reference '../../../styles/radiant-ui.css';
-
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
 rui-listbox {
-	@apply block;
+  display: block;
 }
-
 @layer components {
-	.rui-listbox {
-		@apply max-h-60 overflow-auto rounded-container border border-border bg-background p-1 rui-sheen;
-	}
-
-	.rui-listbox__option {
-		@apply cursor-pointer rounded-control px-3 py-2 text-sm;
-	}
-
-	.rui-listbox__option[aria-selected='true'] {
-		@apply bg-primary text-on-primary rui-sheen;
-	}
-
-	.rui-listbox__option:focus-visible {
-		@apply outline-none ring-2 ring-focus-ring;
-	}
+  .rui-listbox {
+    max-height: calc(var(--spacing, 0.25rem) * 60);
+    overflow: auto;
+    border-radius: var(--radius-container, var(--radius-container));
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border, var(--border));
+    background-color: var(--color-background, var(--background));
+    @media (forced-colors: active) {
+      background-image: none;
+    }
+    background-image: var(--sheen-image);
+    @media (forced-colors: active) {
+      background-image: none;
+    }
+    padding: var(--spacing-1, var(--space-1));
+  }
+  .rui-listbox__option {
+    cursor: pointer;
+    border-radius: var(--radius-control, var(--radius-control));
+    padding-inline: var(--spacing-3, var(--space-3));
+    padding-block: var(--spacing-2, var(--space-2));
+    font-size: var(--text-sm, var(--text-sm));
+    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  }
+  .rui-listbox__option[aria-selected='true'] {
+    background-color: var(--color-primary, var(--primary));
+    @media (forced-colors: active) {
+      background-image: none;
+    }
+    background-image: var(--sheen-image);
+    @media (forced-colors: active) {
+      background-image: none;
+    }
+    color: var(--color-on-primary, var(--on-primary));
+  }
+  .rui-listbox__option:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-focus-ring, var(--focus-ring));
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
 }

package/dist/components/ui/menu-button/index.js

@@ -1,2 +1,2 @@
-import{RadiantElement as f,bound as u,customElement as h,event as l,onEvent as o,onUpdated as b,prop as p,query as c}from"@ecopages/radiant";import{autoUpdate as T,computePosition as v,flip as R,offset as E,shift as y}from"@floating-ui/dom";var s=@h("rui-menu-button")class extends f{@p({type:Boolean,reflect:!0,defaultValue:!1})open;@p({type:String,defaultValue:"bottom-start"})placement;@c({ref:"trigger"})triggerTarget;@c({ref:"menu"})menuTarget;@l({name:"rui-change",bubbles:!0,composed:!0})changeEvent;@l({name:"rui-close",bubbles:!0,composed:!0})closeEvent;cleanup=null;menuId=`rui-menu-${Math.random().toString(36).slice(2,9)}`;connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.syncOpenState())}disconnectedCallback(){this.teardownFloating(),super.disconnectedCallback()}getItems(){return Array.from(this.menuTarget?.querySelectorAll('[role="menuitem"]')??[]).filter(e=>e.getAttribute("aria-disabled")!=="true")}teardownFloating(){this.cleanup?.(),this.cleanup=null}@u updatePosition(){!this.triggerTarget||!this.menuTarget||!this.open||v(this.triggerTarget,this.menuTarget,{placement:this.placement,middleware:[E(6),R(),y({padding:8})]}).then(({x:e,y:t})=>{Object.assign(this.menuTarget.style,{left:`${e}px`,top:`${t}px`})})}pendingFocus=null;@u@b(["open","placement"])syncOpenState(){if(!this.triggerTarget||!this.menuTarget)return;this.menuTarget.id=this.menuId,this.triggerTarget.setAttribute("aria-controls",this.menuId),this.triggerTarget.setAttribute("aria-haspopup","menu"),this.triggerTarget.setAttribute("aria-expanded",String(this.open)),this.menuTarget.hidden=!this.open,this.open?(this.teardownFloating(),this.cleanup=T(this.triggerTarget,this.menuTarget,this.updatePosition),this.updatePosition()):this.teardownFloating();let e=this.pendingFocus;if(this.pendingFocus=null,!!e){if(e==="first"&&this.getItems()[0]?.focus(),e==="last"){let t=this.getItems();t[t.length-1]?.focus()}e==="trigger"&&this.triggerTarget?.focus()}}setOpen(e,t=null){let n=this.open;this.pendingFocus=t,this.open=e,n&&!e&&this.closeEvent.emit(),n===e&&this.syncOpenState()}@o({document:!0,type:"click"})onDocumentClick(e){if(!this.open)return;let t=e.target;this.triggerTarget?.contains(t)||this.menuTarget?.contains(t)||this.setOpen(!1)}@o({ref:"trigger",type:"click"})onTriggerClick(){this.setOpen(!this.open,this.open?null:"first")}@o({ref:"trigger",type:"keydown"})onTriggerKeydown(e){switch(e.key){case"ArrowDown":case"Enter":case" ":e.preventDefault(),this.setOpen(!0,"first");break;case"ArrowUp":e.preventDefault(),this.setOpen(!0,"last");break;default:break}}@o({ref:"menu",type:"keydown"})onMenuKeydown(e){let t=this.getItems(),n=document.activeElement,a=n?t.indexOf(n):-1;switch(e.key){case"ArrowDown":{e.preventDefault(),t[(a+1)%t.length]?.focus();break}case"ArrowUp":{e.preventDefault(),t[(a-1+t.length)%t.length]?.focus();break}case"Home":e.preventDefault(),t[0]?.focus();break;case"End":e.preventDefault(),t[t.length-1]?.focus();break;case"Escape":e.preventDefault(),this.setOpen(!1,"trigger");break;case"Tab":this.setOpen(!1);break;case"Enter":case" ":n&&t.includes(n)&&(e.preventDefault(),this.activateItem(n));break;default:break}}@o({selector:'[role="menuitem"]',type:"click"})onItemClick(e){let t=e.target.closest('[role="menuitem"]');!t||!this.contains(t)||this.activateItem(t)}activateItem(e){let t=e.getAttribute("data-value")||e.textContent?.trim()||"";this.changeEvent.emit({value:t}),this.setOpen(!1,"trigger")}render(){return React.createElement("div",{class:"rui-menu-button"},React.createElement("button",{type:"button","data-ref":"trigger",class:"rui-button rui-button--primary rui-button--md rui-menu-button__trigger","aria-haspopup":"menu","aria-expanded":"false"},React.createElement("slot",{name:"trigger"}),React.createElement("span",{class:"rui-menu-button__chevron","aria-hidden":"true"})),React.createElement("div",{"data-ref":"menu",class:"rui-menu-button__menu",role:"menu",hidden:!0},React.createElement("slot",null)))}};var A=Symbol.for("@ecopages/storybook-radiant.viewElement"),m=Symbol.for("@ecopages/storybook-radiant.scriptModule"),d=Symbol.for("@ecopages/storybook-radiant.scriptExport");function M(r,e){r[A]=e;let t=e[m];t&&(r[m]=t,r[d]=e[d]??e.name)}function g(r,e){let t=(n=>e(n));return M(t,r),t}import"./menu-button.css";var I=g(s,({slot:r,open:e,placement:t,trigger:n,items:a})=>React.createElement("rui-menu-button",{slot:r,open:e,placement:t},React.createElement("span",{slot:"trigger"},n),a.map(i=>React.createElement("button",{type:"button",class:"rui-menu-button__item",role:"menuitem","data-value":i.value,"aria-disabled":i.disabled?"true":void 0,tabindex:-1},i.label))));export{I as RuiMenuButton,s as RuiMenuButtonElement};
+import{RadiantElement as O,bound as D,customElement as _,event as v,onEvent as l,onUpdated as L,prop as y,query as R}from"@ecopages/radiant";var A={top:"bottom",bottom:"top",left:"right",right:"left"},S=8;function F(e){let t=e.indexOf("-");if(t===-1)return{side:e,align:"center"};let n=e.slice(0,t),r=e.slice(t+1);return{side:n,align:r==="start"||r==="end"?r:"center"}}function h(e){return e==="top"||e==="bottom"?"y":"x"}function g(e,t,n,r,i){let{width:o,height:a}=t,s=0,u=0;switch(n){case"top":u=e.top-a-i;break;case"bottom":u=e.bottom+i;break;case"left":s=e.left-o-i;break;case"right":s=e.right+i;break}return h(n)==="y"?r==="start"?s=e.left:r==="end"?s=e.right-o:s=e.left+(e.width-o)/2:r==="start"?u=e.top:r==="end"?u=e.bottom-a:u=e.top+(e.height-a)/2,{x:s,y:u}}function C(e,t,n,r){let{padding:i,width:o,height:a}=r;return n==="top"?Math.max(0,i-e.y):n==="bottom"?Math.max(0,e.y+t.height-(a-i)):n==="left"?Math.max(0,i-e.x):Math.max(0,e.x+t.width-(o-i))}function f(e,t,n,r){let{padding:i,width:o,height:a}=r;return n==="top"?e.top-i-t.height:n==="bottom"?a-i-t.height-e.bottom:n==="left"?e.left-i-t.width:o-i-t.width-e.right}function I(e,t,n,r){let{padding:i,width:o,height:a}=r;if(h(n)==="y"){let u=Math.max(i,o-i-t.width);return{x:Math.min(Math.max(e.x,i),u),y:e.y}}let s=Math.max(i,a-i-t.height);return{x:e.x,y:Math.min(Math.max(e.y,i),s)}}function P(e,t,n,r,i={width:typeof window>"u"?0:window.innerWidth,height:typeof window>"u"?0:window.innerHeight,padding:S}){let{side:o,align:a}=F(n),s=g(e,t,o,a,r),u=C(s,t,o,i),m=o,c=s;if(u>0){let d=A[o],x=g(e,t,d,a,r),M=f(e,t,o,i);f(e,t,d,i)>M&&(m=d,c=x)}return I(c,t,m,i)}function k(e,t,n,r){let i=P(e.getBoundingClientRect(),{width:t.offsetWidth,height:t.offsetHeight},n,r);Object.assign(t.style,{position:"fixed",left:`${i.x}px`,top:`${i.y}px`,right:"auto",bottom:"auto",visibility:"visible"})}function b({anchor:e,floating:t,getPlacement:n,gap:r}){let i=()=>{t.hidden||k(e,t,n(),r)};i(),window.addEventListener("resize",i),window.addEventListener("scroll",i,!0);let o=new ResizeObserver(i);return o.observe(e),o.observe(t),()=>{window.removeEventListener("resize",i),window.removeEventListener("scroll",i,!0),o.disconnect()}}var V=6,p=@_("rui-menu-button")class extends O{@y({type:Boolean,reflect:!0,defaultValue:!1})open;@y({type:String,defaultValue:"bottom-start"})placement;@R({ref:"trigger"})triggerTarget;@R({ref:"menu"})menuTarget;@v({name:"rui-change",bubbles:!0,composed:!0})changeEvent;@v({name:"rui-close",bubbles:!0,composed:!0})closeEvent;menuId=`rui-menu-${Math.random().toString(36).slice(2,9)}`;cleanupFloating=null;pendingFocus=null;connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.syncOpenState())}disconnectedCallback(){this.teardownFloating(),super.disconnectedCallback()}getItems(){return Array.from(this.menuTarget?.querySelectorAll('[role="menuitem"]')??[]).filter(t=>t.getAttribute("aria-disabled")!=="true")}teardownFloating(){this.cleanupFloating?.(),this.cleanupFloating=null}attachFloating(){!this.triggerTarget||!this.menuTarget||(this.teardownFloating(),this.cleanupFloating=b({anchor:this.triggerTarget,floating:this.menuTarget,getPlacement:()=>this.placement,gap:V}))}@D@L(["open","placement"])syncOpenState(){if(!this.triggerTarget||!this.menuTarget)return;this.menuTarget.id=this.menuId,this.triggerTarget.setAttribute("aria-controls",this.menuId),this.triggerTarget.setAttribute("aria-haspopup","menu"),this.triggerTarget.setAttribute("aria-expanded",String(this.open)),this.menuTarget.hidden=!this.open,this.open?this.attachFloating():this.teardownFloating();let t=this.pendingFocus;if(this.pendingFocus=null,!!t){if(t==="first"&&this.getItems()[0]?.focus(),t==="last"){let n=this.getItems();n[n.length-1]?.focus()}t==="trigger"&&this.triggerTarget?.focus()}}setOpen(t,n=null){let r=this.open;this.pendingFocus=n,this.open=t,r&&!t&&this.closeEvent.emit(),r===t&&this.syncOpenState()}@l({document:!0,type:"click"})onDocumentClick(t){if(!this.open)return;let n=t.target;this.triggerTarget?.contains(n)||this.menuTarget?.contains(n)||this.setOpen(!1)}@l({ref:"trigger",type:"click"})onTriggerClick(){this.setOpen(!this.open,this.open?null:"first")}@l({ref:"trigger",type:"keydown"})onTriggerKeydown(t){switch(t.key){case"ArrowDown":case"Enter":case" ":t.preventDefault(),this.setOpen(!0,"first");break;case"ArrowUp":t.preventDefault(),this.setOpen(!0,"last");break;default:break}}@l({ref:"menu",type:"keydown"})onMenuKeydown(t){let n=this.getItems(),r=document.activeElement,i=r?n.indexOf(r):-1;switch(t.key){case"ArrowDown":{t.preventDefault(),n[(i+1)%n.length]?.focus();break}case"ArrowUp":{t.preventDefault(),n[(i-1+n.length)%n.length]?.focus();break}case"Home":t.preventDefault(),n[0]?.focus();break;case"End":t.preventDefault(),n[n.length-1]?.focus();break;case"Escape":t.preventDefault(),this.setOpen(!1,"trigger");break;case"Tab":this.setOpen(!1);break;case"Enter":case" ":r&&n.includes(r)&&(t.preventDefault(),this.activateItem(r));break;default:break}}@l({selector:'[role="menuitem"]',type:"click"})onItemClick(t){let n=t.target.closest('[role="menuitem"]');!n||!this.contains(n)||this.activateItem(n)}activateItem(t){let n=t.getAttribute("data-value")||t.textContent?.trim()||"";this.changeEvent.emit({value:n}),this.setOpen(!1,"trigger")}render(){return React.createElement("div",{class:"rui-menu-button"},React.createElement("button",{type:"button","data-ref":"trigger",class:"rui-button rui-button--primary rui-button--md rui-menu-button__trigger","aria-haspopup":"menu","aria-expanded":"false"},React.createElement("slot",{name:"trigger"}),React.createElement("span",{class:"rui-menu-button__chevron","aria-hidden":"true"})),React.createElement("div",{"data-ref":"menu",class:"rui-menu-button__menu rui-floating",role:"menu",hidden:!0},React.createElement("slot",null)))}};var B=Symbol.for("@ecopages/storybook-radiant.viewElement"),T=Symbol.for("@ecopages/storybook-radiant.scriptModule"),E=Symbol.for("@ecopages/storybook-radiant.scriptExport");function H(e,t){e[B]=t;let n=t[T];n&&(e[T]=n,e[E]=t[E]??t.name)}function w(e,t){let n=(r=>t(r));return H(n,e),n}import"./menu-button.css";var N=w(p,({slot:e,open:t,placement:n,trigger:r,items:i})=>React.createElement("rui-menu-button",{slot:e,open:t,placement:n},React.createElement("span",{slot:"trigger"},r),i.map(o=>React.createElement("button",{type:"button",class:"rui-menu-button__item",role:"menuitem","data-value":o.value,"aria-disabled":o.disabled?"true":void 0,tabindex:-1},o.label))));export{N as RuiMenuButton,p as RuiMenuButtonElement};
 //# sourceMappingURL=index.js.map