@redvars/peacock 3.5.0 → 3.6.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -17,7 +17,9 @@
   "private": false,
   "exports": {
     ".": "./dist/src/index.js",
-    "./icon.js": "./dist/src/index.js"
+    "./icon.js": "./dist/src/index.js",
+    "./flow-designer.js": "./dist/src/flow-designer/flow-designer.js",
+    "./flow-designer-node.js": "./dist/src/flow-designer/flow-designer-node.js"
   },
   "files": [
     "src",

package/readme.md

@@ -44,9 +44,9 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <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">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.5.0/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.6.0/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.5.0/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.6.0/dist/peacock-loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>
@@ -65,24 +65,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 |
+|---------------------------------------------------------------------|-----------------|-------|
+| [Checkbox](https://peacock.redvars.com/components/checkbox)         | wc-checkbox     | 🟢    |
 | [Code editor](https://peacock.redvars.com/components/code-editor)   | wc-code-editor  | 🟢    |
 | Color picker                                                        | color-picker    | 🔴    |
-| [Checkbox](https://peacock.redvars.com/components/checkbox)         | wc-checkbox     | 🟢    |
 | [Date picker](https://peacock.redvars.com/components/date-picker)   | wc-date-picker  | 🟡    |
-| Date Time picker                                                    | datetime-picker | 🔴    |
-| [Form control](https://peacock.redvars.com/components/form-control) | wc-field        | 🟡    |
+| Date time picker                                                    | datetime-picker | 🔴    |
+| [Field / Form control](https://peacock.redvars.com/components/field) | wc-field       | 🟡    |
 | File picker                                                         | file-picker     | 🔴    |
-| [HTML editor](https://peacock.redvars.com/components/html-editor)   | html-editor     | 🟢    |
+| HTML editor                                                         | html-editor     | 🔴    |
 | [Input](https://peacock.redvars.com/components/input)               | wc-input        | 🟢    |
-| [Input URL](https://peacock.redvars.com/components/input-url)       | input-url       | 🟢    |
+| Input URL                                                           | input-url       | 🔴    |
 | Month picker                                                        | month-picker    | 🔴    |
-| [Number](https://peacock.redvars.com/components/number)             | wc-number-field | 🟢    |
-| [Select](https://peacock.redvars.com/components/select)             | base-select     | 🟢    |
+| [Number field](https://peacock.redvars.com/components/number)       | wc-number-field | 🟢    |
+| [Radio](https://peacock.redvars.com/components/radio)               | wc-radio        | 🟢    |
+| [Search](https://peacock.redvars.com/components/search)             | wc-search       | 🟡    |
+| [Select](https://peacock.redvars.com/components/select)             | wc-select       | 🟢    |
 | [Textarea](https://peacock.redvars.com/components/textarea)         | wc-textarea     | 🟢    |
 | [Time picker](https://peacock.redvars.com/components/time-picker)   | wc-time-picker  | 🟡    |
-| [URL input](https://peacock.redvars.com/components/url-input)       | url-input       | 🔴    |
 | Week picker                                                         | week-picker     | 🔴    |
 
 ## Navigation
@@ -91,12 +92,13 @@ Navigational components are UI elements that help users move around the app or w
 and intuitive way to navigate through different sections and pages. Some common examples of navigational components
 include menus, tabs, and breadcrumbs.
 
-| Name                                                   | Component       | State |
-|--------------------------------------------------------|-----------------|-------|
-| [Breadcrumb](https://peacock.redvars.com/components/breadcrumb) | wc-breadcrumb   | 🟢    |
-| [Dropdown](https://peacock.redvars.com/components/dropdown)     | base-dropdown   | 🟡    |
-| [Menu](https://peacock.redvars.com/components/menu)             | wc-base-menu    | 🟡    |
-| [Tabs](https://peacock.redvars.com/components/tabs)             | wc-tabs         | 🟢    |
+| Name                                                                    | Component     | State |
+|-------------------------------------------------------------------------|---------------|-------|
+| [Breadcrumb](https://peacock.redvars.com/components/breadcrumb)         | wc-breadcrumb | 🟢    |
+| Dropdown                                                                | wc-dropdown   | 🔴    |
+| [Menu](https://peacock.redvars.com/components/menu)                     | wc-menu       | 🟡    |
+| [Tabs](https://peacock.redvars.com/components/tabs)                     | wc-tabs       | 🟢    |
+| [Toolbar](https://peacock.redvars.com/components/toolbar)               | wc-toolbar    | 🟡    |
 
 ## Informational
 
@@ -104,15 +106,17 @@ Informational components are UI elements that provide information to users. They
 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)                               | wc-badge                  | 🟢    |
-| [Linear Progress](https://peacock.redvars.com/components/linear-progress)           | wc-linear-progress        | 🟢    |
-| [Circular Progress](https://peacock.redvars.com/components/circular-progress)       | wc-circular-progress      | 🟢    |
-| [Spinner](https://peacock.redvars.com/components/spinner)                           | wc-spinner                | 🟢    |
-| [Tooltip](https://peacock.redvars.com/components/tooltip)                           | wc-tooltip                | 🟢    |
-| [Notification](https://peacock.redvars.com/components/notification)                 | base-notification         | 🟢    |
-| [Notification Manager](https://peacock.redvars.com/components/notification-manager) | base-notification-manager | 🟢    |
+| Name                                                                          | Component            | State |
+|-------------------------------------------------------------------------------|----------------------|-------|
+| [Badge](https://peacock.redvars.com/components/badge)                         | wc-badge             | 🟢    |
+| [Banner](https://peacock.redvars.com/components/banner)                       | wc-banner            | 🟡    |
+| [Circular Progress](https://peacock.redvars.com/components/circular-progress) | wc-circular-progress | 🟢    |
+| [Linear Progress](https://peacock.redvars.com/components/linear-progress)     | wc-linear-progress   | 🟢    |
+| [Notification](https://peacock.redvars.com/components/notification)           | wc-notification      | 🟢    |
+| [Skeleton](https://peacock.redvars.com/components/skeleton)                   | wc-skeleton          | 🟢    |
+| [Snackbar](https://peacock.redvars.com/components/snackbar)                   | wc-snackbar          | 🟡    |
+| [Spinner](https://peacock.redvars.com/components/spinner)                     | wc-spinner           | 🟢    |
+| [Tooltip](https://peacock.redvars.com/components/tooltip)                     | wc-tooltip           | 🟢    |
 
 
 ## Containers
@@ -121,54 +125,58 @@ 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) | wc-accordion   | 🟢    |
-| Card                                                          | base-card      | 🟡    |
+| Name                                                                  | Component        | State |
+|-----------------------------------------------------------------------|------------------|-------|
+| [Accordion](https://peacock.redvars.com/components/accordion)         | wc-accordion     | 🟢    |
+| [Bottom Sheet](https://peacock.redvars.com/components/bottom-sheet)   | wc-bottom-sheet  | 🟡    |
+| [Card](https://peacock.redvars.com/components/card)                   | wc-card          | 🟢    |
+| Container                                                             | wc-container     | 🟡    |
+| [Side Sheet](https://peacock.redvars.com/components/side-sheet)       | wc-side-sheet    | 🟡    |
 
 ## General
 
 These components are used for general purpose. They include
 
-| Name                                                                                | Component                 | State |
-|-------------------------------------------------------------------------------------|---------------------------|-------|
-| [Avatar](https://peacock.redvars.com/components/avatar)                             | wc-avatar                 | 🟢    |
-| [Button](https://peacock.redvars.com/components/button)                             | wc-button                 | 🟢    |
-| [Button Group](https://peacock.redvars.com/components/button-group)                 | wc-button-group           | 🟢    |
-| [Calendar](https://peacock.redvars.com/components/calendar)                         | base-calendar             | 🟢    |
-| Card Select                                                                         | base-cardselect           | 🔴    |
-| [Code Highlighter](https://peacock.redvars.com/components/code-highlighter)         | wc-code-highlighter       | 🟢    |
-| Column                                                                              | base-col                  | 🔴    |
-| [Empty State](https://peacock.redvars.com/components/empty-state)                   | wc-empty-state            | 🟡    |
-| [Flow Designer ](https://peacock.redvars.com/components/flow-designer)              | flow-designer             | 🔵    |
-| Grid                                                                                | base-grid                 | 🔴    |
-| Group                                                                               | base-group                | 🔴    |
-| [Header](https://peacock.redvars.com/components/header)                             | base-header               | 🟢    |
-| [Icon](https://peacock.redvars.com/components/icon)                                 | wc-icon                   | 🟢    |
-| [Link](https://peacock.redvars.com/components/link)                                 | wc-link                   | 🟢    |
-| [Modal](https://peacock.redvars.com/components/modal)                               | base-modal                | 🟢    |
-| [Notification Manager](https://peacock.redvars.com/components/notification-manager) | notification-manager      | 🟡    |
-| Observer                                                                            | base-observer             | 🔴    |
-| Pagination                                                                          | wc-pagination             | 🔴    |
-| Radio Group                                                                         | base-radiogroup           | 🔴    |
-| Row                                                                                 | base-row                  | 🔴    |
-| [Slider](https://peacock.redvars.com/components/slider)                             | wc-slider                 | 🟡    |
-| Spoiler                                                                             | base-spoiler              | 🔴    |
-| Stepper                                                                             | base-stepper              | 🔴    |
-| [Table](https://peacock.redvars.com/components/table)                               | wc-table                  | 🟡    |
-| [Tag](https://peacock.redvars.com/components/tag) / Chip                            | wc-tag                    | 🟢    |
-| [Text](https://peacock.redvars.com/components/text)                                 | base-text                 | 🟢    |
-| [Tree View](https://peacock.redvars.com/components/tree-view)                       | wc-tree-view              | 🟡    |
-| [Switch](https://peacock.redvars.com/components/switch)                             | wc-switch                 | 🟢    |
+| Name                                                                        | Component             | State |
+|-----------------------------------------------------------------------------|-----------------------|-------|
+| [Avatar](https://peacock.redvars.com/components/avatar)                     | wc-avatar             | 🟢    |
+| [Button](https://peacock.redvars.com/components/button)                     | wc-button             | 🟢    |
+| [Button Group](https://peacock.redvars.com/components/button-group)         | wc-button-group       | 🟢    |
+| Calendar                                                                    | calendar              | 🔴    |
+| Card Select                                                                 | card-select           | 🔴    |
+| [Chip](https://peacock.redvars.com/components/chip)                         | wc-chip               | 🟢    |
+| [Clock](https://peacock.redvars.com/components/clock)                       | wc-clock              | 🟡    |
+| [Code Highlighter](https://peacock.redvars.com/components/code-highlighter) | wc-code-highlighter   | 🟢    |
+| [Divider](https://peacock.redvars.com/components/divider)                   | wc-divider            | 🟢    |
+| [Empty State](https://peacock.redvars.com/components/empty-state)           | wc-empty-state        | 🟡    |
+| [FAB](https://peacock.redvars.com/components/fab)                           | wc-fab                | 🟢    |
+| [Flow Designer](https://peacock.redvars.com/components/flow-designer)       | flow-designer         | 🔵    |
+| Header                                                                      | header                | 🔴    |
+| [Icon](https://peacock.redvars.com/components/icon)                         | wc-icon               | 🟢    |
+| [Icon Button](https://peacock.redvars.com/components/icon-button)           | wc-icon-button        | 🟢    |
+| [Image](https://peacock.redvars.com/components/image)                       | wc-image              | 🟡    |
+| [Link](https://peacock.redvars.com/components/link)                         | wc-link               | 🟢    |
+| Modal                                                                       | modal                 | 🔴    |
+| [Number Counter](https://peacock.redvars.com/components/number-counter)     | wc-number-counter     | 🟡    |
+| [Pagination](https://peacock.redvars.com/components/pagination)             | wc-pagination         | 🟡    |
+| [Segmented Button](https://peacock.redvars.com/components/segmented-button) | wc-segmented-button   | 🟡    |
+| [Slider](https://peacock.redvars.com/components/slider)                     | wc-slider             | 🟡    |
+| [Switch](https://peacock.redvars.com/components/switch)                     | wc-switch             | 🟢    |
+| [Table](https://peacock.redvars.com/components/table)                       | wc-table              | 🟡    |
+| [Tag](https://peacock.redvars.com/components/tag)                           | wc-tag                | 🟢    |
+| Text                                                                        | text                  | 🔴    |
+| [Sidebar Menu](https://peacock.redvars.com/components/sidebar-menu)         | wc-sidebar-menu       | 🟡    |
 
 ## Charts
 
 These components are used to display data in a graphical format. They include
 
-| Name                                                           | Component           | State |
-|----------------------------------------------------------------|---------------------|-------|
-| [Doughnut Chart](https://peacock.redvars.com/components/chart-doughnut) | wc-chart-doughnut | 🟢    |
-| [Pie Chart ](https://peacock.redvars.com/components/chart-pie)          | wc-chart-pie      | 🟢    |
+| Name                                                                            | Component              | State |
+|---------------------------------------------------------------------------------|------------------------|-------|
+| [Bar Chart](https://peacock.redvars.com/components/chart-bar)                   | wc-chart-bar           | 🟢    |
+| [Doughnut Chart](https://peacock.redvars.com/components/chart-doughnut)         | wc-chart-doughnut      | 🟢    |
+| [Pie Chart](https://peacock.redvars.com/components/chart-pie)                   | wc-chart-pie           | 🟢    |
+| [Stacked Bar Chart](https://peacock.redvars.com/components/chart-bar)           | wc-chart-stacked-bar   | 🟢    |
 
 
 ## 📄 License

package/scss/mixin.scss

@@ -57,3 +57,19 @@
     @content;
   }
 }
+
+@mixin apply-container-shape($name) {
+  border-start-start-radius: var(--#{$name}-container-shape-start-start, var(--#{$name}-container-shape));
+  border-start-end-radius: var(--#{$name}-container-shape-start-end, var(--#{$name}-container-shape));
+  border-end-start-radius: var(--#{$name}-container-shape-end-start, var(--#{$name}-container-shape));
+  border-end-end-radius: var(--#{$name}-container-shape-end-end, var(--#{$name}-container-shape));
+  corner-shape: var(--#{$name}-container-shape-variant);
+}
+
+@mixin copy-container-shape($from, $to) {
+  --#{$to}-container-shape-start-start: var(--#{$from}-container-shape-start-start, var(--#{$from}-container-shape));
+  --#{$to}-container-shape-start-end: var(--#{$from}-container-shape-start-end, var(--#{$from}-container-shape));
+  --#{$to}-container-shape-end-start: var(--#{$from}-container-shape-end-start, var(--#{$from}-container-shape));
+  --#{$to}-container-shape-end-end: var(--#{$from}-container-shape-end-end, var(--#{$from}-container-shape));
+  --#{$to}-container-shape-variant: var(--#{$from}-container-shape-variant);
+}

package/src/__controllers/floating-controller.ts

@@ -0,0 +1,237 @@
+import {
+  computePosition,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  arrow,
+  Placement,
+  Strategy,
+  Middleware,
+} from '@floating-ui/dom';
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export type TriggerType =
+  | 'hover'
+  | 'click'
+  | 'context-menu'
+  | 'manual'
+  | 'focus'
+  | 'hover-focus';
+
+export interface FloatingOptions {
+  placement?: Placement;
+  strategy?: Strategy;
+  offset?: number;
+  trigger?: TriggerType;
+  closeOnClickOutside?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+}
+
+export class FloatingController implements ReactiveController {
+  private host: ReactiveControllerHost;
+  
+  private reference: HTMLElement | null = null;
+  
+  private floating: HTMLElement | null = null;
+  
+  private arrowElement: HTMLElement | null = null;
+
+  private cleanup: (() => void) | null = null;
+
+  private options: Required<FloatingOptions>;
+
+  private isHostConnected = false;
+  
+  public isOpen = false;
+
+  constructor(host: ReactiveControllerHost, options: FloatingOptions = {}) {
+    this.options = {
+      placement: options.placement || 'bottom',
+      strategy: options.strategy || 'absolute',
+      offset: options.offset ?? 8,
+      trigger: options.trigger || 'hover',
+      closeOnClickOutside: options.closeOnClickOutside ?? true,
+      onOpenChange: options.onOpenChange ?? (() => undefined),
+    };
+    this.host = host;
+    this.host.addController(this);
+  }
+
+  hostConnected() {
+    this.isHostConnected = true;
+    if (this.options.closeOnClickOutside) {
+      document.addEventListener('mousedown', this.handleOutsideClick);
+    }
+  }
+
+  hostDisconnected() {
+    this.isHostConnected = false;
+    this.cleanup?.();
+    this.removeEventListeners();
+    document.removeEventListener('mousedown', this.handleOutsideClick);
+  }
+
+  setElements(reference: HTMLElement, floating: HTMLElement, arrowElement?: HTMLElement) {
+    this.cleanup?.();
+    this.cleanup = null;
+    this.removeEventListeners();
+    this.reference = reference;
+    this.floating = floating;
+    this.arrowElement = arrowElement || null;
+    this.setupEventListeners();
+    if (this.isOpen) {
+      this.updatePosition();
+    }
+  }
+
+  setOptions(options: Partial<FloatingOptions>) {
+    const previousTrigger = this.options.trigger;
+    const previousCloseOnClickOutside = this.options.closeOnClickOutside;
+
+    this.options = {
+      ...this.options,
+      ...options,
+      onOpenChange: options.onOpenChange ?? this.options.onOpenChange,
+    };
+
+    if (this.reference && previousTrigger !== this.options.trigger) {
+      this.removeEventListeners();
+      this.setupEventListeners();
+    }
+
+    if (this.isHostConnected && previousCloseOnClickOutside !== this.options.closeOnClickOutside) {
+      document.removeEventListener('mousedown', this.handleOutsideClick);
+      if (this.options.closeOnClickOutside) {
+        document.addEventListener('mousedown', this.handleOutsideClick);
+      }
+    }
+
+    if (this.isOpen) {
+      this.updatePosition();
+    }
+  }
+
+  private setupEventListeners() {
+    if (!this.reference) return;
+
+    if (this.options.trigger === 'hover' || this.options.trigger === 'hover-focus') {
+      this.reference.addEventListener('mouseenter', this.open);
+      this.reference.addEventListener('mouseleave', this.close);
+    }
+
+    if (this.options.trigger === 'click') {
+      this.reference.addEventListener('click', this.toggle);
+    }
+
+    if (this.options.trigger === 'context-menu') {
+      this.reference.addEventListener('contextmenu', this.handleContextMenu);
+    }
+
+    if (this.options.trigger === 'focus' || this.options.trigger === 'hover-focus') {
+      this.reference.addEventListener('focusin', this.open);
+      this.reference.addEventListener('focusout', this.handleFocusOut);
+    }
+  }
+
+  private removeEventListeners() {
+    if (!this.reference) return;
+    this.reference.removeEventListener('mouseenter', this.open);
+    this.reference.removeEventListener('mouseleave', this.close);
+    this.reference.removeEventListener('click', this.toggle);
+    this.reference.removeEventListener('contextmenu', this.handleContextMenu);
+    this.reference.removeEventListener('focusin', this.open);
+    this.reference.removeEventListener('focusout', this.handleFocusOut);
+  }
+
+  private toggle = () => (this.isOpen ? this.close() : this.open());
+
+  private handleContextMenu = (e: MouseEvent) => {
+    e.preventDefault();
+    this.open();
+  };
+
+  private handleFocusOut = (e: FocusEvent) => {
+    if (!this.reference || this.reference.contains(e.relatedTarget as Node)) return;
+    this.close();
+  };
+
+  private handleOutsideClick = (e: MouseEvent) => {
+    if (
+      this.isOpen &&
+      this.reference &&
+      this.floating &&
+      !this.reference.contains(e.target as Node) &&
+      !this.floating.contains(e.target as Node)
+    ) {
+      this.close();
+    }
+  };
+
+  open = () => {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    this.options.onOpenChange(this.isOpen);
+    this.host.requestUpdate();
+    this.updatePosition();
+  };
+
+  close = () => {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.options.onOpenChange(this.isOpen);
+    this.cleanup?.();
+    this.cleanup = null;
+    this.host.requestUpdate();
+  };
+
+  private updatePosition() {
+    if (!this.reference || !this.floating) return;
+
+    this.cleanup = autoUpdate(this.reference, this.floating, () => {
+      if (!this.reference || !this.floating) return;
+
+      const middleware: Middleware[] = [
+        offset(this.options.offset),
+        flip(),
+        shift({ padding: 5 }),
+      ];
+
+      if (this.arrowElement) {
+        middleware.push(arrow({ element: this.arrowElement }));
+      }
+
+      computePosition(this.reference, this.floating, {
+        placement: this.options.placement,
+        strategy: this.options.strategy,
+        middleware,
+      }).then(({ x, y, placement, middlewareData }) => {
+        if (!this.floating) return;
+
+        Object.assign(this.floating.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+          position: this.options.strategy,
+        });
+
+        if (this.arrowElement && middlewareData.arrow) {
+          const { x: ax, y: ay } = middlewareData.arrow;
+          const staticSide = {
+            top: 'bottom',
+            right: 'left',
+            bottom: 'top',
+            left: 'right',
+          }[placement.split('-')[0]]!;
+
+          Object.assign(this.arrowElement.style, {
+            left: ax != null ? `${ax}px` : '',
+            top: ay != null ? `${ay}px` : '',
+            right: '',
+            bottom: '',
+            [staticSide]: '-4px',
+          });
+        }
+      });
+    });
+  }
+}

package/src/__mixins/BaseButtonMixin.ts

@@ -0,0 +1,83 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import type { MixinConstructor } from './MixinConstructor.js';
+
+
+/**
+ * 1. Define an interface for the members the mixin adds.
+ * This makes the type annotation much cleaner.
+ */
+export interface BaseButtonInterface {
+    htmlType: 'button' | 'submit' | 'reset';
+    disabled: boolean;
+    softDisabled: boolean;
+    disabledReason: string;
+    form: string;
+    name: string;
+    value: string;
+}
+
+/**
+ * 2. Apply the type annotation to the variable.
+ */
+const BaseButtonMixin: <T extends MixinConstructor<LitElement>>(superclass: T) => T & MixinConstructor<BaseButtonInterface> = <T extends MixinConstructor<LitElement>>(superclass: T) => {
+    // Naming the class (BaseButtonElement) instead of using 'Mixin' or anonymous 
+    // prevents the "__childPart" visibility error.
+    class BaseButtonElement extends superclass implements BaseButtonInterface {
+
+        /**
+         * The type of the underlying `<button>` element. Maps to the native `type` attribute.
+         * Possible values are `"button"`, `"submit"`, `"reset"`. Defaults to `"button"`.
+         */
+        @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =
+            'button';
+
+        /**
+         * When `true`, the button is disabled and cannot be interacted with. Reflects to the `disabled` attribute. Defaults to `false`.
+         */
+        @property({ type: Boolean, reflect: true })
+        disabled: boolean = false;
+
+        /**
+         * When `true`, the button is visually styled as disabled and cannot be interacted with, but remains focusable.
+         * Use this in combination with `disabledReason` to communicate why the button is unavailable.
+         * Reflects to the `soft-disabled` attribute. Defaults to `false`.
+         */
+        @property({ type: Boolean, reflect: true, attribute: 'soft-disabled' })
+        softDisabled: boolean = false;
+
+        /**
+         * A human-readable explanation of why the button is disabled or soft-disabled.
+         * Rendered as a visually hidden tooltip and linked via `aria-describedby` for accessibility.
+         * Maps to the `disabled-reason` attribute.
+         */
+        @property({ attribute: 'disabled-reason' })
+        disabledReason: string = '';
+
+        /**
+         * The `id` of the `<form>` element to associate the button with.
+         * If omitted, the button is associated with its nearest ancestor form.
+         * Maps to the native `form` attribute.
+         */
+        @property()
+        form: string = '';
+
+        /**
+         * The name of the button, submitted as part of a name/value pair when the associated form is submitted.
+         * Maps to the native `name` attribute.
+         */
+        @property()
+        name: string = '';
+
+        /**
+         * The value of the button, submitted as part of a name/value pair when the associated form is submitted.
+         * Maps to the native `value` attribute.
+         */
+        @property()
+        value: string = '';
+    }
+
+    return BaseButtonElement as T & MixinConstructor<BaseButtonInterface>;
+};
+
+export default BaseButtonMixin;

package/src/__mixins/BaseHyperlinkMixin.ts

@@ -0,0 +1,68 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import type { MixinConstructor } from './MixinConstructor.js';
+
+
+/**
+ * 1. Define an interface for the members the mixin adds.
+ * This makes the type annotation much cleaner.
+ */
+export interface BaseHyperlinkInterface {
+  href?: string;
+  target: '_self' | '_parent' | '_blank' | '_top' | string;
+  rel?: string;
+  download?: string;
+  __isLink(): boolean;
+}
+
+/**
+ * 2. Apply the type annotation to the variable.
+ */
+const BaseHyperlinkMixin: <T extends MixinConstructor<LitElement>>(superclass: T) => T & MixinConstructor<BaseHyperlinkInterface> = <T extends MixinConstructor<LitElement>>(superclass: T) => {
+  // Naming the class (BaseHyperlinkElement) instead of using 'Mixin' or anonymous 
+  // prevents the "__childPart" visibility error.
+  class BaseHyperlinkElement extends superclass implements BaseHyperlinkInterface {
+    /**
+     * The URL that the hyperlink points to. When set, the component renders as an `<a>` element.
+     * Maps to the native `href` attribute.
+     */
+    @property({ reflect: true })
+    href?: string;
+
+    /**
+     * Where to display the linked URL. Maps to the native `target` attribute.
+     * Possible values are `"_self"`, `"_blank"`, `"_parent"`, `"_top"`, or a custom frame name.
+     * When using `"_blank"`, consider setting `rel="noopener noreferrer"` for security. Defaults to `"_self"`.
+     */
+    @property()
+    target: '_self' | '_parent' | '_blank' | '_top' | string = '_self';
+
+    /**
+     * The relationship between the current document and the linked URL.
+     * Maps to the native `rel` attribute on the rendered `<a>` element.
+     * When `target="_blank"`, use `"noopener noreferrer"` to prevent tab-napping attacks.
+     */
+    @property()
+    rel?: string;
+
+    /**
+     * Causes the browser to download the linked URL instead of navigating to it.
+     * If a string value is provided, it is used as the suggested filename.
+     * Omit or leave undefined to preserve normal navigation behaviour.
+     * Maps to the native `download` attribute. Only applies when `href` is set.
+     */
+    @property()
+    download?: string;
+
+    /**
+     * Returns `true` when `href` is set, indicating the component should render as a link.
+     */
+    __isLink(): boolean {
+      return !!this.href;
+    }
+  }
+
+  return BaseHyperlinkElement as T & MixinConstructor<BaseHyperlinkInterface>;
+};
+
+export default BaseHyperlinkMixin;

package/src/__mixins/MixinConstructor.ts

@@ -0,0 +1 @@
+export type MixinConstructor<T = {}> = new (...args: any[]) => T;

package/src/{__base_element → __mixins}/README.md

@@ -1,6 +1,6 @@
-# Base Element
+# Mixins
 
-The base element is an abstract foundation for component families.
+The mixin element is an abstract foundation for component families.
 
 It defines shared component contracts such as: