@plusui/library 0.1.0

package/cdn/components/badge/badge.js

@@ -0,0 +1,151 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import Tailwind from '../base/tailwind-base.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import badgeHostStyle from './badge.host.style.js';
+import { badgeStyle } from './badge.style.js';
+import { o } from '../../style-map-DC_vNus2.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+import '../../directive-DZCF8pFJ.js';
+
+/**
+ * @tag plus-badge
+ * @summary Badge component that displays a small status indicator.
+ *
+ * @slot - The content that the badge will be attached to
+ * @slot badge-content - The badge content (text, number, etc.)
+ *
+ * @csspart badge - The component's base wrapper
+ *
+ * @cssproperty --text-color - Controls the text color of the badge
+ * @cssproperty --border-color - Controls the border color of the badge
+ * @cssproperty --bg-default - Controls the default background color
+ *
+ * @example
+ * ```html
+ * <plus-badge status="success">
+ *   <span>Notifications</span>
+ *   <span slot="badge-content">3</span>
+ * </plus-badge>
+ * ```
+ */
+const textColorMap = {
+    default: 'default',
+    primary: 'base',
+    success: 'base',
+    warning: 'base',
+    danger: 'base',
+    info: 'base',
+};
+class PlusBadge extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the status/color variant of the badge
+         * - default: Neutral color scheme
+         * - primary: Brand color scheme
+         * - success: Green color scheme
+         * - warning: Yellow color scheme
+         * - danger: Red color scheme
+         * - info: Blue color scheme
+         * @default 'default'
+         */
+        this.status = 'default';
+        /**
+         * Sets the size of the badge
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Sets the position of the badge relative to its content
+         * - top-right: Top right corner
+         * - top-left: Top left corner
+         * - bottom-right: Bottom right corner
+         * - bottom-left: Bottom left corner
+         * - '': No specific position
+         * @default 'top-right'
+         */
+        this.orientation = 'top-right';
+        this.hasSlot = false;
+    }
+    handleSlotChange(e) {
+        const slot = e.target;
+        const nodes = slot.assignedNodes({ flatten: true });
+        this.hasSlot = nodes.length > 0;
+    }
+    render() {
+        const getColorVariables = () => {
+            return {
+                '--i-bg-default': `var(--plus-color-background-${this.status}-default)`,
+                '--i-text-color': `var(--plus-color-text-${textColorMap[this.status]})`,
+                '--i-border-color': `var(--plus-color-border-${this.status})`,
+            };
+        };
+        const dynamicStyles = {
+            '--d-text': 'var(--text-color,var(--i-text-color))',
+            '--d-border': 'var(--border-color,var(--i-border-color))',
+            '--d-bg-default': 'var(--bg-default,var(--i-bg-default))',
+        };
+        const { offset } = this;
+        const hasContent = !!(this.content || this.hasSlot);
+        return x `
+      <slot></slot>
+      <div
+        part="badge"
+        role="status"
+        aria-live="polite"
+        style=${o({
+            ...dynamicStyles,
+            ...getColorVariables(),
+            ...(offset && { transform: `translate(${offset[0]}, ${offset[1]})` }),
+        })}
+        class=${badgeStyle({
+            size: this.size,
+            hasContent,
+            orientation: this.orientation,
+            status: this.status,
+        })}
+      >
+        <slot name="badge-content" @slotchange=${this.handleSlotChange}
+          >${this.content}</slot
+        >
+      </div>
+    `;
+    }
+}
+PlusBadge.styles = [...Tailwind.styles, badgeHostStyle];
+__decorate([
+    n({ type: String })
+], PlusBadge.prototype, "status", void 0);
+__decorate([
+    n({ type: String })
+], PlusBadge.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], PlusBadge.prototype, "orientation", void 0);
+__decorate([
+    n({
+        type: Array,
+        converter: (value) => {
+            const split = value ? value.split(',') : [];
+            if (split?.length > 1) {
+                return [split[0], split[1]];
+            }
+            else {
+                return [value, value];
+            }
+        },
+    })
+], PlusBadge.prototype, "offset", void 0);
+__decorate([
+    n({ type: String })
+], PlusBadge.prototype, "content", void 0);
+__decorate([
+    r()
+], PlusBadge.prototype, "hasSlot", void 0);
+
+export { PlusBadge, PlusBadge as default };

package/cdn/components/badge/badge.style.js

