@redvars/peacock 3.5.0 → 3.5.1

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.5.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

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.5.1/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.5.1/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/__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:
 

package/src/banner/banner.scss

@@ -4,12 +4,6 @@
 
 :host {
   display: block;
-
-  --banner-container-color: var(--color-tertiary-container);
-  --banner-label-text-color: var(--color-on-tertiary-container);
-  --banner-description-text-color: var(--color-on-tertiary-container);
-  --banner-icon-color: var(--color-on-tertiary-container);
-  --banner-border-radius: var(--shape-corner-small);
 }
 
 .banner {
@@ -32,26 +26,28 @@
 }
 
 .banner-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-050);
-}
+  .banner-label {
+    display: inline;
+    @include mixin.get-typography(label-large);
+    color: var(--banner-label-text-color);
+    margin-inline-end: var(--spacing-050);
+  }
 
-.banner-label {
-  @include mixin.get-typography(label-large);
-  color: var(--banner-label-text-color);
+  .banner-description {
+    display: inline;
+    @include mixin.get-typography(body-medium);
+    color: var(--banner-description-text-color);
+  }
 }
 
-.banner-description {
-  @include mixin.get-typography(body-medium);
-  color: var(--banner-description-text-color);
-}
 
-.banner-content.inline {
-  flex-direction: row;
-  align-items: baseline;
-  flex-wrap: wrap;
-  gap: 0.25em;
+// Default styles for the banner and content. These will be overridden by the variant-specific styles below.
+:host {
+  --banner-container-color: var(--color-tertiary-container);
+  --banner-label-text-color: var(--color-on-tertiary-container);
+  --banner-description-text-color: var(--color-on-tertiary-container);
+  --banner-icon-color: var(--color-on-tertiary-container);
+  --banner-border-radius: var(--shape-corner-small);
 }
 
 .banner.info,

package/src/banner/banner.ts

@@ -69,12 +69,6 @@ export class Banner extends LitElement {
   @property({ type: String })
   description = '';
 
-  /**
-   * When true, label and description are rendered on a single line.
-   */
-  @property({ type: Boolean, reflect: true })
-  inline = false;
-
   private get resolvedLabel() {
     return this.label || VARIANT_LABELS[this.variant];
   }
@@ -92,7 +86,7 @@ export class Banner extends LitElement {
           </slot>
         </div>
 
-        <div class=${classMap({ 'banner-content': true, [this.variant]: true, inline: this.inline })}>
+        <div class=${classMap({ 'banner-content': true, [this.variant]: true })}>
           <div class="banner-label">
             <slot name="label">${this.resolvedLabel}:</slot>
           </div>

package/src/button/BaseButton.ts

@@ -1,81 +1,21 @@
 import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { dispatchActivationClick, isActivationClick } from '../__utils/dispatch-event-utils.js';
-import BaseHyperlink from '@/__base_element/BaseHyperlink.js';
+import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
+import BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
 
-export class BaseButton extends BaseHyperlink(LitElement) {
-  protected static readonly DISABLED_REASON_ID = 'disabled-reason';
-
-  @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =
-    'button';
-
-  /**
-   * Type is preset of color and variant. Type will be only applied.
-   *
-   */
-  @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';
-
-  /**
-   * The visual style of the button.
-   *
-   *  Possible variant values:
-   * `"filled"` is a filled button.
-   * `"outlined"` is an outlined button.
-   * `"text"` is a transparent button.
-   * `"tonal"` is a light color button.
-   * `"elevated"` is elevated button
-   */
-  @property() variant:
-    | 'elevated'
-    | 'filled'
-    | 'tonal'
-    | 'outlined'
-    | 'text'
-    | 'neo' = 'filled';
-
-  /**
-   * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
-   */
-  @property({ reflect: true }) color:
-    | 'primary'
-    | 'success'
-    | 'danger'
-    | 'warning'
-    | 'surface'
-    | 'on-surface' = 'primary';
-
-  /**
-   * Button size.
-   * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
-   */
-  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
-
-  /**
-   * If true, the user cannot interact with the button. Defaults to `false`.
-   */
-  @property({ type: Boolean, reflect: true })
-  disabled: boolean = false;
 
-  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
 
-  /**
-   * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'soft-disabled' })
-  softDisabled: boolean = false;
+export class BaseButton extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
+  protected static readonly DISABLED_REASON_ID = 'disabled-reason';
 
-  /**
-   * If button is disabled, the reason why it is disabled.
-   */
-  @property({ attribute: 'disabled-reason' })
-  disabledReason: string = '';
   
+  color?: string;
 
-  @property({ reflect: true })
-  configAria?: { [key: string]: any };
+  variant?: string;
 
+  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
   
-
   @property({ type: Boolean, reflect: true }) toggle: boolean = false;
 
   @property({ type: Boolean, reflect: true }) selected: boolean = false;
@@ -95,14 +35,6 @@ export class BaseButton extends BaseHyperlink(LitElement) {
 
   @query('.button') readonly buttonElement!: HTMLElement | null;
 
-  override focus() {
-    this.buttonElement?.focus();
-  }
-
-  override blur() {
-    this.buttonElement?.blur();
-  }
-
   override connectedCallback() {
     super.connectedCallback();
     this.addEventListener('click', this.__dispatchClickWithThrottle);
@@ -157,33 +89,12 @@ export class BaseButton extends BaseHyperlink(LitElement) {
     dispatchActivationClick(this.buttonElement);
   };
 
-  __convertTypeToVariantAndColor() {
-    if (this.type === 'primary') {
-      this.color = 'primary';
-      this.variant = 'filled';
-    } else if (this.type === 'secondary') {
-      this.color = 'surface';
-      this.variant = 'filled';
-    } else if (this.type === 'tertiary') {
-      this.color = 'primary';
-      this.variant = 'text';
-    } else if (this.type === 'danger') {
-      this.color = 'danger';
-      this.variant = 'filled';
-    }
-  }
-
-  protected get __disabledReasonID(): string | undefined {
-    return this.disabled && this.disabledReason
-      ? BaseButton.DISABLED_REASON_ID
-      : undefined;
-  }
+  
 
-  __renderDisabledReason() {
-    const disabledReasonID = this.__disabledReasonID;
-    if (disabledReasonID)
+  __renderDisabledReason(softDisabled: boolean) {
+    if (softDisabled)
       return html`<div
-        id=${disabledReasonID}
+        id=${BaseButton.DISABLED_REASON_ID}
         role="tooltip"
         aria-label=${this.disabledReason}
         class="screen-reader-only"

package/src/button/button/button-sizes.scss

@@ -67,11 +67,13 @@
   letter-spacing: 0 !important;
 }
 
-:host([size='xl']) {
+:host([size='xl']),
+:host([size='extra-large']) {
   --button-height: 8.5rem;
 }
 
-:host([size='xl']) .button {
+:host([size='xl']) .button,
+:host([size='extra-large']) .button {
   --_button-icon-size: 2.5rem;
   --_button_container-padding: 4rem;