@redvars/peacock 3.2.0 → 3.2.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/readme.md

@@ -45,7 +45,7 @@ Visit [https://peacock.redvars.com](https://goatui.com) to view the documentatio
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.1.4/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.2.0/dist/peacock-loader.js'></script>
 </head>
 
 <p-avatar name="Shivaji Varma"></p-avatar>
@@ -64,25 +64,25 @@ Input controls are UI design elements that allow users to input information into
 collecting data and enabling user interactions. Some common examples of input controls include text fields, dropdown
 menus, checkboxes, and radio buttons.
 
-| Name                                                       | Component            | State |
-|------------------------------------------------------------|----------------------|-------|
+| Name                                                                | Component         | State |
+|---------------------------------------------------------------------|-------------------|-------|
 | [Code editor](https://peacock.redvars.com/components/code-editor)   | p-card-editor     | 🟢    |
-| Color picker                                               | p-color-picker    | 🔴    |
-| [Checkbox](https://peacock.redvars.com/components/checkbox)         | p-checkbox        | 🟢    |
-| [Date picker](https://peacock.redvars.com/components/date-picker)   | p-date-picker     | 🟡    |
-| Date Time picker                                           | p-datetime-picker | 🔴    |
-| [Form control](https://peacock.redvars.com/components/form-control) | p-form-control    | 🟡    |
-| File picker                                                | p-file-picker     | 🔴    |
+| Color picker                                                        | p-color-picker    | 🔴    |
+| [Checkbox](https://peacock.redvars.com/components/checkbox)         | base-checkbox     | 🟢    |
+| [Date picker](https://peacock.redvars.com/components/date-picker)   | date-picker       | 🟡    |
+| Date Time picker                                                    | p-datetime-picker | 🔴    |
+| [Form control](https://peacock.redvars.com/components/form-control) | base-field        | 🟡    |
+| File picker                                                         | p-file-picker     | 🔴    |
 | [HTML editor](https://peacock.redvars.com/components/html-editor)   | p-html-editor     | 🟢    |
-| [Input](https://peacock.redvars.com/components/input)               | p-input           | 🟢    |
+| [Input](https://peacock.redvars.com/components/input)               | input-field       | 🟢    |
 | [Input URL](https://peacock.redvars.com/components/input-url)       | p-input-url       | 🟢    |
-| Month picker                                               | p-month-picker    | 🔴    |
-| [Number](https://peacock.redvars.com/components/number)             | p-number          | 🟢    |
+| Month picker                                                        | p-month-picker    | 🔴    |
+| [Number](https://peacock.redvars.com/components/number)             | number-field      | 🟢    |
 | [Select](https://peacock.redvars.com/components/select)             | p-select          | 🟢    |
-| [Textarea](https://peacock.redvars.com/components/textarea)         | p-textarea        | 🟢    |
-| [Time picker](https://peacock.redvars.com/components/time-picker)   | p-time-picker     | 🟡    |
+| [Textarea](https://peacock.redvars.com/components/textarea)         | textarea-field    | 🟢    |
+| [Time picker](https://peacock.redvars.com/components/time-picker)   | time-picker       | 🟡    |
 | [URL input](https://peacock.redvars.com/components/url-input)       | p-url-input.      | 🔴    |
-| Week picker                                                | p-week-picker     | 🔴    |
+| Week picker                                                         | p-week-picker     | 🔴    |
 
 ## Navigation
 
@@ -92,7 +92,7 @@ include menus, tabs, and breadcrumbs.
 
 | Name                                                   | Component       | State |
 |--------------------------------------------------------|-----------------|-------|
-| [Breadcrumb](https://peacock.redvars.com/components/breadcrumb) | p-breadcrumb | 🟢    |
+| [Breadcrumb](https://peacock.redvars.com/components/breadcrumb) | base-breadcrumb | 🟢    |
 | [Dropdown](https://peacock.redvars.com/components/dropdown)     | p-dropdown   | 🟡    |
 | [Menu](https://peacock.redvars.com/components/menu)             | p-menu       | 🟡    |
 | [Tabs](https://peacock.redvars.com/components/tabs)             | p-tabs       | 🟢    |
@@ -100,17 +100,18 @@ include menus, tabs, and breadcrumbs.
 ## Informational
 
 Informational components are UI elements that provide information to users. They communicate important messages,
-updates, or instructions within the app or website. Some common examples of informational components include
-notifications, tooltips, and progress bars.
+updates, or instructions within the app or website. Some common examples of informational components
+include notifications, tooltips, and progress bars.
 
-| Name                                                                             | Component                 | State |
-|----------------------------------------------------------------------------------|---------------------------|-------|
-| [Badge](https://peacock.redvars.com/components/badge)                                     | p-badge                | 🟢    |
-| [Progress](https://peacock.redvars.com/components/progress)                               | p-progress             | 🟢    |
-| [Spinner](https://peacock.redvars.com/components/spinner)                                 | p-spinner              | 🟢    |
-| [Tooltip](https://peacock.redvars.com/components/tooltip)                                 | p-tooltip              | 🟢    |
-| [Notification](https://peacock.redvars.com/components/notification)                       | p-notification         | 🟢    |
-| [Notification Manager](https://peacock.redvars.com/components/notification-manager)       | p-notification-manager | 🟢    |
+| Name                                                                                | Component              | State |
+|-------------------------------------------------------------------------------------|------------------------|-------|
+| [Badge](https://peacock.redvars.com/components/badge)                               | base-badge             | 🟢    |
+| [Linear Progress](https://peacock.redvars.com/components/linear-progress)           | linear-progress        | 🟢    |
+| [Circular Progress](https://peacock.redvars.com/components/circular-progress)       | circular-progress      | 🟢    |
+| [Spinner](https://peacock.redvars.com/components/spinner)                           | p-spinner              | 🟢    |
+| [Tooltip](https://peacock.redvars.com/components/tooltip)                           | base-tooltip           | 🟢    |
+| [Notification](https://peacock.redvars.com/components/notification)                 | p-notification         | 🟢    |
+| [Notification Manager](https://peacock.redvars.com/components/notification-manager) | p-notification-manager | 🟢    |
 
 
 ## Containers
@@ -119,45 +120,45 @@ Containers are UI elements that group similar content together, making it easier
 the interface. Examples of common containers include cards, carousels, and accordions, which provide structure and
 organization to the content.
 
-| Name                                                 | Component      | State |
-|------------------------------------------------------|----------------|-------|
-| [Accordion](https://peacock.redvars.com/components/accordion) | p-accordion | 🟢    |
-| Card                                                 | p-card      | 🟡    |
+| Name                                                          | Component      | State |
+|---------------------------------------------------------------|----------------|-------|
+| [Accordion](https://peacock.redvars.com/components/accordion) | base-accordion | 🟢    |
+| Card                                                          | p-card         | 🟡    |
 
 ## General
 
 These components are used for general purpose. They include
 
-| Name                                                                       | Component                 | State |
-|----------------------------------------------------------------------------|---------------------------|-------|
-| [Avatar](https://peacock.redvars.com/components/avatar)                             | p-avatar               | 🟢    |
-| [Button](https://peacock.redvars.com/components/button)                             | p-button               | 🟢    |
-| [Button Group](https://peacock.redvars.com/components/button-group)                 | p-button-group         | 🟢    |
+| Name                                                                                | Component                 | State |
+|-------------------------------------------------------------------------------------|---------------------------|-------|
+| [Avatar](https://peacock.redvars.com/components/avatar)                             | base-avatar               | 🟢    |
+| [Button](https://peacock.redvars.com/components/button)                             | base-button               | 🟢    |
+| [Button Group](https://peacock.redvars.com/components/button-group)                 | button-group         | 🟢    |
 | [Calendar](https://peacock.redvars.com/components/calendar)                         | p-calendar             | 🟢    |
-| Card Select                                                                | p-cardselect           | 🔴    |
-| [Code Highlighter](https://peacock.redvars.com/components/code-highlighter)         | p-card-highlighter     | 🟢    |
-| Column                                                                     | p-col                  | 🔴    |
+| Card Select                                                                         | p-cardselect           | 🔴    |
+| [Code Highlighter](https://peacock.redvars.com/components/code-highlighter)         | code-highlighter     | 🟢    |
+| Column                                                                              | p-col                  | 🔴    |
 | [Empty State](https://peacock.redvars.com/components/empty-state)                   | p-empty-state          | 🟡    |
 | [Flow Designer ](https://peacock.redvars.com/components/flow-designer)              | p-flow-designer        | 🔵    |
-| Grid                                                                       | p-grid                 | 🔴    |
-| Group                                                                      | p-group                | 🔴    |
+| Grid                                                                                | p-grid                 | 🔴    |
+| Group                                                                               | p-group                | 🔴    |
 | [Header](https://peacock.redvars.com/components/header)                             | p-header               | 🟢    |
-| [Icon](https://peacock.redvars.com/components/icon)                                 | p-icon                 | 🟢    |
-| [Link](https://peacock.redvars.com/components/link)                                 | p-link                 | 🟢    |
+| [Icon](https://peacock.redvars.com/components/icon)                                 | base-icon                 | 🟢    |
+| [Link](https://peacock.redvars.com/components/link)                                 | base-link                 | 🟢    |
 | [Modal](https://peacock.redvars.com/components/modal)                               | p-modal                | 🟢    |
 | [Notification Manager](https://peacock.redvars.com/components/notification-manager) | p-notification-manager | 🟡    |
-| Observer                                                                   | p-observer             | 🔴    |
-| Pagination                                                                 | p-pagination           | 🔴    |
-| Radio Group                                                                | p-radiogroup           | 🔴    |
-| Row                                                                        | p-row                  | 🔴    |
+| Observer                                                                            | p-observer             | 🔴    |
+| Pagination                                                                          | p-pagination           | 🔴    |
+| Radio Group                                                                         | p-radiogroup           | 🔴    |
+| Row                                                                                 | p-row                  | 🔴    |
 | [Slider](https://peacock.redvars.com/components/slider)                             | p-slider               | 🟡    |
-| Spoiler                                                                    | p-spoiler              | 🔴    |
-| Stepper                                                                    | p-stepper              | 🔴    |
+| Spoiler                                                                             | p-spoiler              | 🔴    |
+| Stepper                                                                             | p-stepper              | 🔴    |
 | [Table](https://peacock.redvars.com/components/table)                               | p-table                | 🟡    |
-| [Tag](https://peacock.redvars.com/components/tag) / Chip                            | p-tag                  | 🟢    |
+| [Tag](https://peacock.redvars.com/components/tag) / Chip                            | base-tag                  | 🟢    |
 | [Text](https://peacock.redvars.com/components/text)                                 | p-text                 | 🟢    |
 | [Tree View](https://peacock.redvars.com/components/tree-view)                       | p-tree-view            | 🟡    |
-| [Toggle](https://peacock.redvars.com/components/toggle)                             | p-toggle               | 🟢    |
+| [Switch](https://peacock.redvars.com/components/switch)                             | base-switch               | 🟢    |
 
 ## Charts
 

package/src/{input/date-picker → date-picker}/date-picker.scss

@@ -1,4 +1,4 @@
-@use '../../../scss/mixin';
+@use '../../scss/mixin';
 
 @include mixin.base-styles;
 

package/src/{input/date-picker → date-picker}/date-picker.ts

@@ -1,9 +1,9 @@
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import BaseInput from '../BaseInput.js';
+import BaseInput from '../input/BaseInput.js';
 import styles from './date-picker.scss';
-import { spread } from '../../spread.js';
-import { redispatchEvent } from '../../utils.js';
+import { spread } from '../spread.js';
+import { redispatchEvent } from '../utils.js';
 
 /**
  * @label Date Picker

package/src/date-picker/index.ts

@@ -0,0 +1 @@
+export { DatePicker } from './date-picker.js';

package/src/{input/field → field}/field.scss

@@ -1,4 +1,4 @@
-@use '../../../scss/mixin';
+@use '../../scss/mixin';
 
 @include mixin.base-styles;
 

package/src/{input/field → field}/field.ts

@@ -2,7 +2,7 @@ import { html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './field.scss';
-import { observerSlotChangesWithCallback } from '../../utils.js';
+import { observerSlotChangesWithCallback } from '../utils.js';
 
 export class Field extends LitElement {
   static styles = [styles];

package/src/field/index.ts

@@ -0,0 +1 @@
+export { Field } from './field.js';

package/src/index.ts

@@ -15,15 +15,13 @@ export { Chip } from './chip/chip/index.js';
 export { LinearProgress } from './progress/linear-progress/index.js';
 export { CircularProgress } from './progress/circular-progress/index.js';
 export { Skeleton } from './skeleton/index.js';
-export {
-  Input,
-  Field,
-  NumberField,
-  DatePicker,
-  TimePicker,
-  Textarea,
-  Toggle,
-} from './input/index.js';
+export { Input } from './input/index.js';
+export { Field } from './field/index.js';
+export { NumberField } from './number-field/index.js';
+export { DatePicker } from './date-picker/index.js';
+export { TimePicker } from './time-picker/index.js';
+export { Textarea } from './textarea/index.js';
+export { Switch } from './switch/index.js';
 
 export { NumberCounter } from './number-counter/index.js';
 export { EmptyState } from './empty-state/index.js';

package/src/input/index.ts

@@ -1,7 +1 @@
-export { Input } from './input/input.js';
-export { Field } from './field/field.js';
-export { NumberField } from './number/number-field.js';
-export { Textarea } from './textarea/textarea.js';
-export { DatePicker } from './date-picker/date-picker.js';
-export { TimePicker } from './time-picker/time-picker.js';
-export { Toggle } from './toggle/toggle.js';
+export { Input } from './input.js';

package/src/input/{input/input.scss → input.scss}

@@ -1,4 +1,4 @@
-@use '../../../scss/mixin';
+@use '../../scss/mixin';
 
 @include mixin.base-styles;
 

package/src/input/{input/input.ts → input.ts}

@@ -1,9 +1,9 @@
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import BaseInput from '../BaseInput.js';
+import BaseInput from './BaseInput.js';
 import styles from './input.scss';
-import { spread } from '../../spread.js';
-import { redispatchEvent } from '../../utils.js';
+import { spread } from '../spread.js';
+import { redispatchEvent } from '../utils.js';
 
 /**
  * @label Input

package/src/number-field/index.ts

@@ -0,0 +1 @@
+export { NumberField } from './number-field.js';

package/src/{input/number/number.scss → number-field/number-field.scss}

@@ -1,4 +1,4 @@
-@use '../../../scss/mixin';
+@use '../../scss/mixin';
 
 @include mixin.base-styles;
 

package/src/{input/number → number-field}/number-field.ts

@@ -1,10 +1,10 @@
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import BaseInput from '../BaseInput.js';
-import styles from './number.scss';
-import { spread } from '../../spread.js';
-import { redispatchEvent } from '../../utils.js';
+import BaseInput from '../input/BaseInput.js';
+import styles from './number-field.scss';
+import { spread } from '../spread.js';
+import { redispatchEvent } from '../utils.js';
 
 /**
  * @label Number Field

package/src/peacock-loader.ts

@@ -12,13 +12,13 @@ import { Divider } from './divider/divider.js';
 import { Button } from './button/button/button.js';
 import { ButtonGroup } from './button/button-group/button-group.js';
 import { IconButton } from './button/icon-button/icon-button.js';
-import { Input } from './input/input/input.js';
-import { Field } from './input/field/field.js';
-import { NumberField } from './input/number/number-field.js';
-import { DatePicker } from './input/date-picker/date-picker.js';
-import { TimePicker } from './input/time-picker/time-picker.js';
-import { Textarea } from './input/textarea/textarea.js';
-import { Toggle } from './input/toggle/toggle.js';
+import { Input } from './input/input.js';
+import { Field } from './field/field.js';
+import { NumberField } from './number-field/number-field.js';
+import { DatePicker } from './date-picker/date-picker.js';
+import { TimePicker } from './time-picker/time-picker.js';
+import { Textarea } from './textarea/textarea.js';
+import { Switch } from './switch/switch.js';
 import { Checkbox } from './checkbox/checkbox.js';
 
 import { Accordion } from './accordion/accordion/accordion.js';
@@ -147,8 +147,8 @@ const loaderConfig: LoaderConfig = {
     'breadcrumb-item': {
       CustomElementClass: BreadcrumbItem,
     },
-    'base-toggle': {
-      CustomElementClass: Toggle,
+    'base-switch': {
+      CustomElementClass: Switch,
     },
     'base-checkbox': {
       CustomElementClass: Checkbox,

package/src/switch/index.ts

@@ -0,0 +1 @@
+export { Switch } from './switch.js';

package/src/{input/toggle/toggle.scss → switch/switch.scss}

@@ -1,14 +1,14 @@
-@use "../../../scss/mixin";
+@use "../../scss/mixin";
 
 @include mixin.base-styles;
 
 :host {
   display: inline-block;
-  --toggle-track-color: var(--color-primary);
-  --toggle-track-off-color: var(--color-surface-container-highest);
+  --switch-track-color: var(--color-primary);
+  --switch-track-off-color: var(--color-surface-container-highest);
 }
 
-.toggle {
+.switch {
   position: relative;
   display: flex;
   align-items: center;
@@ -34,7 +34,7 @@
 
   .track {
     position: relative;
-    background: var(--toggle-track-off-color);
+    background: var(--switch-track-off-color);
     border: 2px solid var(--color-outline);
     border-radius: var(--shape-corner-full);
     cursor: pointer;
@@ -53,12 +53,12 @@
       border-radius: var(--shape-corner-full);
       transition: all var(--duration-short2) var(--easing-standard);
       background: white;
-      height: var(--toggle-handle-radius);
-      width: var(--toggle-handle-radius);
-      background: var(--toggle-handle-color);
+      height: var(--switch-handle-radius);
+      width: var(--switch-handle-radius);
+      background: var(--switch-handle-color);
       .icon {
         --icon-size: .75rem;
-        --icon-color: var(--toggle-track-off-color);
+        --icon-color: var(--switch-track-off-color);
       }
 
     }
@@ -77,22 +77,22 @@
   }
 }
 
-.toggle.state-checked {
+.switch.state-checked {
   .track {
-    background: var(--toggle-track-color);
+    background: var(--switch-track-color);
     border-color: transparent;
   }
 
   .handle {
-    margin-inline-start: calc(100% - var(--toggle-handle-radius));
+    margin-inline-start: calc(100% - var(--switch-handle-radius));
     .icon {
       --icon-size: 1rem;
-      --icon-color: var(--toggle-track-color);
+      --icon-color: var(--switch-track-color);
     }
   }
 
   &.active .track {
-    border-color: var(--toggle-track-color);
+    border-color: var(--switch-track-color);
   }
 
   &.has-focus:not(.active) {
@@ -104,24 +104,24 @@
   }
 }
 
-.toggle {
+.switch {
   --_container-width: 3.25rem;
   --_container-height: 2rem;
-  --toggle-handle-radius: 16px;
-  --toggle-handle-color: var(--color-outline);
+  --switch-handle-radius: 16px;
+  --switch-handle-color: var(--color-outline);
 
   &.state-checked {
-    --toggle-handle-radius: 22px;
-    --toggle-handle-color: var(--color-surface-container-lowest);
+    --switch-handle-radius: 22px;
+    --switch-handle-color: var(--color-surface-container-lowest);
   }
 }
 
-.toggle.readonly {
+.switch.readonly {
   cursor: default;
 
   .track {
     border-color: var(--color-outline);
-    background: var(--toggle-track-off-color);
+    background: var(--switch-track-off-color);
     opacity: 0.38;
 
     .handle {
@@ -131,11 +131,11 @@
 
 }
 
-.toggle.disabled {
+.switch.disabled {
   cursor: not-allowed;
   .track {
     border-color: var(--color-on-surface);
-    background: var(--toggle-track-off-color);
+    background: var(--switch-track-off-color);
     opacity: 0.38;
 
     .handle {

package/src/{input/toggle/toggle.ts → switch/switch.ts}

@@ -1,37 +1,37 @@
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { spread } from '../../spread.js';
-import styles from './toggle.scss';
-import BaseInput from '../BaseInput.js';
+import { spread } from '../spread.js';
+import styles from './switch.scss';
+import BaseInput from '../input/BaseInput.js';
 
 /**
- * @label Toggle
- * @tag base-toggle
- * @rawTag toggle
+ * @label Switch
+ * @tag base-switch
+ * @rawTag switch
  *
  * @summary Captures boolean input with an on/off switch interaction.
  * @overview
  * <p>Toggles are used to enable or disable a single option. They provide immediate feedback about whether an option is active or inactive.</p>
  *
- * @cssprop --toggle-track-color: Color of the toggle track when checked.
- * @cssprop --toggle-track-off-color: Color of the toggle track when unchecked.
- * @cssprop --toggle-width: Width of the toggle track.
- * @cssprop --toggle-height: Height of the toggle track.
- * @cssprop --toggle-handle-radius: Size of the toggle handle.
- * @cssprop --toggle-handle-color: Color of the toggle handle.
+ * @cssprop --switch-track-color: Color of the switch track when checked.
+ * @cssprop --switch-track-off-color: Color of the switch track when unchecked.
+ * @cssprop --switch-width: Width of the switch track.
+ * @cssprop --switch-height: Height of the switch track.
+ * @cssprop --switch-handle-radius: Size of the switch handle.
+ * @cssprop --switch-handle-color: Color of the switch handle.
  *
- * @fires {CustomEvent} change - Dispatched when the toggle value changes.
- * @fires {CustomEvent} blur - Dispatched when the toggle loses focus.
- * @fires {CustomEvent} focus - Dispatched when the toggle receives focus.
+ * @fires {CustomEvent} change - Dispatched when the switch value changes.
+ * @fires {CustomEvent} blur - Dispatched when the switch loses focus.
+ * @fires {CustomEvent} focus - Dispatched when the switch receives focus.
  *
  * @example
  * ```html
- * <base-toggle value="true"></base-toggle>
+ * <base-switch value="true"></base-switch>
  * ```
  * @tags input, form
  */
-export class Toggle extends BaseInput {
+export class Switch extends BaseInput {
   static styles = [styles];
 
   @property({ type: Boolean })
@@ -44,7 +44,7 @@ export class Toggle extends BaseInput {
   name: string = '';
 
   /**
-   * The toggle label.
+   * The switch label.
    */
   @property({ type: String })
   label: string = '';
@@ -221,7 +221,7 @@ export class Toggle extends BaseInput {
 
   render() {
     const cssClasses = {
-      toggle: true,
+      switch: true,
       'state-checked': this.value,
       'has-focus': this.hasFocus,
       active: this.isActive,
@@ -269,5 +269,3 @@ export class Toggle extends BaseInput {
     `;
   }
 }
-
-customElements.define('base-toggle', Toggle);

package/src/textarea/index.ts

@@ -0,0 +1 @@
+export { Textarea } from './textarea.js';

package/src/{input/textarea → textarea}/textarea.scss

@@ -1,4 +1,4 @@
-@use '../../../scss/mixin';
+@use '../../scss/mixin';
 
 @include mixin.base-styles;
 

package/src/{input/textarea → textarea}/textarea.ts

@@ -1,9 +1,9 @@
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import BaseInput from '../BaseInput.js';
+import BaseInput from '../input/BaseInput.js';
 import styles from './textarea.scss';
-import { spread } from '../../spread.js';
-import { redispatchEvent } from '../../utils.js';
+import { spread } from '../spread.js';
+import { redispatchEvent } from '../utils.js';
 
 /**
  * @label Textarea

package/src/time-picker/index.ts

@@ -0,0 +1 @@
+export { TimePicker } from './time-picker.js';

package/src/{input/time-picker → time-picker}/time-picker.scss

@@ -1,4 +1,4 @@
-@use '../../../scss/mixin';
+@use '../../scss/mixin';
 
 @include mixin.base-styles;
 

package/src/{input/time-picker → time-picker}/time-picker.ts

@@ -1,9 +1,9 @@
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import BaseInput from '../BaseInput.js';
+import BaseInput from '../input/BaseInput.js';
 import styles from './time-picker.scss';
-import { spread } from '../../spread.js';
-import { redispatchEvent } from '../../utils.js';
+import { spread } from '../spread.js';
+import { redispatchEvent } from '../utils.js';
 
 /**
  * @label Time Picker

package/src/input/toggle/index.ts

@@ -1 +0,0 @@
-export { Toggle } from './toggle.js';