@@ -0,0 +1,62 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const badgeStyle = ce({
+    base: [
+        'plus-badge antialiased flex flex-row items-center justify-center font-sans rounded-full',
+        'absolute z-10',
+        'text-(--d-text)',
+        'bg-(--d-bg-default)',
+        'border border-(--d-border)',
+    ],
+    variants: {
+        size: {
+            sm: 'h-4 min-w-4 text-xs px-1',
+            md: 'h-5 min-w-5 text-sm px-1.5',
+            lg: 'h-6 min-w-6 text-base px-2',
+        },
+        hasContent: {
+            true: 'py-0.5',
+            false: 'min-w-0 px-0 py-0',
+        },
+        status: {
+            default: 'default',
+            primary: 'primary',
+            success: 'success',
+            warning: 'warning',
+            danger: 'danger',
+            info: 'info',
+        },
+        orientation: {
+            'top-right': 'top-0 right-0 translate-x-[50%] translate-y-[-50%]',
+            'top-left': 'top-0 left-0 translate-x-[-50%] translate-y-[-50%]',
+            'bottom-right': 'bottom-0 right-0 translate-x-[50%] translate-y-[50%]',
+            'bottom-left': 'bottom-0 left-0 translate-x-[-50%] translate-y-[50%]',
+            '': '',
+        },
+    },
+    compoundVariants: [
+        {
+            hasContent: false,
+            size: 'sm',
+            class: 'p-0 w-1.5 h-1.5',
+        },
+        {
+            hasContent: false,
+            size: 'md',
+            class: 'p-0 w-2 h-2',
+        },
+        {
+            hasContent: false,
+            size: 'lg',
+            class: 'p-0 w-2.5 h-2.5',
+        },
+    ],
+    defaultVariants: {
+        size: 'md',
+        hasContent: false,
+        orientation: 'top-right',
+        status: 'default',
+    },
+});
+
+export { badgeStyle };

package/cdn/components/badge/index.js

@@ -0,0 +1,15 @@
+import PlusBadge from './badge.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import './badge.host.style.js';
+import './badge.style.js';
+import '../../index-B9iart53.js';
+import '../../style-map-DC_vNus2.js';
+import '../../directive-DZCF8pFJ.js';
+
+customElements.define('plus-badge', PlusBadge);
+
+export { PlusBadge };

package/cdn/components/base/index.js

@@ -0,0 +1,3 @@
+import './tailwind-base.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../global-Dh9axYQH.js';

package/cdn/components/base/tailwind-base.js

@@ -0,0 +1,192 @@
+import { i, a as r, r as r$1 } from '../../lit-element-ByzbtpGk.js';
+import { c as css_248z } from '../../global-Dh9axYQH.js';
+
+var preflight = i `
+  @layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      border: 0 solid;
+    }
+
+    html,
+    :host {
+      line-height: 1.5;
+      -webkit-text-size-adjust: 100%;
+      tab-size: 4;
+      font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+      font-feature-settings: var(--default-font-feature-settings, normal);
+      font-variation-settings: var(--default-font-variation-settings, normal);
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    body {
+      line-height: inherit;
+    }
+
+    a {
+      color: inherit;
+      -webkit-text-decoration: inherit;
+      text-decoration: inherit;
+    }
+
+    b,
+    strong {
+      font-weight: bolder;
+    }
+
+    :-moz-focusring {
+      outline: auto;
+    }
+
+    progress {
+      vertical-align: baseline;
+    }
+
+    summary {
+      display: list-item;
+    }
+
+    ol,
+    ul,
+    menu {
+      list-style: none;
+    }
+
+    img,
+    svg {
+      display: block;
+
+      vertical-align: middle;
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+
+    button,
+    input,
+    select,
+    optgroup,
+    textarea,
+    ::file-selector-button {
+      font: inherit;
+
+      font-feature-settings: inherit;
+
+      font-variation-settings: inherit;
+
+      letter-spacing: inherit;
+
+      color: inherit;
+
+      border-radius: 0;
+
+      background-color: transparent;
+
+      opacity: 1;
+    }
+
+    :where(select:is([multiple], [size])) optgroup {
+      font-weight: bolder;
+    }
+
+    :where(select:is([multiple], [size])) optgroup option {
+      padding-inline-start: 20px;
+    }
+
+    ::file-selector-button {
+      margin-inline-end: 4px;
+    }
+
+    ::placeholder {
+      opacity: 1;
+
+      color: color-mix(in oklab, currentColor 50%, transparent);
+    }
+
+    textarea {
+      resize: vertical;
+    }
+
+    ::-webkit-search-decoration {
+      -webkit-appearance: none;
+    }
+
+    ::-webkit-date-and-time-value {
+      min-height: 1lh;
+
+      text-align: inherit;
+    }
+
+    ::-webkit-datetime-edit {
+      display: inline-flex;
+    }
+
+    ::-webkit-datetime-edit-fields-wrapper {
+      padding: 0;
+    }
+
+    ::-webkit-datetime-edit,
+    ::-webkit-datetime-edit-year-field,
+    ::-webkit-datetime-edit-month-field,
+    ::-webkit-datetime-edit-day-field,
+    ::-webkit-datetime-edit-hour-field,
+    ::-webkit-datetime-edit-minute-field,
+    ::-webkit-datetime-edit-second-field,
+    ::-webkit-datetime-edit-millisecond-field,
+    ::-webkit-datetime-edit-meridiem-field {
+      padding-block: 0;
+    }
+
+    :-moz-ui-invalid {
+      box-shadow: none;
+    }
+
+    button,
+    input:where([type='button'], [type='reset'], [type='submit']),
+    ::file-selector-button {
+      appearance: button;
+    }
+
+    ::-webkit-inner-spin-button,
+    ::-webkit-outer-spin-button {
+      height: auto;
+    }
+
+    [hidden]:where(:not([hidden='until-found'])) {
+      display: none !important;
+    }
+  }
+`;
+
+class Tailwind extends r$1 {
+    constructor() {
+        super();
+    }
+    emit(name, options) {
+        const event = new CustomEvent(name, {
+            bubbles: true,
+            cancelable: true,
+            composed: false,
+            detail: {},
+            ...options,
+        });
+        this.dispatchEvent(event);
+        return event;
+    }
+}
+Tailwind.styles = [
+    preflight,
+    i `
+      ${r(css_248z)}
+    `,
+];
+
+export { Tailwind, Tailwind as default };

