@plusui/library 0.1.0

package/cdn/components/dropdown/dropdown.style.js

@@ -0,0 +1,15 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const dropdownStyle = ce({
+    base: [
+        'dropdown-box antialiased flex flex-col max-w-80 max-h-80 absolute z-10 w-full shadow-lg overflow-y-auto',
+    ],
+    variants: {
+        isOpen: {
+            true: '',
+            false: 'hidden',
+        },
+    },
+});
+
+export { dropdownStyle };

package/cdn/components/dropdown/index.js

@@ -0,0 +1,15 @@
+import PlusDropdown from './dropdown.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import '../../query-assigned-elements-B8Evmg7O.js';
+import '../../base-Cl6v8-BZ.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import '../../floating-ui.dom-OBaMlALa.js';
+import './dropdown.style.js';
+import '../../index-B9iart53.js';
+
+customElements.define('plus-dropdown', PlusDropdown);
+
+export { PlusDropdown };

package/cdn/components/dropdown-item/dropdown-item.js

@@ -0,0 +1,104 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import Tailwind from '../base/tailwind-base.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { o } from '../../if-defined-D-m3dgRf.js';
+import { l } from '../../live-BOAtKRUN.js';
+import '../../global-Dh9axYQH.js';
+import '../../directive-DZCF8pFJ.js';
+
+/**
+ * @tag plus-dropdown-item
+ *
+ * Dropdown item component that represents a selectable option within a dropdown menu.
+ * Automatically registers itself as a dropdown-item slot.
+ *
+ * @slot - The default slot for dropdown item content
+ *
+ * @csspart base - The component's base wrapper
+ * @csspart item - The listbox item element
+ *
+ * @event click - Emitted when the dropdown item is clicked
+ *
+ * @cssproperty --i-bg-default - Controls the default background color
+ * @cssproperty --i-bg-hovered - Controls the background color when hovered
+ * @cssproperty --i-bg-pressed - Controls the background color when pressed
+ * @cssproperty --i-text-color - Controls the text color
+ * @cssproperty --i-selected-bg - Controls the background color when selected
+ */
+class PlusDropDownItem extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the size of the dropdown item
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Disables the dropdown item interaction
+         * When disabled, the item cannot be clicked or selected
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Indicates whether the dropdown item is currently selected
+         * The selected state is managed by the parent PlusDropdown component
+         * @default false
+         */
+        this.selected = false;
+    }
+    /**
+     * Lifecycle method called when the component is added to the DOM
+     * Automatically sets itself to be slotted as a dropdown-item
+     * @private
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.slot = 'dropdown-item';
+    }
+    /**
+     * Renders the dropdown item
+     * Uses plus-list-box-item as the underlying component
+     * with proper ARIA attributes for accessibility
+     * @returns The rendered template
+     */
+    render() {
+        return x `<plus-list-box-item
+      role="option"
+      aria-selected=${this.selected}
+      aria-disabled=${this.disabled}
+      aria-label=${o(this.text)}
+      size=${this.size}
+      text=${o(this.text)}
+      ?disabled=${this.disabled}
+      .selected=${l(this.selected)}
+      part="item"
+      tabindex=${this.disabled ? '-1' : '0'}
+      ><slot></slot
+    ></plus-list-box-item>`;
+    }
+}
+__decorate([
+    n({ type: String })
+], PlusDropDownItem.prototype, "size", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => value === 'true',
+    })
+], PlusDropDownItem.prototype, "disabled", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => value === 'true',
+    })
+], PlusDropDownItem.prototype, "selected", void 0);
+__decorate([
+    n({ attribute: 'text' })
+], PlusDropDownItem.prototype, "text", void 0);
+
+export { PlusDropDownItem, PlusDropDownItem as default };

package/cdn/components/dropdown-item/index.js

@@ -0,0 +1,12 @@
+import PlusDropDownItem from './dropdown-item.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import '../../if-defined-D-m3dgRf.js';
+import '../../live-BOAtKRUN.js';
+import '../../directive-DZCF8pFJ.js';
+
+customElements.define('plus-dropdown-item', PlusDropDownItem);
+
+export { PlusDropDownItem };