@redvars/peacock 3.4.0 → 3.5.1

package/dist/{unsafe-html-D3GHRaGQ.js → unsafe-html-BsGUjx94.js}

@@ -1,5 +1,5 @@
 import { A, E } from './IndividualComponent-DUINtMGK.js';
-import { e as e$1, i, t } from './directive-Cuw6h7YA.js';
+import { e as e$1, i, t } from './directive-ZPhl09Yt.js';
 
 /**
  * @license
@@ -8,4 +8,4 @@ import { e as e$1, i, t } from './directive-Cuw6h7YA.js';
  */class e extends i{constructor(i){if(super(i),this.it=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o=e$1(e);
 
 export { e, o };
-//# sourceMappingURL=unsafe-html-D3GHRaGQ.js.map
+//# sourceMappingURL=unsafe-html-BsGUjx94.js.map

package/dist/{unsafe-html-D3GHRaGQ.js.map → unsafe-html-BsGUjx94.js.map}

@@ -1 +1 @@
-{"version":3,"file":"unsafe-html-D3GHRaGQ.js","sources":["../node_modules/lit-html/directives/unsafe-html.js"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n"],"names":["s","t","n","i","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAG,MAAM,CAAC,SAASA,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAACC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uCAAuC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGD,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGE,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAM,MAAC,CAAC,CAACC,GAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"unsafe-html-BsGUjx94.js","sources":["../node_modules/lit-html/directives/unsafe-html.js"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n"],"names":["s","t","n","i","r"],"mappings":";;;AACA;AACA;AACA;AACA;AACA,GAAG,MAAM,CAAC,SAASA,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAACC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAGC,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uCAAuC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGD,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAGE,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAM,MAAC,CAAC,CAACC,GAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.4.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.4.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.4.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/scss/styles.scss

@@ -3,9 +3,13 @@
 @use '../src/link/link.css-component.scss';
 @use '../src/popover/tooltip.css-component.scss';
 
+
+
+
 .surface, .surface-container-high, .surface-container-highest, .surface-container, .surface-container-low, .surface-container-lowest, .surface-dim {
   color: var(--color-on-surface);
   --icon-color: var(--color-on-surface);
+  transition: background-color .5s cubic-bezier(.2,0,0,1),background-image .5s cubic-bezier(.2,0,0,1), color .5s cubic-bezier(.2,0,0,1);
 }
 
 .surface {

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/__mixins/README.md

@@ -0,0 +1,19 @@
+# Mixins
+
+The mixin element is an abstract foundation for component families.
+
+It defines shared component contracts such as:
+
+- Common props (for example state flags and cross-component attributes)
+- Shared methods (for example focus, blur, value helpers, or utility behavior)
+- Reusable behavior (for example event handling, validation flow, and state sync)
+
+The base element does not define component-specific styles.
+
+Child elements extend the base element and are responsible for:
+
+- Implementing their own visual styles
+- Providing component-specific rendering
+- Extending or overriding shared behavior when needed
+
+In short, the base element centralizes behavior and API shape, while child elements implement presentation and specialized logic.

package/src/__utils/cache-fetch.ts

@@ -0,0 +1,65 @@
+export async function createCacheFetch(name: string) {
+  let cache: Cache | null = null;
+  // This map tracks requests currently being processed
+  const inFlightRequests = new Map<string, Promise<string>>();
+
+  try {
+    cache = await window.caches.open(name);
+  } catch (e) {
+    console.warn('window.caches access not allowed');
+  }
+
+  return async (url: string): Promise<string> => {
+    if (inFlightRequests.has(url)) {
+      return inFlightRequests.get(url)!;
+    }
+
+    const fetchPromise = (async () => {
+      const request = new Request(url);
+
+      if (cache) {
+        const cachedResponse = await cache.match(request);
+        if (cachedResponse) {
+          return cachedResponse.text();
+        }
+      }
+
+      const urlObj = new URL(request.url);
+      const isSameOrigin = urlObj.origin === window.location.origin;
+
+      const response = await fetch(request.url, {
+        method: 'GET',
+        mode: isSameOrigin ? 'no-cors' : 'cors',
+        credentials: isSameOrigin ? 'same-origin' : 'omit',
+      });
+
+      if (response.status === 404) {
+        console.error(`[Fetch Error] Resource not found (404): ${url}`);
+        return '';
+      }
+
+      const result = await response.text();
+
+      if (cache && response.status === 200) {
+        await cache.put(
+          request,
+          new Response(result, {
+            status: response.status,
+            statusText: response.statusText,
+            headers: response.headers,
+          }),
+        );
+      }
+
+      return result;
+    })();
+
+    inFlightRequests.set(url, fetchPromise);
+
+    try {
+      return await fetchPromise;
+    } finally {
+      inFlightRequests.delete(url);
+    }
+  };
+}

package/src/__utils/is-dark-mode.ts

@@ -0,0 +1,3 @@
+export function isDarkMode() {
+  return document.documentElement.dataset.theme === 'dark';
+}

package/src/__utils/is-in-viewport.ts

@@ -0,0 +1,6 @@
+export function isInViewport(element: HTMLElement) {
+  const rect = element.getBoundingClientRect();
+  return (
+    rect.top !== 0 || rect.left !== 0 || rect.bottom !== 0 || rect.right !== 0
+  );
+}

package/src/__utils/observe-slot-change.ts

@@ -0,0 +1,38 @@
+function hasMeaningfulContent(slotElement: HTMLSlotElement | null) {
+  const nodes = slotElement?.assignedNodes({ flatten: true }) || [];
+
+  for (const node of nodes) {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      return true;
+    }
+    if (
+      node.nodeType === Node.TEXT_NODE &&
+      (node.textContent?.trim().length || 0) > 0
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function observerSlotChangesWithCallback(
+  slot: HTMLSlotElement | null,
+  callback: (hasContent: boolean) => void,
+) {
+  const observer = new MutationObserver(() => {
+    callback(hasMeaningfulContent(slot));
+  });
+
+  const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
+  assignedNodes.forEach(node => {
+    observer.observe(node, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+  });
+
+  callback(hasMeaningfulContent(slot));
+}

package/src/__utils/sanitize-svg.ts

@@ -0,0 +1,27 @@
+// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes
+export function sanitizeSvg(rawSvg: string) {
+  try {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
+
+    const scripts = Array.from(doc.querySelectorAll('script'));
+    scripts.forEach(n => n.remove());
+
+    const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));
+    foreigns.forEach(n => n.remove());
+
+    const all = Array.from(doc.querySelectorAll('*'));
+    all.forEach(el => {
+      const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));
+      attrs.forEach(a => el.removeAttribute(a.name));
+    });
+
+    const el = doc.documentElement;
+    if (!el) return '';
+
+    const serializer = new XMLSerializer();
+    return serializer.serializeToString(el);
+  } catch (e) {
+    return '';
+  }
+}

package/src/__utils/throttle.ts

@@ -0,0 +1,27 @@
+export function throttle(
+  func: Function,
+  delay: number,
+  options = { leading: true, trailing: true },
+) {
+  let timerId: any;
+  let lastExec = 0;
+
+  return function (...args: any[]) {
+    // @ts-ignore
+    const context = this;
+    const now = Date.now();
+
+    const shouldCallNow = options.leading && now - lastExec >= delay;
+
+    if (shouldCallNow) {
+      func.apply(context, args);
+      lastExec = now;
+    } else if (options.trailing && !timerId) {
+      timerId = setTimeout(() => {
+        func.apply(context, args);
+        lastExec = Date.now();
+        timerId = null;
+      }, delay);
+    }
+  };
+}