Content tree - Content tree base component

src/components/modus-wc-autocomplete/readme.md

@@ -23,6 +23,7 @@ The component supports a `<slot>` for injecting custom content.
 | `customKeyDown`     | `custom-key-down`     | Custom key down handler - if provided, overrides default keyboard navigation                                         | `((event: KeyboardEvent) => void) \| undefined`    | `undefined`                                                                                                                          |
 | `debounceMs`        | `debounce-ms`         | The debounce timeout in milliseconds. Set to 0 to disable debouncing.                                                | `number \| undefined`                              | `300`                                                                                                                                |
 | `disabled`          | `disabled`            | Whether the form control is disabled.                                                                                | `boolean \| undefined`                             | `false`                                                                                                                              |
+| `feedback`          | `feedback`            | Feedback state for the input field.                                                                                  | `IInputFeedbackProp \| undefined`                  | `undefined`                                                                                                                          |
 | `includeClear`      | `include-clear`       | Show the clear button within the input field.                                                                        | `boolean \| undefined`                             | `false`                                                                                                                              |
 | `includeSearch`     | `include-search`      | Show the search icon within the input field.                                                                         | `boolean \| undefined`                             | `false`                                                                                                                              |
 | `inputId`           | `input-id`            | The ID of the input element.                                                                                         | `string \| undefined`                              | `undefined`                                                                                                                          |
@@ -132,6 +133,7 @@ Type: `Promise<void>`
 ### Depends on
 
 - [modus-wc-input-label](../modus-wc-input-label)
+- [modus-wc-input-feedback](../modus-wc-input-feedback)
 - [modus-wc-menu](../modus-wc-menu)
 - [modus-wc-chip](../modus-wc-chip)
 - [modus-wc-button](../modus-wc-button)
@@ -144,16 +146,17 @@ Type: `Promise<void>`
 ```mermaid
 graph TD;
   modus-wc-autocomplete --> modus-wc-input-label
+  modus-wc-autocomplete --> modus-wc-input-feedback
   modus-wc-autocomplete --> modus-wc-menu
   modus-wc-autocomplete --> modus-wc-chip
   modus-wc-autocomplete --> modus-wc-button
   modus-wc-autocomplete --> modus-wc-icon
   modus-wc-autocomplete --> modus-wc-text-input
   modus-wc-autocomplete --> modus-wc-loader
   modus-wc-autocomplete --> modus-wc-menu-item
+  modus-wc-input-feedback --> modus-wc-icon
   modus-wc-text-input --> modus-wc-input-label
   modus-wc-text-input --> modus-wc-input-feedback
-  modus-wc-input-feedback --> modus-wc-icon
   modus-wc-menu-item --> modus-wc-checkbox
   modus-wc-menu-item --> modus-wc-tooltip
   modus-wc-checkbox --> modus-wc-input-label

src/components/modus-wc-button/readme.md

@@ -18,7 +18,7 @@ The component supports a `<slot>` for injecting content within the button, simil
 | `disabled`    | `disabled`     | If true, the button will be disabled.                                | `boolean \| undefined`                                            | `false`       |
 | `fullWidth`   | `full-width`   | If true, the button will take the full width of its container.       | `boolean \| undefined`                                            | `false`       |
 | `pressed`     | `pressed`      | If true, the button will be in a pressed state (for toggle buttons). | `boolean \| undefined`                                            | `false`       |
-| `shape`       | `shape`        | The shape of the button.                                             | `"circle" \| "rectangle" \| "square"`                             | `'rectangle'` |
+| `shape`       | `shape`        | The shape of the button.                                             | `"circle" \| "ellipse" \| "rectangle" \| "square"`                | `'rectangle'` |
 | `size`        | `size`         | The size of the button.                                              | `"lg" \| "md" \| "sm" \| "xs"`                                    | `'md'`        |
 | `type`        | `type`         | The type of the button.                                              | `"button" \| "reset" \| "submit"`                                 | `'button'`    |
 | `variant`     | `variant`      | The variant of the button.                                           | `"borderless" \| "filled" \| "outlined"`                          | `'filled'`    |
@@ -37,20 +37,28 @@ The component supports a `<slot>` for injecting content within the button, simil
 
  - [modus-wc-alert](../modus-wc-alert)
  - [modus-wc-autocomplete](../modus-wc-autocomplete)
+ - [modus-wc-content-tree](../modus-wc-content-tree)
  - [modus-wc-date](../modus-wc-date)
  - [modus-wc-dropdown-menu](../modus-wc-dropdown-menu)
+ - [modus-wc-handle](../modus-wc-handle)
  - [modus-wc-modal](../modus-wc-modal)
  - [modus-wc-navbar](../modus-wc-navbar)
+ - modus-wc-tree-actions
+ - [modus-wc-tree-item](../modus-wc-content-tree/modus-wc-tree-item)
 
 ### Graph
 ```mermaid
 graph TD;
   modus-wc-alert --> modus-wc-button
   modus-wc-autocomplete --> modus-wc-button
+  modus-wc-content-tree --> modus-wc-button
   modus-wc-date --> modus-wc-button
   modus-wc-dropdown-menu --> modus-wc-button
