@rarui/components 1.30.1 → 1.30.2

package/CHANGELOG.md

@@ -2,7 +2,19 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
-## 2025-10-20 `1.31.0`
+## 2025-11-06 `1.30.2`
+
+#### 🎉 New features
+
+- **KeyboardNavigationMixin**: Added standardized keyboard navigation mixin for consistent keyboard interaction patterns across web components. Implements WAI-ARIA keyboard patterns (Enter/Space activation, Arrow navigation, Escape close) through reusable mixin architecture with `KeyboardNavigationBehavior` interface. ([#147](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/147) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🐛 Bug fixes
+
+- **RadioButton Form Integration**: Fixed RadioButton component not sending form value when loaded with default selected state. Added proper form value initialization in `connectedCallback()` and reactive form value updates when `selected` property changes via `updated()` lifecycle method. ([#147](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/147) by [@junior](https://git.rarolabs.com.br/junior))
+- **Select Keyboard Navigation**: Fixed Select component not opening dropdown with Enter/Space key navigation. Implemented proper keyboard event handling using new KeyboardNavigationMixin with support for Enter/Space (toggle), Arrow keys (open), and Escape (close) following accessibility standards. ([#147](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/147) by [@junior](https://git.rarolabs.com.br/junior))
+- **Banner Event Handling**: Enhanced Banner component event handling and accessibility improvements with better focus management and semantic interaction patterns. ([#147](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/147) by [@junior](https://git.rarolabs.com.br/junior))
+
+## 2025-10-20 `1.30.1`
 
 #### 🎉 New features
 

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.30.0",
+  "version": "1.30.1",
   "tags": [
     {
       "name": "rarui-avatar",

package/dist/index.d.ts

@@ -19588,6 +19588,7 @@ declare class RaruiRadioButton extends RaruiRadioButton_base {
     static formAssociated: boolean;
     constructor();
     connectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
     disconnectedCallback(): void;
     static styles: CSSResult;
     render(): TemplateResult<1>;
@@ -19599,6 +19600,38 @@ declare class RaruiRadioButton extends RaruiRadioButton_base {
     formResetCallback(): void;
 }
 
+/**
+ * Interface for keyboard navigation behavior
+ */
+interface KeyboardNavigationBehavior {
+    /**
+     * Called when Enter or Space key is pressed
+     */
+    handleActivation?(): void;
+    /**
+     * Called when arrow keys are pressed
+     * @param key - The arrow key pressed ('ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight')
+     */
+    handleArrowNavigation?(key: string): void;
+    /**
+     * Called when Escape key is pressed
+     */
+    handleEscape?(): void;
+    /**
+     * Called when Home key is pressed
+     */
+    handleHome?(): void;
+    /**
+     * Called when End key is pressed
+     */
+    handleEnd?(): void;
+    /**
+     * Called when Tab key is pressed
+     * @param event - The keyboard event (in case you need to prevent default)
+     */
+    handleTab?(event: KeyboardEvent): void;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-select": RaruiSelect;
@@ -19654,6 +19687,8 @@ type SelectManifestProperties = Omit<SelectProps, "onChange" | "portalId" | "opt
 type SelectProperties = WebComponentProperties<SelectManifestProperties>;
 
 declare const RaruiSelect_base: (new (...args: any[]) => {
+    handleKeydown(event: KeyboardEvent): void;
+}) & (new (...args: any[]) => {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
@@ -19661,7 +19696,7 @@ declare const RaruiSelect_base: (new (...args: any[]) => {
     cssProps: Record<string, any>;
     sprinkleAttrs: Record<string, any>;
 }) & typeof LitElement;
-declare class RaruiSelect extends RaruiSelect_base {
+declare class RaruiSelect extends RaruiSelect_base implements KeyboardNavigationBehavior {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -19717,6 +19752,9 @@ declare class RaruiSelect extends RaruiSelect_base {
     private _handleOptionUnmount;
     private _updateContext;
     private handleSelectClick;
+    handleActivation(): void;
+    handleArrowNavigation(key: string): void;
+    handleEscape(): void;
     render(): TemplateResult<1>;
     private _renderTrigger;
     private _renderPlaceholder;

package/dist/index.js

@@ -459,7 +459,7 @@ const po=Symbol.for(""),mo=r=>{if(r?.r===po)return r?._$litStatic$},wo=r=>({_$li
       </button>
     `}};Xa.shadowRootOptions={...er.shadowRootOptions,delegatesFocus:!0},Xa.styles=t`
     ${e(".rarui-chip__1rk47pp0 {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: fit-content;\n  box-sizing: border-box;\n  position: relative;\n  border-style: solid;\n  transition: all 150ms ease;\n  overflow: hidden;\n  gap: var(--rarui-spacing-3xs);\n  font-weight: var(--rarui-fontWeight-medium);\n  font-family: var(--rarui-fontFamily-body);\n  border-width: var(--rarui-shape-border-width-1);\n  border-radius: var(--rarui-shape-border-radius-2xs);\n  border-color: var(--rarui-colors-border-subdued);\n  background-color: var(--rarui-colors-surface-primary);\n  color: var(--rarui-colors-content-primary);\n}\n.rarui-chip__1rk47pp0:focus-within {\n  outline: none;\n  box-shadow: var(--rarui-elevation-focus-ring);\n}\n.rarui-chip__1rk47pp0:hover {\n  background-color: var(--rarui-colors-surface-brand-hover);\n  border-color: var(--rarui-colors-border-brand);\n}\n.rarui-chip__1rk47pp0:active {\n  background-color: var(--rarui-colors-surface-brand-press);\n}\n.rarui-chip__1rk47pp0:disabled {\n  background: var(--rarui-colors-surface-disabled);\n  border-color: var(--rarui-colors-border-disabled);\n  color: var(--rarui-colors-content-disabled);\n  cursor: not-allowed;\n  box-shadow: none;\n}\n.rarui-chip_pill_true__1rk47pp1 {\n  border-radius: var(--rarui-shape-border-radius-pill);\n}\n.rarui-chip_selected_true__1rk47pp2 {\n  border-color: var(--rarui-colors-surface-brand);\n  background-color: var(--rarui-colors-surface-brand);\n  color: var(--rarui-colors-content-on-brand);\n}\n.rarui-chip_selected_true__1rk47pp2:hover {\n  background-color: var(--rarui-colors-surface-brand);\n}\n.rarui-chip_size_medium__1rk47pp3 {\n  line-height: var(--rarui-lineHeight-button-m);\n  font-size: var(--rarui-fontSize-button-m);\n  height: 2rem;\n}\n.rarui-chip_size_small__1rk47pp4 {\n  line-height: var(--rarui-lineHeight-button-s);\n  font-size: var(--rarui-fontSize-button-s);\n  height: 1.5rem;\n}\n.rarui-chip_textOverflow_true__1rk47pp5 {\n  min-width: auto;\n  width: 100%;\n}\n.rarui-chip_content__1rk47pp6 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--rarui-spacing-3xs);\n}\n.rarui-chip_content_textOverflow_true__1rk47pp7 {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n  display: block;\n  overflow: hidden;\n}\n.rarui-chip_close__1rk47pp8 {\n  transition: all 150ms ease;\n  color: var(--rarui-colors-content-secondary);\n  border-radius: var(--rarui-shape-border-radius-pill);\n}\n.rarui-chip_close__1rk47pp8:focus-within {\n  outline: none;\n  box-shadow: var(--rarui-elevation-focus-ring);\n}\n.rarui-chip_close__1rk47pp8:hover {\n  color: var(--rarui-colors-content-primary);\n}\n.rarui-chip_close__1rk47pp8[aria-disabled='true'] {\n  color: var(--rarui-colors-content-disabled);\n  box-shadow: none;\n}\n.rarui-chip_overlay__1rk47pp9 {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.rarui-chip__1rk47pp0 .rarui-chip_size_medium__1rk47pp3:hover .rarui-chip_overlay__1rk47pp9 {\n  border-color: var(--rarui-colors-surface-hover);\n}\n.rarui-chip__1rk47pp0 .rarui-chip_size_medium__1rk47pp3:active .rarui-chip_overlay__1rk47pp9 {\n  opacity: 1;\n  background-color: var(--rarui-colors-surface-press);\n  border-color: var(--rarui-colors-surface-press);\n}\n.rarui-chip__1rk47pp0 .rarui-chip_size_medium__1rk47pp3:disabled .rarui-chip_overlay__1rk47pp9 {\n  opacity: 0;\n}\n@media screen and (min-width: 0px) {\n  .rarui-chip_textTransform-xs__1rk47ppe {\n    text-transform: var(--textTransform-xs__1rk47ppa);\n  }\n  .rarui-chip_padding-medium-xs__1rk47ppi {\n    padding: 0 var(--rarui-spacing-xs);\n  }\n  .rarui-chip_padding-small-xs__1rk47ppm {\n    padding: 0 var(--rarui-spacing-4xs);\n  }\n}\n@media screen and (min-width: 768px) {\n  .rarui-chip_textTransform-md__1rk47ppf {\n    text-transform: var(--textTransform-md__1rk47ppb);\n  }\n  .rarui-chip_padding-medium-md__1rk47ppj {\n    padding: 0 var(--rarui-spacing-xs);\n  }\n  .rarui-chip_padding-small-md__1rk47ppn {\n    padding: 0 var(--rarui-spacing-4xs);\n  }\n}\n@media screen and (min-width: 1200px) {\n  .rarui-chip_textTransform-lg__1rk47ppg {\n    text-transform: var(--textTransform-lg__1rk47ppc);\n  }\n  .rarui-chip_padding-medium-lg__1rk47ppk {\n    padding: 0 var(--rarui-spacing-xs);\n  }\n  .rarui-chip_padding-small-lg__1rk47ppo {\n    padding: 0 var(--rarui-spacing-4xs);\n  }\n}\n@media screen and (min-width: 1400px) {\n  .rarui-chip_textTransform-xl__1rk47pph {\n    text-transform: var(--textTransform-xl__1rk47ppd);\n  }\n  .rarui-chip_padding-medium-xl__1rk47ppl {\n    padding: 0 var(--rarui-spacing-xs);\n  }\n  .rarui-chip_padding-small-xl__1rk47ppp {\n    padding: 0 var(--rarui-spacing-4xs);\n  }\n}")}
-  `,r([fr({type:String})],Xa.prototype,"padding",void 0),r([fr({type:String})],Xa.prototype,"size",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"closeable",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"pill",void 0),r([fr({type:String,attribute:"text-transform"})],Xa.prototype,"textTransform",void 0),r([fr({type:Boolean,attribute:"text-overflow"})],Xa.prototype,"textOverflow",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"selected",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"disabled",void 0),r([fr({type:String})],Xa.prototype,"type",void 0),r([fr({type:String})],Xa.prototype,"name",void 0),r([fr({type:String})],Xa.prototype,"value",void 0),r([fr({type:String})],Xa.prototype,"form",void 0),r([fr({type:String,reflect:!0,attribute:"aria-pressed"})],Xa.prototype,"ariaPressed",void 0),Xa=r([_r("rarui-chip")],Xa);var Ya=".rarui-dropdown__1b7gjg50 {\n  width: fit-content;\n  display: flex;\n  flex-direction: column;\n  border-style: solid;\n  box-sizing: border-box;\n  gap: var(--rarui-spacing-3xs);\n  z-index: var(--rarui-zIndex-800);\n  border-radius: var(--rarui-shape-border-radius-2xs);\n  padding: var(--rarui-spacing-3xs);\n  box-shadow: var(--rarui-elevation-bottom-2);\n  border-width: var(--rarui-shape-border-width-1);\n  border-color: var(--rarui-colors-border-subdued);\n  background-color: var(--rarui-colors-surface-primary);\n}\n.rarui-dropdown_padding_base__1b7gjg51 {\n  padding: var(--rarui-spacing-3xs);\n}\n.rarui-dropdown_padding_none__1b7gjg52 {\n  padding: 0;\n}\n.rarui-dropdown_item__1b7gjg53 {\n  display: flex;\n  justify-content: space-between;\n  cursor: pointer;\n  background-color: transparent;\n  border: none;\n  width: 100%;\n  box-sizing: border-box;\n  transition: all 150ms ease;\n  border-radius: var(--rarui-shape-border-radius-2xs);\n  gap: var(--rarui-spacing-3xs);\n  padding: var(--rarui-spacing-3xs);\n  color: var(--rarui-colors-content-primary);\n  font-weight: var(--rarui-fontWeight-medium);\n  font-size: var(--rarui-fontSize-button-s);\n  font-family: var(--rarui-fontFamily-button);\n  text-decoration: none;\n}\n.rarui-dropdown_item__1b7gjg53:focus-within {\n  outline: none;\n  box-shadow: var(--rarui-elevation-focus-ring);\n}\n.rarui-dropdown_item__1b7gjg53:hover {\n  background-color: var(--rarui-colors-surface-hover);\n}\n.rarui-dropdown_item__1b7gjg53:active {\n  background-color: var(--rarui-colors-surface-press);\n}\n.rarui-dropdown_item__1b7gjg53:disabled {\n  color: var(--rarui-colors-content-disabled);\n}\n.rarui-dropdown_item_selected_true__1b7gjg54 {\n  background-color: var(--rarui-colors-surface-brand-subdued);\n}\n.rarui-dropdown_item_selected_true__1b7gjg54:hover {\n  background-color: var(--rarui-colors-surface-brand-subdued);\n}\n@media screen and (min-width: 0px) {\n  .rarui-dropdown_width-xs__1b7gjg59 {\n    width: var(--width-xs__1b7gjg55);\n  }\n  .rarui-dropdown_maxWidth-xs__1b7gjg5h {\n    max-width: var(--maxWidth-xs__1b7gjg5d);\n  }\n  .rarui-dropdown_zIndex-100-xs__1b7gjg5l {\n    z-index: var(--rarui-zIndex-100);\n  }\n  .rarui-dropdown_zIndex-200-xs__1b7gjg5p {\n    z-index: var(--rarui-zIndex-200);\n  }\n  .rarui-dropdown_zIndex-300-xs__1b7gjg5t {\n    z-index: var(--rarui-zIndex-300);\n  }\n  .rarui-dropdown_zIndex-400-xs__1b7gjg5x {\n    z-index: var(--rarui-zIndex-400);\n  }\n  .rarui-dropdown_zIndex-500-xs__1b7gjg511 {\n    z-index: var(--rarui-zIndex-500);\n  }\n  .rarui-dropdown_zIndex-600-xs__1b7gjg515 {\n    z-index: var(--rarui-zIndex-600);\n  }\n  .rarui-dropdown_zIndex-700-xs__1b7gjg519 {\n    z-index: var(--rarui-zIndex-700);\n  }\n  .rarui-dropdown_zIndex-800-xs__1b7gjg51d {\n    z-index: var(--rarui-zIndex-800);\n  }\n  .rarui-dropdown_zIndex-900-xs__1b7gjg51h {\n    z-index: var(--rarui-zIndex-900);\n  }\n}\n@media screen and (min-width: 768px) {\n  .rarui-dropdown_width-md__1b7gjg5a {\n    width: var(--width-md__1b7gjg56);\n  }\n  .rarui-dropdown_maxWidth-md__1b7gjg5i {\n    max-width: var(--maxWidth-md__1b7gjg5e);\n  }\n  .rarui-dropdown_zIndex-100-md__1b7gjg5m {\n    z-index: var(--rarui-zIndex-100);\n  }\n  .rarui-dropdown_zIndex-200-md__1b7gjg5q {\n    z-index: var(--rarui-zIndex-200);\n  }\n  .rarui-dropdown_zIndex-300-md__1b7gjg5u {\n    z-index: var(--rarui-zIndex-300);\n  }\n  .rarui-dropdown_zIndex-400-md__1b7gjg5y {\n    z-index: var(--rarui-zIndex-400);\n  }\n  .rarui-dropdown_zIndex-500-md__1b7gjg512 {\n    z-index: var(--rarui-zIndex-500);\n  }\n  .rarui-dropdown_zIndex-600-md__1b7gjg516 {\n    z-index: var(--rarui-zIndex-600);\n  }\n  .rarui-dropdown_zIndex-700-md__1b7gjg51a {\n    z-index: var(--rarui-zIndex-700);\n  }\n  .rarui-dropdown_zIndex-800-md__1b7gjg51e {\n    z-index: var(--rarui-zIndex-800);\n  }\n  .rarui-dropdown_zIndex-900-md__1b7gjg51i {\n    z-index: var(--rarui-zIndex-900);\n  }\n}\n@media screen and (min-width: 1200px) {\n  .rarui-dropdown_width-lg__1b7gjg5b {\n    width: var(--width-lg__1b7gjg57);\n  }\n  .rarui-dropdown_maxWidth-lg__1b7gjg5j {\n    max-width: var(--maxWidth-lg__1b7gjg5f);\n  }\n  .rarui-dropdown_zIndex-100-lg__1b7gjg5n {\n    z-index: var(--rarui-zIndex-100);\n  }\n  .rarui-dropdown_zIndex-200-lg__1b7gjg5r {\n    z-index: var(--rarui-zIndex-200);\n  }\n  .rarui-dropdown_zIndex-300-lg__1b7gjg5v {\n    z-index: var(--rarui-zIndex-300);\n  }\n  .rarui-dropdown_zIndex-400-lg__1b7gjg5z {\n    z-index: var(--rarui-zIndex-400);\n  }\n  .rarui-dropdown_zIndex-500-lg__1b7gjg513 {\n    z-index: var(--rarui-zIndex-500);\n  }\n  .rarui-dropdown_zIndex-600-lg__1b7gjg517 {\n    z-index: var(--rarui-zIndex-600);\n  }\n  .rarui-dropdown_zIndex-700-lg__1b7gjg51b {\n    z-index: var(--rarui-zIndex-700);\n  }\n  .rarui-dropdown_zIndex-800-lg__1b7gjg51f {\n    z-index: var(--rarui-zIndex-800);\n  }\n  .rarui-dropdown_zIndex-900-lg__1b7gjg51j {\n    z-index: var(--rarui-zIndex-900);\n  }\n}\n@media screen and (min-width: 1400px) {\n  .rarui-dropdown_width-xl__1b7gjg5c {\n    width: var(--width-xl__1b7gjg58);\n  }\n  .rarui-dropdown_maxWidth-xl__1b7gjg5k {\n    max-width: var(--maxWidth-xl__1b7gjg5g);\n  }\n  .rarui-dropdown_zIndex-100-xl__1b7gjg5o {\n    z-index: var(--rarui-zIndex-100);\n  }\n  .rarui-dropdown_zIndex-200-xl__1b7gjg5s {\n    z-index: var(--rarui-zIndex-200);\n  }\n  .rarui-dropdown_zIndex-300-xl__1b7gjg5w {\n    z-index: var(--rarui-zIndex-300);\n  }\n  .rarui-dropdown_zIndex-400-xl__1b7gjg510 {\n    z-index: var(--rarui-zIndex-400);\n  }\n  .rarui-dropdown_zIndex-500-xl__1b7gjg514 {\n    z-index: var(--rarui-zIndex-500);\n  }\n  .rarui-dropdown_zIndex-600-xl__1b7gjg518 {\n    z-index: var(--rarui-zIndex-600);\n  }\n  .rarui-dropdown_zIndex-700-xl__1b7gjg51c {\n    z-index: var(--rarui-zIndex-700);\n  }\n  .rarui-dropdown_zIndex-800-xl__1b7gjg51g {\n    z-index: var(--rarui-zIndex-800);\n  }\n  .rarui-dropdown_zIndex-900-xl__1b7gjg51k {\n    z-index: var(--rarui-zIndex-900);\n  }\n}";let Ka=class extends(yr(kr(er))){constructor(){super(...arguments),this.offset=10,this.position="bottom-start",this.strategy="fixed",this.enabledClick=!0,this.enabledDismiss=!0,this.open=this.visible??!1,this._hasVisibleAttribute=!1,this.updatePositionDebounceId=null,this.handleClickOutside=r=>{if(!this.enabledDismiss||!this.open)return;const i=r.composedPath();i.includes(this)||i.includes(this.floating)||this.closeDropdown("click-outside")},this.handleKeyDown=r=>{"Escape"===r.key&&this.open&&this.enabledDismiss&&(r.preventDefault(),r.stopPropagation(),this.closeDropdown("escape-key"))},this.handleClick=()=>{if(this.enabledClick){const r=!this.open;if(this._hasVisibleAttribute){const i=r?"click-open":"click-close";this.dispatchEvent(new CustomEvent("dropdown-visibility-change",{detail:{visible:r,reason:i},bubbles:!0,composed:!0}))}else this.open=r}},this.handleReferenceKeydown=r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),this.handleClick())}}set visible(r){const i=this._visible;this._visible=r,this.requestUpdate("visible",i),this._hasVisibleAttribute=void 0!==r,void 0!==r&&(this.open=r)}get visible(){return this._visible}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleClickOutside,!0),document.addEventListener("keydown",this.handleKeyDown,!0),this.updateComplete.then((()=>{this._hasVisibleAttribute=void 0!==this._visible}))}attributeChangedCallback(r,i,o){super.attributeChangedCallback(r,i,o)}disconnectedCallback(){super.disconnectedCallback(),this.cleanupAutoUpdate&&this.cleanupAutoUpdate(),document.removeEventListener("click",this.handleClickOutside,!0),document.removeEventListener("keydown",this.handleKeyDown,!0)}updated(r){r.has("open")&&(this._hasVisibleAttribute||this.dispatchEvent(new CustomEvent("dropdown-visibility-change",{detail:{visible:this.open,reason:"programmatic"},bubbles:!0,composed:!0})),this.open&&this.scheduleUpdatePosition()),r.has("visible")&&this._hasVisibleAttribute&&void 0!==this._visible&&(this.open=this._visible)}scheduleUpdatePosition(){this.updatePositionDebounceId&&cancelAnimationFrame(this.updatePositionDebounceId),this.updatePositionDebounceId=requestAnimationFrame((()=>{this.updatePosition()}))}closeDropdown(r="close"){this._hasVisibleAttribute?this.dispatchEvent(new CustomEvent("dropdown-visibility-change",{detail:{visible:!1,reason:r},bubbles:!0,composed:!0})):this.open=!1}async updatePosition(){await this.updateComplete,this.reference instanceof HTMLElement&&this.floating instanceof HTMLElement&&(this.cleanupAutoUpdate?.(),this.cleanupAutoUpdate=La(this.reference,this.floating,(()=>this.computePosition()),{animationFrame:!0}),await this.computePosition())}getMiddleware(){return[ja(this.offset),Ha(),this.enabledFlip&&$a({crossAxis:this?.position?.includes("-"),fallbackAxisSideDirection:"end",padding:5}),this.matchReferenceWidth&&Ia({apply({rects:r,elements:i}){Object.assign(i.floating.style,{width:`${r.reference.width}px`})}})].filter(Boolean)}async computePosition(){if(!(this.reference instanceof HTMLElement&&this.floating instanceof HTMLElement))return;const r=this.getMiddleware(),{x:i,y:o}=await Ma(this.reference,this.floating,{placement:this.position,middleware:r,strategy:this.strategy});Object.assign(this.floating.style,{position:this.strategy,left:`${i}px`,top:`${o}px`})}render(){const{className:r,style:i}=Xi.sprinkle(this.sprinkleAttrs);return console.log("this._hasVisibleAttribute",this._hasVisibleAttribute),O`
+  `,r([fr({type:String})],Xa.prototype,"padding",void 0),r([fr({type:String})],Xa.prototype,"size",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"closeable",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"pill",void 0),r([fr({type:String,attribute:"text-transform"})],Xa.prototype,"textTransform",void 0),r([fr({type:Boolean,attribute:"text-overflow"})],Xa.prototype,"textOverflow",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"selected",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"disabled",void 0),r([fr({type:String})],Xa.prototype,"type",void 0),r([fr({type:String})],Xa.prototype,"name",void 0),r([fr({type:String})],Xa.prototype,"value",void 0),r([fr({type:String})],Xa.prototype,"form",void 0),r([fr({type:String,reflect:!0,attribute:"aria-pressed"})],Xa.prototype,"ariaPressed",void 0),Xa=r([_r("rarui-chip")],Xa);var Ya=".rarui-dropdown__1b7gjg50 {\n  width: fit-content;\n  display: flex;\n  flex-direction: column;\n  border-style: solid;\n  box-sizing: border-box;\n  gap: var(--rarui-spacing-3xs);\n  z-index: var(--rarui-zIndex-800);\n  border-radius: var(--rarui-shape-border-radius-2xs);\n  padding: var(--rarui-spacing-3xs);\n  box-shadow: var(--rarui-elevation-bottom-2);\n  border-width: var(--rarui-shape-border-width-1);\n  border-color: var(--rarui-colors-border-subdued);\n  background-color: var(--rarui-colors-surface-primary);\n}\n.rarui-dropdown_padding_base__1b7gjg51 {\n  padding: var(--rarui-spacing-3xs);\n}\n.rarui-dropdown_padding_none__1b7gjg52 {\n  padding: 0;\n}\n.rarui-dropdown_item__1b7gjg53 {\n  display: flex;\n  justify-content: space-between;\n  cursor: pointer;\n  background-color: transparent;\n  border: none;\n  width: 100%;\n  box-sizing: border-box;\n  transition: all 150ms ease;\n  border-radius: var(--rarui-shape-border-radius-2xs);\n  gap: var(--rarui-spacing-3xs);\n  padding: var(--rarui-spacing-3xs);\n  color: var(--rarui-colors-content-primary);\n  font-weight: var(--rarui-fontWeight-medium);\n  font-size: var(--rarui-fontSize-button-s);\n  font-family: var(--rarui-fontFamily-button);\n  text-decoration: none;\n}\n.rarui-dropdown_item__1b7gjg53:focus-within {\n  outline: none;\n  box-shadow: var(--rarui-elevation-focus-ring);\n}\n.rarui-dropdown_item__1b7gjg53:hover {\n  background-color: var(--rarui-colors-surface-hover);\n}\n.rarui-dropdown_item__1b7gjg53:active {\n  background-color: var(--rarui-colors-surface-press);\n}\n.rarui-dropdown_item__1b7gjg53:disabled {\n  color: var(--rarui-colors-content-disabled);\n}\n.rarui-dropdown_item_selected_true__1b7gjg54 {\n  background-color: var(--rarui-colors-surface-brand-subdued);\n}\n.rarui-dropdown_item_selected_true__1b7gjg54:hover {\n  background-color: var(--rarui-colors-surface-brand-subdued);\n}\n@media screen and (min-width: 0px) {\n  .rarui-dropdown_width-xs__1b7gjg59 {\n    width: var(--width-xs__1b7gjg55);\n  }\n  .rarui-dropdown_maxWidth-xs__1b7gjg5h {\n    max-width: var(--maxWidth-xs__1b7gjg5d);\n  }\n  .rarui-dropdown_zIndex-100-xs__1b7gjg5l {\n    z-index: var(--rarui-zIndex-100);\n  }\n  .rarui-dropdown_zIndex-200-xs__1b7gjg5p {\n    z-index: var(--rarui-zIndex-200);\n  }\n  .rarui-dropdown_zIndex-300-xs__1b7gjg5t {\n    z-index: var(--rarui-zIndex-300);\n  }\n  .rarui-dropdown_zIndex-400-xs__1b7gjg5x {\n    z-index: var(--rarui-zIndex-400);\n  }\n  .rarui-dropdown_zIndex-500-xs__1b7gjg511 {\n    z-index: var(--rarui-zIndex-500);\n  }\n  .rarui-dropdown_zIndex-600-xs__1b7gjg515 {\n    z-index: var(--rarui-zIndex-600);\n  }\n  .rarui-dropdown_zIndex-700-xs__1b7gjg519 {\n    z-index: var(--rarui-zIndex-700);\n  }\n  .rarui-dropdown_zIndex-800-xs__1b7gjg51d {\n    z-index: var(--rarui-zIndex-800);\n  }\n  .rarui-dropdown_zIndex-900-xs__1b7gjg51h {\n    z-index: var(--rarui-zIndex-900);\n  }\n}\n@media screen and (min-width: 768px) {\n  .rarui-dropdown_width-md__1b7gjg5a {\n    width: var(--width-md__1b7gjg56);\n  }\n  .rarui-dropdown_maxWidth-md__1b7gjg5i {\n    max-width: var(--maxWidth-md__1b7gjg5e);\n  }\n  .rarui-dropdown_zIndex-100-md__1b7gjg5m {\n    z-index: var(--rarui-zIndex-100);\n  }\n  .rarui-dropdown_zIndex-200-md__1b7gjg5q {\n    z-index: var(--rarui-zIndex-200);\n  }\n  .rarui-dropdown_zIndex-300-md__1b7gjg5u {\n    z-index: var(--rarui-zIndex-300);\n  }\n  .rarui-dropdown_zIndex-400-md__1b7gjg5y {\n    z-index: var(--rarui-zIndex-400);\n  }\n  .rarui-dropdown_zIndex-500-md__1b7gjg512 {\n    z-index: var(--rarui-zIndex-500);\n  }\n  .rarui-dropdown_zIndex-600-md__1b7gjg516 {\n    z-index: var(--rarui-zIndex-600);\n  }\n  .rarui-dropdown_zIndex-700-md__1b7gjg51a {\n    z-index: var(--rarui-zIndex-700);\n  }\n  .rarui-dropdown_zIndex-800-md__1b7gjg51e {\n    z-index: var(--rarui-zIndex-800);\n  }\n  .rarui-dropdown_zIndex-900-md__1b7gjg51i {\n    z-index: var(--rarui-zIndex-900);\n  }\n}\n@media screen and (min-width: 1200px) {\n  .rarui-dropdown_width-lg__1b7gjg5b {\n    width: var(--width-lg__1b7gjg57);\n  }\n  .rarui-dropdown_maxWidth-lg__1b7gjg5j {\n    max-width: var(--maxWidth-lg__1b7gjg5f);\n  }\n  .rarui-dropdown_zIndex-100-lg__1b7gjg5n {\n    z-index: var(--rarui-zIndex-100);\n  }\n  .rarui-dropdown_zIndex-200-lg__1b7gjg5r {\n    z-index: var(--rarui-zIndex-200);\n  }\n  .rarui-dropdown_zIndex-300-lg__1b7gjg5v {\n    z-index: var(--rarui-zIndex-300);\n  }\n  .rarui-dropdown_zIndex-400-lg__1b7gjg5z {\n    z-index: var(--rarui-zIndex-400);\n  }\n  .rarui-dropdown_zIndex-500-lg__1b7gjg513 {\n    z-index: var(--rarui-zIndex-500);\n  }\n  .rarui-dropdown_zIndex-600-lg__1b7gjg517 {\n    z-index: var(--rarui-zIndex-600);\n  }\n  .rarui-dropdown_zIndex-700-lg__1b7gjg51b {\n    z-index: var(--rarui-zIndex-700);\n  }\n  .rarui-dropdown_zIndex-800-lg__1b7gjg51f {\n    z-index: var(--rarui-zIndex-800);\n  }\n  .rarui-dropdown_zIndex-900-lg__1b7gjg51j {\n    z-index: var(--rarui-zIndex-900);\n  }\n}\n@media screen and (min-width: 1400px) {\n  .rarui-dropdown_width-xl__1b7gjg5c {\n    width: var(--width-xl__1b7gjg58);\n  }\n  .rarui-dropdown_maxWidth-xl__1b7gjg5k {\n    max-width: var(--maxWidth-xl__1b7gjg5g);\n  }\n  .rarui-dropdown_zIndex-100-xl__1b7gjg5o {\n    z-index: var(--rarui-zIndex-100);\n  }\n  .rarui-dropdown_zIndex-200-xl__1b7gjg5s {\n    z-index: var(--rarui-zIndex-200);\n  }\n  .rarui-dropdown_zIndex-300-xl__1b7gjg5w {\n    z-index: var(--rarui-zIndex-300);\n  }\n  .rarui-dropdown_zIndex-400-xl__1b7gjg510 {\n    z-index: var(--rarui-zIndex-400);\n  }\n  .rarui-dropdown_zIndex-500-xl__1b7gjg514 {\n    z-index: var(--rarui-zIndex-500);\n  }\n  .rarui-dropdown_zIndex-600-xl__1b7gjg518 {\n    z-index: var(--rarui-zIndex-600);\n  }\n  .rarui-dropdown_zIndex-700-xl__1b7gjg51c {\n    z-index: var(--rarui-zIndex-700);\n  }\n  .rarui-dropdown_zIndex-800-xl__1b7gjg51g {\n    z-index: var(--rarui-zIndex-800);\n  }\n  .rarui-dropdown_zIndex-900-xl__1b7gjg51k {\n    z-index: var(--rarui-zIndex-900);\n  }\n}";let Ka=class extends(yr(kr(er))){constructor(){super(...arguments),this.offset=10,this.position="bottom-start",this.strategy="fixed",this.enabledClick=!0,this.enabledDismiss=!0,this.open=this.visible??!1,this._hasVisibleAttribute=!1,this.updatePositionDebounceId=null,this.handleClickOutside=r=>{if(!this.enabledDismiss||!this.open)return;const i=r.composedPath();i.includes(this)||i.includes(this.floating)||this.closeDropdown("click-outside")},this.handleKeyDown=r=>{"Escape"===r.key&&this.open&&this.enabledDismiss&&(r.preventDefault(),r.stopPropagation(),this.closeDropdown("escape-key"))},this.handleClick=()=>{if(this.enabledClick){const r=!this.open;if(this._hasVisibleAttribute){const i=r?"click-open":"click-close";this.dispatchEvent(new CustomEvent("dropdown-visibility-change",{detail:{visible:r,reason:i},bubbles:!0,composed:!0}))}else this.open=r}},this.handleReferenceKeydown=r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),this.handleClick())}}set visible(r){const i=this._visible;this._visible=r,this.requestUpdate("visible",i),this._hasVisibleAttribute=void 0!==r,void 0!==r&&(this.open=r)}get visible(){return this._visible}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleClickOutside,!0),document.addEventListener("keydown",this.handleKeyDown,!0),this.updateComplete.then((()=>{this._hasVisibleAttribute=void 0!==this._visible}))}attributeChangedCallback(r,i,o){super.attributeChangedCallback(r,i,o)}disconnectedCallback(){super.disconnectedCallback(),this.cleanupAutoUpdate&&this.cleanupAutoUpdate(),document.removeEventListener("click",this.handleClickOutside,!0),document.removeEventListener("keydown",this.handleKeyDown,!0)}updated(r){r.has("open")&&(this._hasVisibleAttribute||this.dispatchEvent(new CustomEvent("dropdown-visibility-change",{detail:{visible:this.open,reason:"programmatic"},bubbles:!0,composed:!0})),this.open&&this.scheduleUpdatePosition()),r.has("visible")&&this._hasVisibleAttribute&&void 0!==this._visible&&(this.open=this._visible)}scheduleUpdatePosition(){this.updatePositionDebounceId&&cancelAnimationFrame(this.updatePositionDebounceId),this.updatePositionDebounceId=requestAnimationFrame((()=>{this.updatePosition()}))}closeDropdown(r="close"){this._hasVisibleAttribute?this.dispatchEvent(new CustomEvent("dropdown-visibility-change",{detail:{visible:!1,reason:r},bubbles:!0,composed:!0})):this.open=!1}async updatePosition(){await this.updateComplete,this.reference instanceof HTMLElement&&this.floating instanceof HTMLElement&&(this.cleanupAutoUpdate?.(),this.cleanupAutoUpdate=La(this.reference,this.floating,(()=>this.computePosition()),{animationFrame:!0}),await this.computePosition())}getMiddleware(){return[ja(this.offset),Ha(),this.enabledFlip&&$a({crossAxis:this?.position?.includes("-"),fallbackAxisSideDirection:"end",padding:5}),this.matchReferenceWidth&&Ia({apply({rects:r,elements:i}){Object.assign(i.floating.style,{width:`${r.reference.width}px`})}})].filter(Boolean)}async computePosition(){if(!(this.reference instanceof HTMLElement&&this.floating instanceof HTMLElement))return;const r=this.getMiddleware(),{x:i,y:o}=await Ma(this.reference,this.floating,{placement:this.position,middleware:r,strategy:this.strategy});Object.assign(this.floating.style,{position:this.strategy,left:`${i}px`,top:`${o}px`})}render(){const{className:r,style:i}=Xi.sprinkle(this.sprinkleAttrs);return O`
       <div
         id="reference"
         role="button"
@@ -674,7 +674,7 @@ const po=Symbol.for(""),mo=r=>{if(r?.r===po)return r?._$litStatic$},wo=r=>({_$li
       </div>
     `}_focusInput(){this.disabled||this.shadowRoot?.querySelector("input")?.focus()}_onInput(r){const i=r.target;this.value=i.value,this.dispatchEvent(new CustomEvent("input-search-change",{detail:{value:i.value,originalEvent:r},bubbles:!0,composed:!0}))}_onSearch(r){const i=r.target;this.dispatchEvent(new CustomEvent("input-search-submit",{detail:{value:i.value,originalEvent:r},bubbles:!0,composed:!0}))}focus(){this.shadowRoot?.querySelector("input")?.focus()}blur(){this.shadowRoot?.querySelector("input")?.blur()}formResetCallback(){this.value="",this._internals.setFormValue("")}};an.shadowRootOptions={...er.shadowRootOptions,delegatesFocus:!0},an.formAssociated=!0,an.styles=t`
     ${e(Qa)}
-  `,r([fr({type:String,reflect:!0})],an.prototype,"size",void 0),r([fr({type:String,reflect:!0})],an.prototype,"appearance",void 0),r([fr({type:Boolean,reflect:!0})],an.prototype,"border",void 0),r([fr({type:Boolean,reflect:!0})],an.prototype,"divider",void 0),r([fr({type:Boolean,reflect:!0})],an.prototype,"disabled",void 0),r([fr({type:String})],an.prototype,"value",null),r([fr({type:String})],an.prototype,"placeholder",void 0),r([fr({type:String})],an.prototype,"name",void 0),r([fr({type:String})],an.prototype,"form",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],an.prototype,"required",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],an.prototype,"readonly",void 0),r([fr({type:String})],an.prototype,"autocomplete",void 0),r([fr({type:Number})],an.prototype,"minlength",void 0),r([fr({type:Number})],an.prototype,"maxlength",void 0),r([fr({type:String})],an.prototype,"pattern",void 0),r([fr({type:String,reflect:!0,attribute:"aria-invalid"})],an.prototype,"ariaInvalid",void 0),an=r([_r("rarui-input-search")],an);let nn=class extends(yr(er)){constructor(){super(),this.id="",this.disabled=!1,this.size="large",this.error=!1,this.selected=!1,this.required=!1,this.readonly=!1,this._internals=this.attachInternals()}connectedCallback(){super.connectedCallback(),document.addEventListener("radio-button-selected",this._handleRadioGroupChange.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("radio-button-selected",this._handleRadioGroupChange.bind(this))}render(){const r=this.id||this.name;return O`
+  `,r([fr({type:String,reflect:!0})],an.prototype,"size",void 0),r([fr({type:String,reflect:!0})],an.prototype,"appearance",void 0),r([fr({type:Boolean,reflect:!0})],an.prototype,"border",void 0),r([fr({type:Boolean,reflect:!0})],an.prototype,"divider",void 0),r([fr({type:Boolean,reflect:!0})],an.prototype,"disabled",void 0),r([fr({type:String})],an.prototype,"value",null),r([fr({type:String})],an.prototype,"placeholder",void 0),r([fr({type:String})],an.prototype,"name",void 0),r([fr({type:String})],an.prototype,"form",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],an.prototype,"required",void 0),r([fr({type:Boolean,converter:r=>"false"!==r})],an.prototype,"readonly",void 0),r([fr({type:String})],an.prototype,"autocomplete",void 0),r([fr({type:Number})],an.prototype,"minlength",void 0),r([fr({type:Number})],an.prototype,"maxlength",void 0),r([fr({type:String})],an.prototype,"pattern",void 0),r([fr({type:String,reflect:!0,attribute:"aria-invalid"})],an.prototype,"ariaInvalid",void 0),an=r([_r("rarui-input-search")],an);let nn=class extends(yr(er)){constructor(){super(),this.id="",this.disabled=!1,this.size="large",this.error=!1,this.selected=!1,this.required=!1,this.readonly=!1,this._internals=this.attachInternals()}connectedCallback(){super.connectedCallback(),document.addEventListener("radio-button-selected",this._handleRadioGroupChange.bind(this)),this.selected&&this._internals.setFormValue(this.value||"on")}updated(r){super.updated(r),r.has("selected")&&(this.selected?this._internals.setFormValue(this.value||"on"):this._internals.setFormValue(null))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("radio-button-selected",this._handleRadioGroupChange.bind(this))}render(){const r=this.id||this.name;return O`
       <label
         for="${so(r)}"
         class=${mi.classnames.container}
@@ -737,7 +737,7 @@ let en=class{constructor(r,i,o,a){if(this.subscribe=!1,this.provided=!1,this.val
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const un=Symbol("select-context");let fn=class extends(yr(kr(er))){constructor(){super(),this.size="medium",this.disabled=!1,this.multiple=!1,this.open=!1,this.enabledFlip=!0,this.position="bottom-start",this.strategy="fixed",this.required=!1,this.ariaInvalid=null,this.selectedOptions=[],this.menuOpen=!1,this.childOptions=[],this._selectContext={multiple:this.multiple||!1,size:this.size||"medium",disabled:this.disabled||!1,selectedValues:[],onOptionSelect:this._handleContextOptionSelect.bind(this),onOptionMount:this._handleOptionMount.bind(this),onOptionUnmount:this._handleOptionUnmount.bind(this)},this._internals=this.attachInternals()}get value(){return this._value}set value(r){const i=this._value;this._value=r,this._updateSelectedOptions(),this.requestUpdate("value",i)}get defaultValue(){return this._defaultValue}set defaultValue(r){const i=this._defaultValue;this._defaultValue=r,this._value||this._updateSelectedOptions(),this.requestUpdate("defaultValue",i)}connectedCallback(){super.connectedCallback(),this._updateSelectedOptions(),this.menuOpen=this.open||!1,document.addEventListener("rarui-label-click",this._handleLabelClick.bind(this)),this.addEventListener("option-select",this._handleOptionSelect.bind(this)),this._setupMutationObserver(),setTimeout((()=>{this._syncSelectedOptionsFromChildren(),this._updateContext()}),0)}_setupMutationObserver(){this._observer=new MutationObserver((r=>{let i=!1;r.forEach((r=>{if("childList"===r.type)i=!0;else if("attributes"===r.type){"RARUI-SELECT-OPTION"===r.target.tagName&&(i=!0)}})),i&&(this._syncSelectedOptionsFromChildren(),this._updateContext())})),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["selected","disabled","value"]})}_syncSelectedOptionsFromChildren(){const r=this.querySelectorAll("rarui-select-option"),i=[];if(r.forEach((r=>{r.selected&&i.push({value:r.value||"",label:r.label||r.textContent?.trim()||""})})),JSON.stringify(i)!==JSON.stringify(this.selectedOptions)){const r=this.selectedOptions;this.selectedOptions=i,this._updateFormValue(),this.requestUpdate("selectedOptions",r)}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("rarui-label-click",this._handleLabelClick.bind(this)),this.removeEventListener("option-select",this._handleOptionSelect.bind(this)),this._observer&&(this._observer.disconnect(),this._observer=void 0)}_updateSelectedOptions(){const r=this._value||this._defaultValue;if(!r){const r=this.selectedOptions;return this.selectedOptions=[],this._updateFormValue(),void this.requestUpdate("selectedOptions",r)}let i;i=Array.isArray(r)?r:[r];if(!(JSON.stringify(this.selectedOptions)===JSON.stringify(i))){const r=this.selectedOptions;this.selectedOptions=i,this._updateFormValue(),this.requestUpdate("selectedOptions",r)}}handleSelect(r){if(this.disabled)return;let i;if(this.multiple){i=this.selectedOptions.some((i=>i.value===r.value))?this.selectedOptions.filter((i=>i.value!==r.value)):[...this.selectedOptions,r]}else i=[r],this.menuOpen=!1;const o=this.selectedOptions;this.selectedOptions=i,this.requestUpdate("selectedOptions",o),this._value=this.multiple?i:i[0],this._updateFormValue(),this.requestUpdate();const a=new CustomEvent("rarui-select-change",{detail:{value:this.multiple?i:i[0],selectedOptions:i}});this.dispatchEvent(a)}handleRemoveOption(r,i){if(i.preventDefault(),i.stopPropagation(),this.disabled)return;const o=this.selectedOptions.filter((i=>i.value!==r.value)),a=this.selectedOptions;this.selectedOptions=o,this.requestUpdate("selectedOptions",a),this._updateContext(),this._value=o,this._updateFormValue();const n=new CustomEvent("rarui-select-change",{detail:{value:o,selectedOptions:o}});this.dispatchEvent(n)}renderHiddenFormInputs(){return this.name&&this.selectedOptions.length?this.multiple?this.selectedOptions.map((r=>O`
+ */const un=Symbol("select-context");let fn=class extends(function(r){return class extends r{handleKeydown(r){const i=this;switch(r.key){case"Enter":case" ":i.handleActivation&&(r.preventDefault(),i.handleActivation());break;case"ArrowDown":case"ArrowUp":case"ArrowLeft":case"ArrowRight":i.handleArrowNavigation&&(r.preventDefault(),i.handleArrowNavigation(r.key));break;case"Escape":i.handleEscape&&(r.preventDefault(),i.handleEscape());break;case"Home":i.handleHome&&(r.preventDefault(),i.handleHome());break;case"End":i.handleEnd&&(r.preventDefault(),i.handleEnd());break;case"Tab":i.handleTab&&i.handleTab(r)}}}}(yr(kr(er)))){constructor(){super(),this.size="medium",this.disabled=!1,this.multiple=!1,this.open=!1,this.enabledFlip=!0,this.position="bottom-start",this.strategy="fixed",this.required=!1,this.ariaInvalid=null,this.selectedOptions=[],this.menuOpen=!1,this.childOptions=[],this._selectContext={multiple:this.multiple||!1,size:this.size||"medium",disabled:this.disabled||!1,selectedValues:[],onOptionSelect:this._handleContextOptionSelect.bind(this),onOptionMount:this._handleOptionMount.bind(this),onOptionUnmount:this._handleOptionUnmount.bind(this)},this._internals=this.attachInternals()}get value(){return this._value}set value(r){const i=this._value;this._value=r,this._updateSelectedOptions(),this.requestUpdate("value",i)}get defaultValue(){return this._defaultValue}set defaultValue(r){const i=this._defaultValue;this._defaultValue=r,this._value||this._updateSelectedOptions(),this.requestUpdate("defaultValue",i)}connectedCallback(){super.connectedCallback(),this._updateSelectedOptions(),this.menuOpen=this.open||!1,document.addEventListener("rarui-label-click",this._handleLabelClick.bind(this)),this.addEventListener("option-select",this._handleOptionSelect.bind(this)),this._setupMutationObserver(),setTimeout((()=>{this._syncSelectedOptionsFromChildren(),this._updateContext()}),0)}_setupMutationObserver(){this._observer=new MutationObserver((r=>{let i=!1;r.forEach((r=>{if("childList"===r.type)i=!0;else if("attributes"===r.type){"RARUI-SELECT-OPTION"===r.target.tagName&&(i=!0)}})),i&&(this._syncSelectedOptionsFromChildren(),this._updateContext())})),this._observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["selected","disabled","value"]})}_syncSelectedOptionsFromChildren(){const r=this.querySelectorAll("rarui-select-option"),i=[];if(r.forEach((r=>{r.selected&&i.push({value:r.value||"",label:r.label||r.textContent?.trim()||""})})),JSON.stringify(i)!==JSON.stringify(this.selectedOptions)){const r=this.selectedOptions;this.selectedOptions=i,this._updateFormValue(),this.requestUpdate("selectedOptions",r)}}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("rarui-label-click",this._handleLabelClick.bind(this)),this.removeEventListener("option-select",this._handleOptionSelect.bind(this)),this._observer&&(this._observer.disconnect(),this._observer=void 0)}_updateSelectedOptions(){const r=this._value||this._defaultValue;if(!r){const r=this.selectedOptions;return this.selectedOptions=[],this._updateFormValue(),void this.requestUpdate("selectedOptions",r)}let i;i=Array.isArray(r)?r:[r];if(!(JSON.stringify(this.selectedOptions)===JSON.stringify(i))){const r=this.selectedOptions;this.selectedOptions=i,this._updateFormValue(),this.requestUpdate("selectedOptions",r)}}handleSelect(r){if(this.disabled)return;let i;if(this.multiple){i=this.selectedOptions.some((i=>i.value===r.value))?this.selectedOptions.filter((i=>i.value!==r.value)):[...this.selectedOptions,r]}else i=[r],this.menuOpen=!1;const o=this.selectedOptions;this.selectedOptions=i,this.requestUpdate("selectedOptions",o),this._value=this.multiple?i:i[0],this._updateFormValue(),this.requestUpdate();const a=new CustomEvent("rarui-select-change",{detail:{value:this.multiple?i:i[0],selectedOptions:i}});this.dispatchEvent(a)}handleRemoveOption(r,i){if(i.preventDefault(),i.stopPropagation(),this.disabled)return;const o=this.selectedOptions.filter((i=>i.value!==r.value)),a=this.selectedOptions;this.selectedOptions=o,this.requestUpdate("selectedOptions",a),this._updateContext(),this._value=o,this._updateFormValue();const n=new CustomEvent("rarui-select-change",{detail:{value:o,selectedOptions:o}});this.dispatchEvent(n)}renderHiddenFormInputs(){return this.name&&this.selectedOptions.length?this.multiple?this.selectedOptions.map((r=>O`
           <input
             type="hidden"
             name="${so(this.name)}"
@@ -751,7 +751,7 @@ let en=class{constructor(r,i,o,a){if(this.subscribe=!1,this.provided=!1,this.val
         value="${this.selectedOptions[0]?.value||""}"
         form="${so(this.form)}"
       />
-    `:F}handleResetOptions(r){if(r.preventDefault(),r.stopPropagation(),this.disabled)return;const i=this.selectedOptions;this.selectedOptions=[],this.requestUpdate("selectedOptions",i),this._updateContext(),this._value=[];const o=new CustomEvent("rarui-select-change",{detail:{value:[],selectedOptions:[]}});this.dispatchEvent(o)}handleDropdownOpenChange(r){const{visible:i,reason:o}=r.detail;i||!this.menuOpen||"click-outside"!==o&&"escape-key"!==o||(this.menuOpen=!1)}_handleOptionSelect(r){r.stopPropagation();const{value:i,label:o}=r.detail,a={value:i,label:o};this.handleSelect(a);const n=r.target;n&&"RARUI-SELECT-OPTION"===n.tagName&&(n.selected=this.selectedOptions.some((r=>r.value===a.value)))}_handleContextOptionSelect(r,i,o){const a={value:r,label:i};this.handleSelect(a),this._updateContext()}_handleOptionMount(r){this.childOptions.push(r),this._updateContext()}_handleOptionUnmount(r){const i=this.childOptions.indexOf(r);i>-1&&this.childOptions.splice(i,1),this._updateContext()}_updateContext(){this._selectContext={...this._selectContext,multiple:this.multiple||!1,size:this.size||"medium",disabled:this.disabled||!1,selectedValues:this.selectedOptions.map((r=>r.value))},this.requestUpdate()}handleSelectClick(){this.disabled||(this.menuOpen=!this.menuOpen)}render(){const{className:r,style:i}=Wi.sprinkle({maxHeight:this.maxHeight,...this.sprinkleAttrs});return O`
+    `:F}handleResetOptions(r){if(r.preventDefault(),r.stopPropagation(),this.disabled)return;const i=this.selectedOptions;this.selectedOptions=[],this.requestUpdate("selectedOptions",i),this._updateContext(),this._value=[];const o=new CustomEvent("rarui-select-change",{detail:{value:[],selectedOptions:[]}});this.dispatchEvent(o)}handleDropdownOpenChange(r){const{visible:i,reason:o}=r.detail;i||!this.menuOpen||"click-outside"!==o&&"escape-key"!==o||(this.menuOpen=!1)}_handleOptionSelect(r){r.stopPropagation();const{value:i,label:o}=r.detail,a={value:i,label:o};this.handleSelect(a);const n=r.target;n&&"RARUI-SELECT-OPTION"===n.tagName&&(n.selected=this.selectedOptions.some((r=>r.value===a.value)))}_handleContextOptionSelect(r,i,o){const a={value:r,label:i};this.handleSelect(a),this._updateContext()}_handleOptionMount(r){this.childOptions.push(r),this._updateContext()}_handleOptionUnmount(r){const i=this.childOptions.indexOf(r);i>-1&&this.childOptions.splice(i,1),this._updateContext()}_updateContext(){this._selectContext={...this._selectContext,multiple:this.multiple||!1,size:this.size||"medium",disabled:this.disabled||!1,selectedValues:this.selectedOptions.map((r=>r.value))},this.requestUpdate()}handleSelectClick(){this.disabled||(this.menuOpen=!this.menuOpen)}handleActivation(){this.disabled||(this.menuOpen=!this.menuOpen)}handleArrowNavigation(r){this.disabled||"ArrowDown"!==r&&"ArrowUp"!==r||this.menuOpen||(this.menuOpen=!0)}handleEscape(){this.menuOpen&&!this.disabled&&(this.menuOpen=!1)}render(){const{className:r,style:i}=Wi.sprinkle({maxHeight:this.maxHeight,...this.sprinkleAttrs});return O`
       <rarui-dropdown
         .visible=${this.menuOpen}
         ?enabled-click=${!1}
@@ -763,6 +763,7 @@ let en=class{constructor(r,i,o,a){if(this.subscribe=!1,this.provided=!1,this.val
         width="100%"
         z-index=${so(this.zIndex)}
         @dropdown-visibility-change=${this.handleDropdownOpenChange}
+        @keydown=${this.handleKeydown}
       >
         ${this._renderTrigger()} ${this._renderContent(r,i)}
       </rarui-dropdown>
@@ -778,7 +779,6 @@ let en=class{constructor(r,i,o,a){if(this.subscribe=!1,this.provided=!1,this.val
           aria-expanded="${this.menuOpen?"true":"false"}"
           aria-required="${this.required?"true":"false"}"
           @click=${this.handleSelectClick}
-          @keydown=${()=>{}}
           @focus=${()=>{}}
           tabindex="0"
           role="button"
@@ -893,7 +893,7 @@ let en=class{constructor(r,i,o,a){if(this.subscribe=!1,this.provided=!1,this.val
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */({context:un})],fn.prototype,"_selectContext",void 0),fn=r([_r("rarui-select")],fn);let ln=class extends(yr(er)){constructor(){super(...arguments),this.value="",this.selected=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.selectContext?.onOptionMount&&this.selectContext.onOptionMount(this)}disconnectedCallback(){super.disconnectedCallback(),this.selectContext?.onOptionUnmount&&this.selectContext.onOptionUnmount(this)}_handleClick(){this.disabled||this.selectContext?.disabled||(console.log("option clicked",this.value),this.selectContext?.onOptionSelect&&this.selectContext.onOptionSelect(this.value,this.label||this.textContent?.trim()||"",!this.selected))}_handleKeyDown(r){"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),this._handleClick())}render(){const r=this.label||this.textContent?.trim()||"",i=this.selectContext?.multiple||!1,o=this.selectContext?.size||"medium",a=this.selectContext?.selectedValues?.includes(this.value)||!1,n=this.disabled||this.selectContext?.disabled||!1;return O`
+ */({context:un})],fn.prototype,"_selectContext",void 0),fn=r([_r("rarui-select")],fn);let ln=class extends(yr(er)){constructor(){super(...arguments),this.value="",this.selected=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.selectContext?.onOptionMount&&this.selectContext.onOptionMount(this)}disconnectedCallback(){super.disconnectedCallback(),this.selectContext?.onOptionUnmount&&this.selectContext.onOptionUnmount(this)}_handleClick(){this.disabled||this.selectContext?.disabled||this.selectContext?.onOptionSelect&&this.selectContext.onOptionSelect(this.value,this.label||this.textContent?.trim()||"",!this.selected)}_handleKeyDown(r){"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),this._handleClick())}render(){const r=this.label||this.textContent?.trim()||"",i=this.selectContext?.multiple||!1,o=this.selectContext?.size||"medium",a=this.selectContext?.selectedValues?.includes(this.value)||!1,n=this.disabled||this.selectContext?.disabled||!1;return O`
       <rarui-dropdown-item
         ?selected=${a&&!i}
         ?disabled=${n}
@@ -1531,7 +1531,7 @@ const Rn=(r,i)=>{const o=r._$AN;if(void 0===o)return!1;for(const r of o)r._$AO?.
     :host([selected="false"]) {
       display: none;
     }
-  `,r([fr({type:String})],Xn.prototype,"padding",void 0),r([fr({type:Boolean,reflect:!0,converter:r=>"false"!==r})],Xn.prototype,"selected",void 0),Xn=r([_r("rarui-accordion-body")],Xn);const Yn={brand:"neutral",info:"neutral",neutral:"neutral"};let Kn=class extends(yr(er)){constructor(){super(...arguments),this.floating=!1,this.closable=!1,this.handleClose=()=>{this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}}render(){return O`
+  `,r([fr({type:String})],Xn.prototype,"padding",void 0),r([fr({type:Boolean,reflect:!0,converter:r=>"false"!==r})],Xn.prototype,"selected",void 0),Xn=r([_r("rarui-accordion-body")],Xn);const Yn={brand:"neutral",info:"neutral",neutral:"neutral"};let Kn=class extends(yr(er)){constructor(){super(...arguments),this.floating=!1,this.closable=!1,this.handleClose=()=>{this.dispatchEvent(new CustomEvent("rarui-banner-close",{bubbles:!0}))}}render(){return O`
       <div
         class="${Ai.classnames.banner({appearance:this.appearance,floating:this.floating})}"
         role="banner"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rarui/components",
-  "version": "1.30.1",
+  "version": "1.30.2",
   "license": "MIT",
   "main": "dist/index.js",
   "type": "module",

package/src/exhibition/Avatar/README.md

@@ -1,15 +0,0 @@
-# `@rarui/avatar`
-
-The Avatar component is typically used to display user profile pictures.
-
-## Installation
-
-```sh
-$ yarn add @rarui/avatar
-# or
-$ npm install @rarui/avatar
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Badge/README.md

@@ -1,15 +0,0 @@
-# `@rarui/text`
-
-Text is a basic component that allows us to write blocks of text and give it formatting to use within other components, sections and pages of our application or website.
-
-## Installation
-
-```sh
-$ yarn add @rarui/text
-# or
-$ npm install @rarui/text
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Divider/README.md

@@ -1,15 +0,0 @@
-# `@rarui/divider`
-
-A Divider is a thin line used to separate or group content into lists and layouts.
-
-## Installation
-
-```sh
-$ yarn add @rarui/divider
-# or
-$ npm install @rarui/divider
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Icon/README.md

@@ -1,15 +0,0 @@
-# `@rarui/icon`
-
-Icons are used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help merchants more easily understand where they are in the product, and common interaction patterns that are available.
-
-## Installation
-
-```sh
-$ yarn add @rarui/icon
-# or
-$ npm install @rarui/icon
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Label/README.md

@@ -1,15 +0,0 @@
-# `@rarui/label`
-
-The label component allows us to name elements within a form.
-
-## Installation
-
-```sh
-$ yarn add @rarui/label
-# or
-$ npm install @rarui/label
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Stepper/README.md

@@ -1,15 +0,0 @@
-# `@rarui/stepper`
-
-The Stepper component facilitates the sequential navigation of multi-step forms by visually representing each step's progression.
-
-## Installation
-
-```sh
-$ yarn add @rarui/stepper
-# or
-$ npm install @rarui/stepper
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Text/README.md

@@ -1,15 +0,0 @@
-# `@rarui/text`
-
-Text is a basic component that allows us to write blocks of text and give it formatting to use within other components, sections and pages of our application or website.
-
-## Installation
-
-```sh
-$ yarn add @rarui/text
-# or
-$ npm install @rarui/text
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Title/README.md

@@ -1,15 +0,0 @@
-# `@rarui/title`
-
-Tilte is a basic component that allows you to give titles and more hierarchy to blocks of text for sections or header components.
-
-## Installation
-
-```sh
-$ yarn add @rarui/title
-# or
-$ npm install @rarui/title
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Tooltip/README.md

@@ -1,15 +0,0 @@
-# `@rarui/tooltip`
-
-Tooltip are informative, specific, and action -oriented text labels that provide contextual support.
-
-## Installation
-
-```sh
-$ yarn add @rarui/tooltip
-# or
-$ npm install @rarui/tooltip
-```
-
-## Usage
-
-View docs [here]().

package/src/feedback/Progress/README.md

@@ -1,15 +0,0 @@
-# `@rarui/progress`
-
-Progress indicators express an unspecified waiting time or display the duration of a process.
-
-## Installation
-
-```sh
-$ yarn add @rarui/progress
-# or
-$ npm install @rarui/progress
-```
-
-## Usage
-
-View docs [here]().

package/src/feedback/Skeleton/README.md

@@ -1,15 +0,0 @@
-# `@rarui/skeleton`
-
-The Skeleton component allows us to visually communicate the loading of other components.
-
-## Installation
-
-```sh
-$ yarn add @rarui/skeleton
-# or
-$ npm install @rarui/skeleton
-```
-
-## Usage
-
-View docs [here]().

package/src/feedback/Status/README.md

@@ -1,15 +0,0 @@
-# `@rarui/status`
-
-Status are used to indicate the current state of a process.
-
-## Installation
-
-```sh
-$ yarn add @rarui/status
-# or
-$ npm install @rarui/status
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Button/README.md

@@ -1,15 +0,0 @@
-# `@rarui/button`
-
-The Button component allows us to initiate actions, make state or page changes.
-
-## Installation
-
-```sh
-$ yarn add @rarui/button
-# or
-$ npm install @rarui/button
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Checkbox/README.md

@@ -1,15 +0,0 @@
-# `@rarui/checkbox`
-
-The Checkbox allows users to select one or more items from a set and can be used to enable or disable an option.
-
-## Installation
-
-```sh
-$ yarn add @rarui/checkbox
-# or
-$ npm install @rarui/checkbox
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Chip/README.md

@@ -1,15 +0,0 @@
-# `@rarui/chip`
-
-Chip is a small component used to make selections, filter content, or trigger actions.
-
-## Installation
-
-```sh
-$ yarn add @rarui/chip
-# or
-$ npm install @rarui/chip
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Dropdown/README.md

@@ -1,15 +0,0 @@
-# `@rarui/dropdown`
-
-Dropdown are informative, specific, and action -oriented text labels that provide contextual support.
-
-## Installation
-
-```sh
-$ yarn add @rarui/dropdown
-# or
-$ npm install @rarui/dropdown
-```
-
-## Usage
-
-View docs [here]().

package/src/input/IconButton/README.md

@@ -1,15 +0,0 @@
-# `@rarui/icon-button`
-
-The IconButton component allows us to initiate actions, make state or page changes.
-
-## Installation
-
-```sh
-$ yarn add @rarui/icon-button
-# or
-$ npm install @rarui/icon-button
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Input/README.md

@@ -1,44 +0,0 @@
-# `@rarui/input`
-
-The Input component provides text input functionality with support for leading elements, different sizes, appearances, and specialized variants like password and search inputs.
-
-## Installation
-
-```sh
-$ yarn add @rarui/input
-# or
-$ npm install @rarui/input
-```
-
-## Usage
-
-### Basic Input
-```html
-<rarui-input placeholder="Digite seu nome"></rarui-input>
-```
-
-### Input with Leading Elements
-```html
-<rarui-input placeholder="Digite seu nome">
-  <rarui-icon slot="leading-start" name="user_filled"></rarui-icon>
-  <rarui-icon slot="leading-end" name="check"></rarui-icon>
-</rarui-input>
-```
-
-### Password Input
-```html
-<rarui-input-password placeholder="Digite sua senha"></rarui-input-password>
-```
-
-### Search Input
-```html
-<rarui-input-search placeholder="Buscar..."></rarui-input-search>
-```
-
-## Components
-
-- `rarui-input` - Base input component with slot support
-- `rarui-input-password` - Password input with show/hide toggle
-- `rarui-input-search` - Search input with built-in search icon
-
-View docs [here]().

package/src/input/RadioButton/README.md

@@ -1,15 +0,0 @@
-# `@rarui/radio-button`
-
-The Radio Button allows users to select an option from a set. They are a selection control that usually appears when users are asked to make decisions or select an option from options.
-
-## Installation
-
-```sh
-$ yarn add @rarui/radio-button
-# or
-$ npm install @rarui/radio-button
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Select/README.md

@@ -1,13 +0,0 @@
-# Select
-
-Select component for choosing options from a dropdown menu with support for single and multiple selection.
-
-## Features
-
-- **Single Selection**: Choose one option from the list
-- **Multiple Selection**: Choose multiple options with checkboxes  
-- **Custom Content**: Support for slot-based custom content and filtering
-- **Accessibility**: Full keyboard navigation with ESC key support
-- **Controlled Behavior**: Uses internal web components (Dropdown, Checkbox, Text, Box, Chip, Icon)
-
-See [complete documentation](https://rarui.rarolabs.com.br/docs/components-web-components/input/select) for more details.

package/src/input/Textarea/README.md

@@ -1,15 +0,0 @@
-# `@rarui/textarea`
-
-Textarea is a basic component that allows us to write blocks of text and give it formatting to use within other components, sections and pages of our application or website.
-
-## Installation
-
-```sh
-$ yarn add @rarui/textarea
-# or
-$ npm install @rarui/textarea
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Toggle/README.md

@@ -1,15 +0,0 @@
-# `@rarui/toggle`
-
-Toggle switches enable or disable the state of a single item.
-
-## Installation
-
-```sh
-$ yarn add @rarui/toggle
-# or
-$ npm install @rarui/toggle
-```
-
-## Usage
-
-View docs [here]().

package/src/layout/Box/README.md

@@ -1,15 +0,0 @@
-# `@rarui/box`
-
-A low-level utility component that accepts styled system props to enable custom theme-aware styling
-
-## Installation
-
-```sh
-$ yarn add @rarui/box
-# or
-$ npm install @rarui/box
-```
-
-## Usage
-
-View docs [here]().

package/src/layout/Sidebar/README.md

@@ -1,109 +0,0 @@
-# Rarui Sidebar
-
-A sidebar component that slides in from the left or right side of the screen, with intelligent positioning for responsive behavior.
-
-## Installation
-
-```bash
-npm install @rarui/sidebar
-# or
-yarn add @rarui/sidebar
-```
-
-## Usage
-
-```html
-<rarui-sidebar open="true" position="right" max-width="375px" padding="$small">
-  <div>Your sidebar content here</div>
-</rarui-sidebar>
-```
-
-## Features
-
-- ✨ **Floating-UI Integration**: Intelligent positioning with automatic viewport adjustments using floating-ui
-- 📱 **Responsive**: Adapts to different screen sizes automatically
-- 🎭 **CSS Transitions**: Smooth slide animations with proper transition support
-- ♿ **Accessible**: Full keyboard navigation and screen reader support
-- 🎯 **Position Control**: Left or right positioning options
-- 🔒 **Focus Management**: Automatic focus trapping and restoration
-- 🎨 **Themeable**: Works with Rarui design tokens
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `open` | `boolean` | `false` | Whether the sidebar is open or not |
-| `position` | `'left' \| 'right'` | `'right'` | The position of the sidebar |
-| `max-width` | `string` | `'375px'` | Maximum width of the sidebar |
-| `padding` | `string` | `'$small'` | Padding inside the sidebar |
-| `portal-id` | `string` | - | ID of the portal element for rendering |
-
-> **Note**: Properties inherit from `SidebarProps` and are automatically converted from camelCase to kebab-case for web component attributes (e.g., `maxWidth` → `max-width`, `portalId` → `portal-id`).
-
-## Events
-
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `sidebar-open-changed` | `{ open: boolean }` | Dispatched when the sidebar open state changes |
-
-## Examples
-
-### Basic Sidebar
-
-```html
-<rarui-sidebar open="true">
-  <div>Basic sidebar content</div>
-</rarui-sidebar>
-```
-
-### Left Positioned Sidebar
-
-```html
-<rarui-sidebar open="true" position="left" max-width="300px">
-  <nav>
-    <ul>
-      <li>Home</li>
-      <li>About</li>
-      <li>Contact</li>
-    </ul>
-  </nav>
-</rarui-sidebar>
-```
-
-### Custom Width and Padding
-
-```html
-<rarui-sidebar open="true" max-width="500px" padding="$large">
-  <div>Wide sidebar with custom padding</div>
-</rarui-sidebar>
-```
-
-## Differences from React Version
-
-### Enhanced Features
-- **Floating-UI Integration**: Unlike the React version that uses basic floating-ui hooks, the web component version uses advanced virtual references for optimal sidebar positioning
-- **Smooth Transitions**: Always renders allowing CSS transitions to work properly
-- **Automatic Viewport Adaptation**: Content automatically adjusts to viewport constraints using floating-ui middleware
-- **Better Performance**: Native web APIs with optimized floating-ui integration
-
-### Positioning Intelligence
-The web component version provides superior positioning capabilities:
-- Virtual reference system optimized for sidebar edges
-- Responsive width adjustments via floating-ui size middleware
-- Intelligent overflow prevention with shift middleware
-- Automatic repositioning on viewport changes
-
-## Browser Support
-
-This component works in all modern browsers that support:
-- Web Components
-- ES2017+ features
-- CSS Custom Properties
-
-## Development
-
-Built with:
-- **LitElement** for the component base
-- **Floating-UI** for advanced positioning with virtual references
-- **TypeScript** for type safety
-- **Rarui Design System** for styling

package/src/navigation/Breadcrumb/README.md

@@ -1,56 +0,0 @@
-# Breadcrumb
-
-O componente Breadcrumb permite a navegação hierárquica através de uma estrutura de páginas, indicando a localização atual do usuário e fornecendo links para as páginas anteriores.
-
-## Quando usar
-
-- Para mostrar a localização atual do usuário na hierarquia do site
-- Para permitir navegação rápida para níveis anteriores da estrutura
-- Em sistemas com estrutura hierárquica profunda (mais de 3 níveis)
-
-## Estrutura
-
-O componente é formado por:
-
-- `rarui-breadcrumb`: Container principal que gerencia a lógica de truncamento
-- `rarui-breadcrumb-item`: Item individual do breadcrumb
-
-## Uso básico
-
-```html
-<rarui-breadcrumb>
-  <rarui-breadcrumb-item href="/">Home</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/category">Category</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/subcategory">Subcategory</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item active>Current Page</rarui-breadcrumb-item>
-</rarui-breadcrumb>
-```
-
-## Com truncamento
-
-```html
-<rarui-breadcrumb items-after-truncate="2">
-  <rarui-breadcrumb-item href="/">Home</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/level1">Level 1</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/level2">Level 2</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/level3">Level 3</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/level4">Level 4</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item active>Current</rarui-breadcrumb-item>
-</rarui-breadcrumb>
-```
-
-## Com ícones
-
-```html
-<rarui-breadcrumb>
-  <rarui-breadcrumb-item href="/">
-    <rarui-icon slot="icon" name="home"></rarui-icon>
-    Home
-  </rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/dashboard">
-    <rarui-icon slot="icon" name="dashboard"></rarui-icon>
-    Dashboard
-  </rarui-breadcrumb-item>
-  <rarui-breadcrumb-item active>Settings</rarui-breadcrumb-item>
-</rarui-breadcrumb>
-```

package/src/navigation/Link/README.md

@@ -1,15 +0,0 @@
-# `@rarui/link`
-
-The Link component allows us to navigate to external addresses.
-
-## Installation
-
-```sh
-$ yarn add @rarui/link
-# or
-$ npm install @rarui/link
-```
-
-## Usage
-
-View docs [here]().

package/src/navigation/Pagination/README.md

@@ -1,15 +0,0 @@
-# `@rarui/pagination`
-
-The pagination component allows the user to select a specific page in a page range.
-
-## Installation
-
-```sh
-$ yarn add @rarui/pagination
-# or
-$ npm install @rarui/pagination
-```
-
-## Usage
-
-View docs [here]().

package/src/navigation/SideNavigation/README.md

@@ -1,87 +0,0 @@
-# `@rarui/side-navigation`
-
-The SideNavigation component provides collapsible navigation functionality with support for nested items, leading elements, and active states.
-
-## Installation
-
-```sh
-$ yarn add @rarui/side-navigation
-# or
-$ npm install @rarui/side-navigation
-```
-
-## Usage
-
-### Basic SideNavigation
-```html
-<rarui-side-navigation name="Dashboard" description="Main dashboard">
-  <rarui-side-navigation-item>Reports</rarui-side-navigation-item>
-  <rarui-side-navigation-item>Analytics</rarui-side-navigation-item>
-</rarui-side-navigation>
-```
-
-### SideNavigation with Leading Elements
-```html
-<rarui-side-navigation name="Settings" description="System configuration">
-  <!-- Custom icon at start -->
-  <rarui-icon slot="leading-start" name="folder-outlined" size="medium"></rarui-icon>
-  
-  <!-- Custom icon at end (replaces default arrow) -->
-  <rarui-icon slot="leading-end" name="chevron-down" size="medium"></rarui-icon>
-  
-  <!-- Nested items -->
-  <rarui-side-navigation-item>Profile</rarui-side-navigation-item>
-  <rarui-side-navigation-item>Permissions</rarui-side-navigation-item>
-</rarui-side-navigation>
-```
-
-### Active State
-```html
-<rarui-side-navigation name="Dashboard" active>
-  <rarui-side-navigation-item active>Current Page</rarui-side-navigation-item>
-  <rarui-side-navigation-item>Other Page</rarui-side-navigation-item>
-</rarui-side-navigation>
-```
-
-### Multi-level Navigation
-```html
-<rarui-side-navigation name="Administration">
-  <rarui-side-navigation-item level="0">Users</rarui-side-navigation-item>
-  <rarui-side-navigation-item level="1">Permissions</rarui-side-navigation-item>
-  <rarui-side-navigation-item level="1">Roles</rarui-side-navigation-item>
-</rarui-side-navigation>
-```
-
-## Components
-
-- `rarui-side-navigation` - Main navigation component with collapsible content
-- `rarui-side-navigation-item` - Individual navigation items with support for nesting levels
-
-## Slots
-
-### rarui-side-navigation
-- **Default slot**: Content for nested navigation items
-- **leading-start**: Content to display at the start (e.g., icons)
-- **leading-end**: Content to display at the end (e.g., custom icons)
-
-### rarui-side-navigation-item
-- **Default slot**: Content for the navigation item
-
-## Behavior
-
-### Arrow Icon
-- Navigation items **always display an arrow icon** by default
-- The arrow rotates between up/down states when toggling
-- Use `leading-end` slot to provide a custom icon that replaces the default arrow
-- Arrow shows `arrow-up` when expanded, `arrow-down` when collapsed
-
-### Boolean Attributes
-- Use `active` instead of `active="true"` for cleaner HTML
-- Use `disabled` instead of `disabled="true"` 
-- Supports string values like `active="false"` for dynamic binding
-
-## Events
-
-- `toggle` - Fired when the navigation item is toggled (opened/closed)
-
-View docs [here]().

package/src/navigation/Tabs/README.md

@@ -1,9 +0,0 @@
-# `@rarui/tabs`
-
-Tabs are used to switch between different display modes or pages.
-
-## Installation
-
-## Usage
-
-View docs [here]().

package/src/stylization/ThemeProvider/README.md

@@ -1,56 +0,0 @@
-# ThemeProvider Web Component
-
-Componente para gerenciamento global de temas na aplicação.
-
-## Instalação
-
-```bash
-npm install @rarui/theme-provider
-```
-
-## Uso Básico
-
-```html
-<rarui-theme-provider theme="dark">
-  <rarui-button>Botão com tema aplicado</rarui-button>
-</rarui-theme-provider>
-```
-
-## API Global
-
-```javascript
-// Alternar tema
-window.raruiTheme.setTheme('dark');
-
-// Obter tema atual
-const currentTheme = window.raruiTheme.getTheme();
-
-// Escutar mudanças de tema
-const unsubscribe = window.raruiTheme.subscribe((theme) => {
-  console.log('Tema mudou para:', theme);
-});
-
-// Evento global
-document.addEventListener('rarui-theme-change', (event) => {
-  console.log('Novo tema:', event.detail.theme);
-});
-```
-
-## Utilitários
-
-```javascript
-import { toggleTheme, isDarkTheme, onThemeChange } from '@rarui/theme-provider';
-
-// Alternar entre temas
-toggleTheme();
-
-// Verificar se está no tema escuro
-if (isDarkTheme()) {
-  console.log('Tema escuro ativo');
-}
-
-// Escutar mudanças
-const unsubscribe = onThemeChange((theme) => {
-  console.log('Tema atual:', theme);
-});
-```

package/src/surface/Accordion/README.md

@@ -1,93 +0,0 @@
-# Accordion
-
-The Accordion component displays a list of expandable sections that users can toggle open or closed. It provides an organized way to present large amounts of content in a compact format.
-
-## Installation
-
-```bash
-yarn add @rarui/accordion
-```
-
-## Usage
-
-```html
-<rarui-accordion selected-default="item-1">
-  <rarui-accordion-item index="item-1">
-    <rarui-accordion-header title="First Item" size="medium">
-    </rarui-accordion-header>
-    <rarui-accordion-body padding="base">
-      Content of the first accordion item.
-    </rarui-accordion-body>
-  </rarui-accordion-item>
-  
-  <rarui-accordion-item index="item-2">
-    <rarui-accordion-header title="Second Item" subtitle="With subtitle">
-    </rarui-accordion-header>
-    <rarui-accordion-body>
-      Content of the second accordion item.
-    </rarui-accordion-body>
-  </rarui-accordion-item>
-</rarui-accordion>
-```
-
-## Custom Content
-
-```html
-<rarui-accordion>
-  <rarui-accordion-item index="custom">
-    <rarui-accordion-header>
-      <my-icon slot="icon"></my-icon>
-      Custom header content
-    </rarui-accordion-header>
-    <rarui-accordion-body>
-      Custom body content
-    </rarui-accordion-body>
-  </rarui-accordion-item>
-</rarui-accordion>
-```
-
-## API
-
-### rarui-accordion
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `selected-default` | `string` | `""` | Index of the item that should be open by default |
-| `disabled` | `boolean` | `false` | Disables the entire accordion |
-
-### rarui-accordion-item
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `index` | `string` | `""` | Unique identifier for this item |
-
-### rarui-accordion-header
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `title` | `string` | `""` | Main title text |
-| `subtitle` | `string` | `""` | Secondary subtitle text |
-| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Size variant |
-| `no-icon-toggle` | `boolean` | `false` | Hide the toggle arrow icon |
-| `disabled` | `boolean` | `false` | Disable this specific header |
-
-#### Slots
-- `icon` - Custom icon element
-- `default` - Custom header content (when not using title/subtitle)
-
-### rarui-accordion-body
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `padding` | `"none" \| "base"` | `"base"` | Internal padding of the body |
-
-#### Slots
-- `default` - Body content
-
-## Events
-
-### rarui-accordion
-
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `accordion-change` | `{ selected: string }` | Fired when an item is expanded or collapsed |

package/src/surface/Banner/README.md

@@ -1,15 +0,0 @@
-# `@rarui/banner`
-
-The Banner component is used to display general messages for the user
-
-## Installation
-
-```sh
-$ yarn add @rarui/banner
-# or
-$ npm install @rarui/banner
-```
-
-## Usage
-
-View docs [here]().

package/src/surface/Card/README.md

@@ -1,15 +0,0 @@
-# `@rarui/checkbox`
-
-The Card component contains textual content, images, and actions about a topic.
-
-## Installation
-
-```sh
-$ yarn add @rarui/checkbox
-# or
-$ npm install @rarui/checkbox
-```
-
-## Usage
-
-View docs [here]().

package/src/surface/Modal/README.md

@@ -1,15 +0,0 @@
-# `@rarui/modal`
-
-The modal component provides a base for popovers, suspended forms, tutorials, or any other content above the UI main surface.
-
-## Installation
-
-```sh
-$ yarn add @rarui/modal
-# or
-$ npm install @rarui/modal
-```
-
-## Usage
-
-View docs [here]().

package/src/types/README.md

@@ -1,73 +0,0 @@
-# Web Components Type Utilities
-
-Shared TypeScript utilities for Rarui Web Components that automatically convert React component props to web component attributes with camelCase to kebab-case conversion.
-
-## Installation
-
-This package is part of the Rarui monorepo and is used internally by web components.
-
-```typescript
-import { WebComponentProperties } from "@rarui/web-components-types";
-```
-
-## Usage
-
-### Basic Usage
-
-```typescript
-import { SidebarProps } from "@rarui/typings";
-import { WebComponentProperties } from "@rarui/web-components-types";
-
-export type SidebarProperties = WebComponentProperties<
-  SidebarProps,
-  "onRemove" // Exclude callback properties
->;
-```
-
-### Available Types
-
-#### `WebComponentProperties<TReactProps, TExclude>`
-Main utility for creating web component properties from React props.
-
-- Converts camelCase to kebab-case
-- Excludes common React props (`children`, `className`, `style`, `ref`, `key`)
-- Allows additional exclusions
-
-#### `ExtendedWebComponentProperties<TReactProps, TExclude>`
-Extended version that also automatically excludes all callback properties (`onXxx`).
-
-#### `CamelToKebab<T>` and `CamelToKebabKeys<T>`
-Low-level utilities for string and object key conversion.
-
-### Conversion Examples
-
-| React Prop (camelCase) | Web Component Attribute (kebab-case) |
-|----------------------|-----------------------------------|
-| `maxWidth` | `max-width` |
-| `portalId` | `portal-id` |
-| `backgroundColor` | `background-color` |
-| `onRemove` | excluded (callback) |
-| `children` | excluded (React-only) |
-
-### Implementation Pattern
-
-```typescript
-// 1. Define types
-export type ComponentProperties = WebComponentProperties<
-  ReactComponentProps,
-  "specificCallbackToExclude"
->;
-
-// 2. Use in component
-@property({ type: String, attribute: "max-width" })
-maxWidth: ComponentProperties["max-width"] = "375px";
-```
-
-## Features
-
-- ✅ **Type Safety**: Full TypeScript support with IntelliSense
-- ✅ **Automatic Conversion**: camelCase → kebab-case
-- ✅ **Smart Exclusions**: Removes React-only properties
-- ✅ **Callback Handling**: Option to exclude callback properties
-- ✅ **Inheritance**: Inherit all properties from React components
-- ✅ **Extensible**: Easy to add custom exclusions