@boostdev/design-system-components 1.1.1 → 1.1.2

package/dist/web-components/ui/bds-separator.d.ts

@@ -0,0 +1,32 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-separator>` — framework-agnostic Separator custom element.
+ *
+ * Attributes:
+ *   orientation — "horizontal" (default) | "vertical"
+ *
+ * @example
+ * <bds-separator></bds-separator>
+ * <bds-separator orientation="vertical"></bds-separator>
+ */
+declare class BdsSeparator extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    orientation: 'horizontal' | 'vertical';
+    constructor();
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-separator': BdsSeparator;
+    }
+}
+
+export { BdsSeparator };

package/dist/web-components/ui/bds-separator.js

@@ -0,0 +1,7 @@
+import {
+  BdsSeparator
+} from "../chunk-VMMVWLXL.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsSeparator
+};

package/dist/web-components/ui/bds-skeleton.d.ts

@@ -0,0 +1,22 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * `<bds-skeleton>` — framework-agnostic Skeleton loading placeholder custom element.
+ *
+ * No attributes. The host inherits width/height from its container or inline styles.
+ *
+ * @example
+ * <bds-skeleton style="width: 200px; height: 1rem;"></bds-skeleton>
+ */
+declare class BdsSkeleton extends LitElement {
+    static styles: lit.CSSResult;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-skeleton': BdsSkeleton;
+    }
+}
+
+export { BdsSkeleton };

package/dist/web-components/ui/bds-skeleton.js

@@ -0,0 +1,7 @@
+import {
+  BdsSkeleton
+} from "../chunk-2QA62WCQ.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsSkeleton
+};

package/dist/web-components/ui/bds-typography.d.ts

@@ -0,0 +1,44 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
+/**
+ * `<bds-typography>` — framework-agnostic Typography custom element.
+ *
+ * Renders slotted content inside the appropriate semantic HTML element.
+ *
+ * Attributes:
+ *   variant   — "h1" | "h2" | "h3" | "body" (default) | "body_s"
+ *   component — override the rendered tag name (e.g. "span", "label")
+ *
+ * Slots:
+ *   (default) — text content
+ *
+ * @example
+ * <bds-typography variant="h1">Page title</bds-typography>
+ * <bds-typography variant="body_s" component="span">Small text</bds-typography>
+ */
+declare class BdsTypography extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        component: {
+            type: StringConstructor;
+        };
+    };
+    variant: TypographyVariant;
+    component: string;
+    constructor();
+    private get _tag();
+    render(): lit.TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-typography': BdsTypography;
+    }
+}
+
+export { BdsTypography, type TypographyVariant };

package/dist/web-components/ui/bds-typography.js

@@ -0,0 +1,8 @@
+import {
+  BdsTypography
+} from "../chunk-SOQQ7RVJ.js";
+import "../chunk-QPOKHLMQ.js";
+import "../chunk-LGEZYFUU.js";
+export {
+  BdsTypography
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -37,8 +37,171 @@
       "require": "./dist/client.cjs"
     },
     "./web-components": {
-      "types": "./dist/web-components.d.ts",
-      "import": "./dist/web-components.js"
+      "types": "./dist/web-components/index.d.ts",
+      "import": "./dist/web-components/index.js"
+    },
+    "./web-components/globals": {
+      "import": "./dist/web-components/globals.js"
+    },
+    "./web-components/ui/bds-alert": {
+      "types": "./dist/web-components/ui/bds-alert.d.ts",
+      "import": "./dist/web-components/ui/bds-alert.js"
+    },
+    "./web-components/ui/bds-avatar": {
+      "types": "./dist/web-components/ui/bds-avatar.d.ts",
+      "import": "./dist/web-components/ui/bds-avatar.js"
+    },
+    "./web-components/ui/bds-badge": {
+      "types": "./dist/web-components/ui/bds-badge.d.ts",
+      "import": "./dist/web-components/ui/bds-badge.js"
+    },
+    "./web-components/ui/bds-breadcrumb": {
+      "types": "./dist/web-components/ui/bds-breadcrumb.d.ts",
+      "import": "./dist/web-components/ui/bds-breadcrumb.js"
+    },
+    "./web-components/ui/bds-card": {
+      "types": "./dist/web-components/ui/bds-card.d.ts",
+      "import": "./dist/web-components/ui/bds-card.js"
+    },
+    "./web-components/ui/bds-description-list": {
+      "types": "./dist/web-components/ui/bds-description-list.d.ts",
+      "import": "./dist/web-components/ui/bds-description-list.js"
+    },
+    "./web-components/ui/bds-icon-wrapper": {
+      "types": "./dist/web-components/ui/bds-icon-wrapper.d.ts",
+      "import": "./dist/web-components/ui/bds-icon-wrapper.js"
+    },
+    "./web-components/ui/bds-link": {
+      "types": "./dist/web-components/ui/bds-link.d.ts",
+      "import": "./dist/web-components/ui/bds-link.js"
+    },
+    "./web-components/ui/bds-loading": {
+      "types": "./dist/web-components/ui/bds-loading.d.ts",
+      "import": "./dist/web-components/ui/bds-loading.js"
+    },
+    "./web-components/ui/bds-notification-banner": {
+      "types": "./dist/web-components/ui/bds-notification-banner.d.ts",
+      "import": "./dist/web-components/ui/bds-notification-banner.js"
+    },
+    "./web-components/ui/bds-progress": {
+      "types": "./dist/web-components/ui/bds-progress.d.ts",
+      "import": "./dist/web-components/ui/bds-progress.js"
+    },
+    "./web-components/ui/bds-progress-circle": {
+      "types": "./dist/web-components/ui/bds-progress-circle.d.ts",
+      "import": "./dist/web-components/ui/bds-progress-circle.js"
+    },
+    "./web-components/ui/bds-rating": {
+      "types": "./dist/web-components/ui/bds-rating.d.ts",
+      "import": "./dist/web-components/ui/bds-rating.js"
+    },
+    "./web-components/ui/bds-section-header": {
+      "types": "./dist/web-components/ui/bds-section-header.d.ts",
+      "import": "./dist/web-components/ui/bds-section-header.js"
+    },
+    "./web-components/ui/bds-separator": {
+      "types": "./dist/web-components/ui/bds-separator.d.ts",
+      "import": "./dist/web-components/ui/bds-separator.js"
+    },
+    "./web-components/ui/bds-skeleton": {
+      "types": "./dist/web-components/ui/bds-skeleton.d.ts",
+      "import": "./dist/web-components/ui/bds-skeleton.js"
+    },
+    "./web-components/ui/bds-typography": {
+      "types": "./dist/web-components/ui/bds-typography.d.ts",
+      "import": "./dist/web-components/ui/bds-typography.js"
+    },
+    "./web-components/interaction/bds-accordion": {
+      "types": "./dist/web-components/interaction/bds-accordion.d.ts",
+      "import": "./dist/web-components/interaction/bds-accordion.js"
+    },
+    "./web-components/interaction/bds-accordion-item": {
+      "types": "./dist/web-components/interaction/bds-accordion-item.d.ts",
+      "import": "./dist/web-components/interaction/bds-accordion-item.js"
+    },
+    "./web-components/interaction/bds-button": {
+      "types": "./dist/web-components/interaction/bds-button.d.ts",
+      "import": "./dist/web-components/interaction/bds-button.js"
+    },
+    "./web-components/interaction/bds-collapsible": {
+      "types": "./dist/web-components/interaction/bds-collapsible.d.ts",
+      "import": "./dist/web-components/interaction/bds-collapsible.js"
+    },
+    "./web-components/interaction/bds-dialog": {
+      "types": "./dist/web-components/interaction/bds-dialog.d.ts",
+      "import": "./dist/web-components/interaction/bds-dialog.js"
+    },
+    "./web-components/interaction/bds-drawer": {
+      "types": "./dist/web-components/interaction/bds-drawer.d.ts",
+      "import": "./dist/web-components/interaction/bds-drawer.js"
+    },
+    "./web-components/interaction/bds-popover": {
+      "types": "./dist/web-components/interaction/bds-popover.d.ts",
+      "import": "./dist/web-components/interaction/bds-popover.js"
+    },
+    "./web-components/interaction/bds-skip-link": {
+      "types": "./dist/web-components/interaction/bds-skip-link.d.ts",
+      "import": "./dist/web-components/interaction/bds-skip-link.js"
+    },
+    "./web-components/interaction/bds-tab": {
+      "types": "./dist/web-components/interaction/bds-tab.d.ts",
+      "import": "./dist/web-components/interaction/bds-tab.js"
+    },
+    "./web-components/interaction/bds-tab-panel": {
+      "types": "./dist/web-components/interaction/bds-tab-panel.d.ts",
+      "import": "./dist/web-components/interaction/bds-tab-panel.js"
+    },
+    "./web-components/interaction/bds-tabs": {
+      "types": "./dist/web-components/interaction/bds-tabs.d.ts",
+      "import": "./dist/web-components/interaction/bds-tabs.js"
+    },
+    "./web-components/interaction/bds-toast-provider": {
+      "types": "./dist/web-components/interaction/bds-toast-provider.d.ts",
+      "import": "./dist/web-components/interaction/bds-toast-provider.js"
+    },
+    "./web-components/interaction/bds-tooltip": {
+      "types": "./dist/web-components/interaction/bds-tooltip.d.ts",
+      "import": "./dist/web-components/interaction/bds-tooltip.js"
+    },
+    "./web-components/interaction/form/bds-checkbox": {
+      "types": "./dist/web-components/interaction/form/bds-checkbox.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-checkbox.js"
+    },
+    "./web-components/interaction/form/bds-combobox": {
+      "types": "./dist/web-components/interaction/form/bds-combobox.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-combobox.js"
+    },
+    "./web-components/interaction/form/bds-file-input": {
+      "types": "./dist/web-components/interaction/form/bds-file-input.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-file-input.js"
+    },
+    "./web-components/interaction/form/bds-number-input": {
+      "types": "./dist/web-components/interaction/form/bds-number-input.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-number-input.js"
+    },
+    "./web-components/interaction/form/bds-radio": {
+      "types": "./dist/web-components/interaction/form/bds-radio.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-radio.js"
+    },
+    "./web-components/interaction/form/bds-segmented-control": {
+      "types": "./dist/web-components/interaction/form/bds-segmented-control.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-segmented-control.js"
+    },
+    "./web-components/interaction/form/bds-select": {
+      "types": "./dist/web-components/interaction/form/bds-select.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-select.js"
+    },
+    "./web-components/interaction/form/bds-slider": {
+      "types": "./dist/web-components/interaction/form/bds-slider.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-slider.js"
+    },
+    "./web-components/interaction/form/bds-switch": {
+      "types": "./dist/web-components/interaction/form/bds-switch.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-switch.js"
+    },
+    "./web-components/interaction/form/bds-textarea": {
+      "types": "./dist/web-components/interaction/form/bds-textarea.d.ts",
+      "import": "./dist/web-components/interaction/form/bds-textarea.js"
     },
     "./css": "./dist/index.css",
     "./css/bdc": "./src/css/bdc.css",
@@ -168,7 +331,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "sideEffects": [
-    "src/css/**/*.css"
+    "src/css/**/*.css",
+    "src/web-components/globals.ts",
+    "dist/web-components/**/*.js"
   ],
   "dependencies": {
     "@oddbird/css-anchor-positioning": "^0.9.0"

package/src/web-components/index.ts

@@ -10,3 +10,50 @@ export { BdsAlert } from './ui/bds-alert';
 // Phase 2 — layout-driven components
 export { BdsPopover } from './interaction/bds-popover';
 export { BdsToastProvider } from './interaction/bds-toast-provider';
+
+// Phase 3 — simple UI display
+export { BdsSeparator } from './ui/bds-separator';
+export { BdsSkeleton } from './ui/bds-skeleton';
+export { BdsLoading } from './ui/bds-loading';
+export { BdsAvatar } from './ui/bds-avatar';
+export { BdsTypography } from './ui/bds-typography';
+export { BdsProgress } from './ui/bds-progress';
+export { BdsProgressCircle } from './ui/bds-progress-circle';
+export { BdsRating } from './ui/bds-rating';
+
+// Phase 3 — interactive with state
+export { BdsCollapsible } from './interaction/bds-collapsible';
+export { BdsAccordionItem } from './interaction/bds-accordion-item';
+export { BdsAccordion } from './interaction/bds-accordion';
+export { BdsTab } from './interaction/bds-tab';
+export { BdsTabPanel } from './interaction/bds-tab-panel';
+export { BdsTabs } from './interaction/bds-tabs';
+export { BdsTooltip } from './interaction/bds-tooltip';
+export { BdsSkipLink } from './interaction/bds-skip-link';
+
+// Phase 4 — modal overlays
+export { BdsDialog } from './interaction/bds-dialog';
+export { BdsDrawer } from './interaction/bds-drawer';
+
+// Phase 5 — basic form inputs (ElementInternals)
+export { BdsCheckbox } from './interaction/form/bds-checkbox';
+export { BdsRadio } from './interaction/form/bds-radio';
+export { BdsSwitch } from './interaction/form/bds-switch';
+export { BdsSelect } from './interaction/form/bds-select';
+export { BdsTextarea } from './interaction/form/bds-textarea';
+
+// Phase 6 — complex form inputs (ElementInternals)
+export { BdsNumberInput } from './interaction/form/bds-number-input';
+export { BdsSlider } from './interaction/form/bds-slider';
+export { BdsSegmentedControl } from './interaction/form/bds-segmented-control';
+export { BdsFileInput } from './interaction/form/bds-file-input';
+export { BdsCombobox } from './interaction/form/bds-combobox';
+
+// Phase 7 — slotted content display
+export { BdsNotificationBanner } from './ui/bds-notification-banner';
+export { BdsCard } from './ui/bds-card';
+export { BdsSectionHeader } from './ui/bds-section-header';
+export { BdsIconWrapper } from './ui/bds-icon-wrapper';
+export { BdsDescriptionList } from './ui/bds-description-list';
+export { BdsBreadcrumb } from './ui/bds-breadcrumb';
+export { BdsLink } from './ui/bds-link';

package/src/web-components/interaction/bds-accordion-item.spec.ts

@@ -0,0 +1,75 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsAccordionItem } from './bds-accordion-item';
+
+describe('bds-accordion-item', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-accordion-item')).toBe(BdsAccordionItem);
+  });
+
+  it('is closed by default', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>') as BdsAccordionItem;
+    expect(el.open).toBe(false);
+    cleanup(el);
+  });
+
+  it('renders a trigger button', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    expect(el.shadowRoot!.querySelector('button.trigger')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('trigger has aria-expanded="false" when closed', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    expect(btn.getAttribute('aria-expanded')).toBe('false');
+    cleanup(el);
+  });
+
+  it('trigger has aria-expanded="true" when open', async () => {
+    const el = await fixture('<bds-accordion-item open><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    expect(btn.getAttribute('aria-expanded')).toBe('true');
+    cleanup(el);
+  });
+
+  it('panel is hidden when closed', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const panel = el.shadowRoot!.querySelector('[role="region"]')!;
+    expect(panel.hasAttribute('hidden')).toBe(true);
+    cleanup(el);
+  });
+
+  it('panel is visible when open', async () => {
+    const el = await fixture('<bds-accordion-item open><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const panel = el.shadowRoot!.querySelector('[role="region"]')!;
+    expect(panel.hasAttribute('hidden')).toBe(false);
+    cleanup(el);
+  });
+
+  it('fires bds-accordion-item-toggle when trigger is clicked', async () => {
+    const el = await fixture('<bds-accordion-item><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    const handler = vi.fn();
+    el.addEventListener('bds-accordion-item-toggle', handler);
+    btn.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+    expect(handler).toHaveBeenCalledOnce();
+    cleanup(el);
+  });
+
+  it('does not fire toggle event when disabled', async () => {
+    const el = await fixture('<bds-accordion-item disabled><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    const handler = vi.fn();
+    el.addEventListener('bds-accordion-item-toggle', handler);
+    btn.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+    expect(handler).not.toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('button is disabled when disabled attribute is set', async () => {
+    const el = await fixture('<bds-accordion-item disabled><span slot="header">Q</span><p>A</p></bds-accordion-item>');
+    const btn = el.shadowRoot!.querySelector('button')!;
+    expect(btn.hasAttribute('disabled')).toBe(true);
+    cleanup(el);
+  });
+});

package/src/web-components/interaction/bds-accordion-item.ts

@@ -0,0 +1,181 @@
+import { LitElement, css, html } from 'lit';
+
+/**
+ * `<bds-accordion-item>` — child element of `<bds-accordion>`.
+ *
+ * Manages a single collapsible panel. The `open` and `disabled` state is
+ * controlled by the parent `<bds-accordion>` element.
+ *
+ * Attributes:
+ *   open     — boolean; whether the panel is expanded
+ *   disabled — boolean; prevents the user from toggling this item
+ *
+ * Slots:
+ *   header   — the always-visible trigger label
+ *   (default) — the content revealed when open
+ *
+ * Events:
+ *   bds-accordion-item-toggle — fired (bubbles, composed) when the trigger
+ *                               button is clicked; the parent accordion handles
+ *                               the state change.
+ *
+ * @example
+ * <bds-accordion-item>
+ *   <span slot="header">Question</span>
+ *   <p>Answer content</p>
+ * </bds-accordion-item>
+ */
+export class BdsAccordionItem extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+    }
+
+    :host(:last-child) {
+      border-block-end: none;
+    }
+
+    .heading {
+      margin: 0;
+    }
+
+    .trigger {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      inline-size: 100%;
+      padding: var(--bds-space_m);
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+      box-sizing: border-box;
+    }
+
+    .trigger:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .trigger:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: calc(var(--bds-outline_offset) * -1);
+      border-radius: var(--bds-border_radius--xs);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .trigger:not(:disabled):hover {
+        background-color: var(--bds-color_bg--subtle);
+      }
+    }
+
+    .trigger-label {
+      flex: 1;
+      text-align: start;
+    }
+
+    .chevron {
+      inline-size: 1.25rem;
+      block-size: 1.25rem;
+      flex-shrink: 0;
+      transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(180deg);
+    }
+
+    .panel {
+      overflow: hidden;
+    }
+
+    .panel-content {
+      padding: 0 var(--bds-space_m) var(--bds-space_m);
+      color: var(--bds-color_on-bg);
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .chevron {
+        transition: none;
+      }
+    }
+  `;
+
+  static properties = {
+    open:     { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+  };
+
+  declare open: boolean;
+  declare disabled: boolean;
+
+  // Stable IDs for aria-controls / aria-labelledby
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
+
+  constructor() {
+    super();
+    this.open = false;
+    this.disabled = false;
+  }
+
+  private _handleTriggerClick() {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent('bds-accordion-item-toggle', { bubbles: true, composed: true }),
+    );
+  }
+
+  render() {
+    const triggerId = `bds-acc-trigger-${this._uid}`;
+    const panelId = `bds-acc-panel-${this._uid}`;
+
+    return html`
+      <h3 class="heading">
+        <button
+          type="button"
+          id=${triggerId}
+          class="trigger"
+          aria-expanded=${this.open}
+          aria-controls=${panelId}
+          ?disabled=${this.disabled}
+          @click=${this._handleTriggerClick}
+        >
+          <span class="trigger-label"><slot name="header"></slot></span>
+          <svg
+            class="chevron"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
+          </svg>
+        </button>
+      </h3>
+      <div
+        id=${panelId}
+        class="panel"
+        role="region"
+        aria-labelledby=${triggerId}
+        ?hidden=${!this.open}
+      >
+        <div class="panel-content"><slot></slot></div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-accordion-item', BdsAccordionItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-accordion-item': BdsAccordionItem;
+  }
+}