package/cdn/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,59 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { o } from '../../query-assigned-elements-B8Evmg7O.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { breadcrumbStyle } from './breadcrumb.style.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-breadcrumb
+ *
+ * Displays a hierarchical navigation path, typically showing the user's location within a site or app.
+ * It uses `plus-breadcrumb-item` components slotted inside for each step in the path.
+ *
+ * @slot - Default slot for `plus-breadcrumb-item` elements.
+ *
+ * @csspart base - The main container element (`nav`).
+ */
+class PlusBreadcrumb extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /** Defines the visual style of the breadcrumb container. */
+        this.kind = 'non-framed';
+        /** The type of separator to display between items. */
+        this.separator = 'arrow';
+        /** The size of the breadcrumb items and separators. */
+        this.size = 'md';
+    }
+    handleSlotChange() {
+        this._items.forEach((item, index) => {
+            item.isLastItemInternal = index === this._items.length - 1;
+            item.sizeInternal = this.size;
+            item.separatorInternal = this.separator;
+        });
+    }
+    render() {
+        const baseClass = breadcrumbStyle({ kind: this.kind, size: this.size });
+        return x `
+      <nav part="base" class=${baseClass} aria-label="Breadcrumb">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+    `;
+    }
+}
+__decorate([
+    o({ flatten: true })
+], PlusBreadcrumb.prototype, "_items", void 0);
+__decorate([
+    n({ type: String })
+], PlusBreadcrumb.prototype, "kind", void 0);
+__decorate([
+    n({ type: String })
+], PlusBreadcrumb.prototype, "separator", void 0);
+__decorate([
+    n({ type: String })
+], PlusBreadcrumb.prototype, "size", void 0);
+
+export { PlusBreadcrumb };

package/cdn/components/breadcrumb/breadcrumb.style.js

@@ -0,0 +1,39 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const breadcrumbStyle = ce({
+    base: 'plus-breadcrumb flex items-center',
+    variants: {
+        kind: {
+            'non-framed': '',
+            framed: 'bg-color-surface border border-color-default rounded',
+        },
+        size: {
+            sm: 'text-sm p-1',
+            md: 'text-base p-1.5',
+            lg: 'text-lg p-2',
+        },
+    },
+    compoundVariants: [
+        {
+            kind: 'non-framed',
+            size: 'sm',
+            class: 'p-0',
+        },
+        {
+            kind: 'non-framed',
+            size: 'md',
+            class: 'p-0',
+        },
+        {
+            kind: 'non-framed',
+            size: 'lg',
+            class: 'p-0',
+        },
+    ],
+    defaultVariants: {
+        kind: 'non-framed',
+        size: 'md',
+    },
+});
+
+export { breadcrumbStyle };

package/cdn/components/breadcrumb/index.js

@@ -0,0 +1,13 @@
+import { PlusBreadcrumb } from './breadcrumb.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../query-assigned-elements-B8Evmg7O.js';
+import '../../base-Cl6v8-BZ.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import './breadcrumb.style.js';
+import '../../index-B9iart53.js';
+
+customElements.define('plus-breadcrumb', PlusBreadcrumb);
+
+export { PlusBreadcrumb };

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