+  modus-wc-handle --> modus-wc-button
   modus-wc-modal --> modus-wc-button
   modus-wc-navbar --> modus-wc-button
+  modus-wc-tree-actions --> modus-wc-button
+  modus-wc-tree-item --> modus-wc-button
   style modus-wc-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/modus-wc-card/readme.md

@@ -9,7 +9,7 @@
 
 A customizable card component used to group and display content in a way that is easily readable.
 
-The component supports six `<slot>` called 'header' (for images/custom content), 'title', 'subtitle', default slot (main body), 'actions' (buttons/interactive elements), and 'footer'.
+This component supports multiple `<slot>` elements including 'header' for images or custom content, 'title', 'subtitle', a default slot for main content, 'actions' for buttons or interactive elements, and 'footer'.
 
 ## Properties
 

src/components/modus-wc-checkbox/readme.md

@@ -40,6 +40,7 @@ A customizable checkbox component
 
  - [modus-wc-menu-item](../modus-wc-menu-item)
  - [modus-wc-table](../modus-wc-table)
+ - [modus-wc-tree-item](../modus-wc-content-tree/modus-wc-tree-item)
 
 ### Depends on
 
@@ -51,6 +52,7 @@ graph TD;
   modus-wc-checkbox --> modus-wc-input-label
   modus-wc-menu-item --> modus-wc-checkbox
   modus-wc-table --> modus-wc-checkbox
+  modus-wc-tree-item --> modus-wc-checkbox
   style modus-wc-checkbox fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/modus-wc-content-tree/__snapshots__/modus-wc-content-tree.spec.ts.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`modus-wc-content-tree should render with default props 1`] = `
+<modus-wc-content-tree>
+  <!---->
+  <div class="modus-wc-content-tree-wrapper">
+    <div class="modus-wc-content-tree-header">
+      <div class="modus-wc-content-tree-search">
+        <modus-wc-text-input customclass="modus-wc-content-tree-search-input" include-clear="" include-search="" placeholder="Search..." value=""></modus-wc-text-input>
+      </div>
+      <div class="modus-wc-content-tree-actions">
+        <modus-wc-button aria-label="Expand all" customclass="modus-wc-content-tree-action-button" shape="circle" size="sm" variant="borderless">
+          <modus-wc-icon customclass="modus-wc-content-tree-action-icon" decorative="" name="unfold_more" size="sm" variant="solid"></modus-wc-icon>
+        </modus-wc-button>
+      </div>
+    </div>
+    <div class="modus-wc-content-tree-content">
+      <div class="modus-wc-content-tree-empty">
+        <modus-wc-icon customclass="modus-wc-content-tree-empty-icon" name="folder_open" variant="solid"></modus-wc-icon>
+        <modus-wc-typography customclass="modus-wc-content-tree-empty-text" hierarchy="p" label="Empty Content Tree" size="lg" weight="normal"></modus-wc-typography>
+      </div>
+    </div>
+  </div>
+</modus-wc-content-tree>
+`;

src/components/modus-wc-content-tree/modus-wc-content-tree.scss

@@ -0,0 +1,79 @@
+/**
+ * This component uses menu items for the tree structure.
+ * Only add styles here that should not be applied by Tailwind, Daisy, or the theme.
+ */
+
+modus-wc-content-tree {
+  background-color: var(--modus-wc-color-base-page);
+  border: 1px solid var(--modus-wc-color-base-100);
+  display: block;
+  min-width: 290px;
+  width: 100%;
+
+  .modus-wc-content-tree-actions {
+    align-items: center;
+    display: flex;
+    gap: var(--modus-wc-spacing-xs);
+    justify-content: flex-end;
+    padding: var(--modus-wc-spacing-sm);
+
+    .modus-wc-content-tree-action-button {
+      background-color: transparent;
+
+      &:hover,
+      &:active,
+      &[aria-pressed='true'] {
+        background-color: transparent;
+      }
+    }
+
+    .modus-wc-content-tree-action-icon {
+      color: var(--modus-wc-color-black);
+      cursor: pointer;
+    }
+  }
+
+  .modus-wc-content-tree-content {
+    min-height: 500px;
+  }
+
+  li.modus-wc-tree-item-selected:not(.modus-wc-tree-dropdown-show li) {
+    border-inline-start: 2px solid var(--modus-wc-color-primary);
+  }
+
+  .modus-wc-content-tree-header {
+    padding: var(--modus-wc-spacing-sm);
+  }
+
+  .modus-wc-content-tree-empty {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: var(--modus-wc-spacing-md);
+    justify-content: center;
+    min-height: 500px;
+    padding: 1rem;
+
+    .modus-wc-content-tree-empty-icon {
+      color: var(--modus-wc-color-gray-6);
+    }
+
+    .modus-wc-content-tree-empty-text {
+      color: var(--modus-wc-color-gray-6);
+      font-size: var(--modus-wc-font-size-md);
+      text-align: center;
+    }
+  }
+}
+
+[data-theme='modus-classic-dark'],
+[data-theme='modus-modern-dark'],
+[data-theme='connect-dark'] {
+  modus-wc-content-tree {
+    .modus-wc-content-tree-actions {
+      .modus-wc-content-tree-action-icon {
+        color: var(--modus-wc-color-gray-light);
+      }
+    }
+  }
+}