@@ -0,0 +1,132 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { E, x } from '../../lit-element-ByzbtpGk.js';
+import { SlotController } from '../../controllers/slot-controller.js';
+import Tailwind from '../base/tailwind-base.js';
+import { breadcrumbItemStyle } from './breadcrumb-item.style.js';
+import { o } from '../../if-defined-D-m3dgRf.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-breadcrumb-item
+ *
+ * Represents a single item within a breadcrumb trail.
+ * Should be used inside a `plus-breadcrumb` component.
+ *
+ * @slot - The default slot for the item's label content.
+ * @slot prefix - Optional slot for content/icon to display before the label. Overrides `prefix-icon` property.
+ * @slot suffix - Optional slot for content/icon to display after the label. Overrides `suffix-icon` property.
+ *
+ * @csspart base - The component's base wrapper element.
+ * @csspart link - The `plus-link` element (if `href` is provided).
+ * @csspart text - The `span` element (if `href` is not provided).
+ * @csspart prefix - The prefix container (slot or icon).
+ * @csspart suffix - The suffix container (slot or icon).
+ * @csspart separator - The separator element.
+ */
+class PlusBreadcrumbItem extends Tailwind {
+    constructor() {
+        super(...arguments);
+        this.slotController = new SlotController(this);
+        // Internal properties managed by the parent breadcrumb
+        /** @internal */
+        this.isLastItemInternal = false;
+        /** @internal */
+        this.sizeInternal = 'md';
+        /** @internal */
+        this.separatorInternal = 'arrow';
+    }
+    renderSeparator() {
+        if (this.isLastItemInternal)
+            return E;
+        const { separator } = breadcrumbItemStyle({
+            size: this.sizeInternal,
+            isLastItem: this.isLastItemInternal,
+        });
+        const iconName = this.separatorInternal === 'arrow' ? 'angle-right' : 'slash-forward';
+        const separatorContent = this.separatorInternal === 'slash'
+            ? '/'
+            : x `<plus-svg-icon iconName=${iconName}></plus-svg-icon>`;
+        return x `<span part="separator" class=${separator()}
+      >${separatorContent}</span
+    >`;
+    }
+    renderPrefix() {
+        const { prefix } = breadcrumbItemStyle({ size: this.sizeInternal });
+        const hasPrefixSlot = this.slotController.hasNamedSlot('prefix');
+        return x `
+      <span part="prefix" class=${prefix()}
+        >${hasPrefixSlot
+            ? x `<slot name="prefix"></slot>`
+            : this.prefixIcon
+                ? x `<plus-svg-icon iconName=${this.prefixIcon}></plus-svg-icon>`
+                : E}</span
+      >
+    `;
+    }
+    renderSuffix() {
+        const { suffix } = breadcrumbItemStyle({ size: this.sizeInternal });
+        const hasSuffixSlot = this.slotController.hasNamedSlot('suffix');
+        return x `
+      <span part="suffix" class=${suffix()}
+        >${hasSuffixSlot
+            ? x `<slot name="suffix"></slot>`
+            : this.suffixIcon
+                ? x `<plus-svg-icon iconName=${this.suffixIcon}></plus-svg-icon>`
+                : E}</span
+      >
+    `;
+    }
+    render() {
+        const { base } = breadcrumbItemStyle({
+            size: this.sizeInternal,
+            isLastItem: this.isLastItemInternal,
+        });
+        const content = x `
+      <div class="flex items-center gap-2">
+        ${this.renderPrefix()}
+        <slot></slot>
+        ${this.renderSuffix()}
+      </div>
+    `;
+        return x `
+      <div part="base" class=${base()}>
+        ${this.href
+            ? x `<plus-link
+              part="link"
+              href=${this.href}
+              size=${this.sizeInternal}
+              ?disabled=${this.isLastItemInternal}
+              aria-current=${o(this.isLastItemInternal ? 'page' : undefined)}
+              >${content}</plus-link
+            >`
+            : x `<span
+              part="text"
+              aria-current=${o(this.isLastItemInternal ? 'page' : undefined)}
+              >${content}</span
+            >`}
+        ${this.renderSeparator()}
+      </div>
+    `;
+    }
+}
+__decorate([
+    n({ type: String })
+], PlusBreadcrumbItem.prototype, "href", void 0);
+__decorate([
+    n({ type: String, attribute: 'prefix-icon' })
+], PlusBreadcrumbItem.prototype, "prefixIcon", void 0);
+__decorate([
+    n({ type: String, attribute: 'suffix-icon' })
+], PlusBreadcrumbItem.prototype, "suffixIcon", void 0);
+__decorate([
+    n({ type: Boolean, attribute: false })
+], PlusBreadcrumbItem.prototype, "isLastItemInternal", void 0);
+__decorate([
+    n({ type: String, attribute: false })
+], PlusBreadcrumbItem.prototype, "sizeInternal", void 0);
+__decorate([
+    n({ type: String, attribute: false })
+], PlusBreadcrumbItem.prototype, "separatorInternal", void 0);
+
+export { PlusBreadcrumbItem };