@loadsmart/miranda-wc 1.38.0 → 1.38.1-alpha.1

package/README.md

@@ -1,3 +1,30 @@
 # Miranda WC
 
-TBD
+Miranda 4all is a web components library that serves as a standard for all Loadsmart products regarding the product's front-end technology. The goal is to offer our users a delightful, unified, and consistent experience.
+
+## Why Miranda?
+
+The name Miranda is inspired by a Brazilian singer, Sula Miranda, the queen of the truckers. Miranda also means "worthy of admiration," and that's what we want when we improve our UI quality; more admirable is our product.
+
+[Hey designers](https://www.figma.com/file/cdzUk4QUXqSvUJMiHNeoJ4/%5BComp.%5D-Miranda-4all?node-id=5%3A310&t=PlJbbrq3FANqt1hC-1), we have an extra Figma documentation that can help you apply the components to your projects.
+
+## Code Editor Integration
+
+This project is using [cem-plugin-vs-code-custom-data-generator](https://github.com/break-stuff/cem-plugin-vs-code-custom-data-generator) to generate
+a vscode.html-custom-data.json to be integrated with [Visual Studio Code](https://code.visualstudio.com/).
+
+You can read more about this feature on [Custom Data Format: Evolving HTML and CSS language features](https://code.visualstudio.com/blogs/2020/02/24/custom-data-format).
+
+To enable to enable this integration, you will need to copy and paste the following code into your _.vscode/settings.json_.
+
+```jon
+{
+  "html.customData": [
+    "./node_modules/@loadsmart/miranda-wc/dist/vscode.html-custom-data.json"
+  ]
+  // We currently don't have a CSS custom data file
+  // "css.customData": [
+  //   "./node_modules/my-component-library/vscode.css-custom-data.json"
+  // ]
+}
+```

package/dist/_commonjsHelpers-1fe14821.js

@@ -0,0 +1,2 @@
+function t(t){return t&&t.t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}export{t as g};
+//# sourceMappingURL=_commonjsHelpers-1fe14821.js.map

package/dist/_commonjsHelpers-1fe14821.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers-1fe14821.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/base-button.styles-824fd93f.js

@@ -0,0 +1,104 @@
+import{i as o}from"./lit-element-e27601d4.js";import{g as t}from"./get-token-0e2fefa7.js";import{g as r}from"./get-color-token-747d7930.js";import{d as n,o as e}from"./index-7c8f5ea5.js";import{t as i}from"./transition-05d2f752.js";import{t as s}from"./typography-9325aac2.js";import{a}from"./padding-98a3b04c.js";import{m as l}from"./margin-bfc1a689.js";function b(){return o`
+		:host {
+			--m-button-background-color: transparent;
+			--m-button-base-size: ${t("global-height-default")};
+			--m-button-border-color: ${r("color-neutral-90")};
+			--m-button-border-radius: ${t("border-radius-s")};
+			--m-button-color: ${r("color-text-secondary")};
+			--m-button-outline-color: ${r("color-primary-100")};
+			--m-button-outline-offset: 2px;
+			--m-button-padding-x: ${t("spacing-4")};
+			--m-button-padding-y: ${t("spacing-3")};
+			/**
+			 * Useful when overriding via host :slotted query.
+			 */
+			--m-button-font-size: ${t("font-size-3")};
+		}
+
+		:host([size='small']) {
+			--m-button-base-size: ${t("global-height-small")};
+		}
+
+		:host([size='large']) {
+			--m-button-base-size: ${t("global-height-large")};
+		}
+
+		:host([variant|='icon']) {
+			--m-button-border-radius: ${t("border-radius-circle")};
+
+			min-inline-size: var(--m-button-base-size);
+			inline-size: var(--m-button-base-size);
+		}
+
+		:host {
+			display: inline-block;
+			min-block-size: var(--m-button-base-size);
+			block-size: var(--m-button-base-size);
+			border-radius: var(--m-button-border-radius);
+		}
+
+		.button {
+			${i([{property:"color"},{property:"background-color"},{property:"border-color"}])};
+
+			${s("button-md")};
+			font-size: var(--m-button-font-size);
+
+			cursor: pointer;
+			position: relative;
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			overflow: hidden;
+
+			block-size: 100%;
+			inline-size: 100%;
+			box-sizing: border-box;
+
+			text-decoration: none;
+
+			gap: ${t("spacing-1")};
+
+			padding-inline: var(--m-button-padding-x);
+			padding-block: var(--m-button-padding-y);
+
+			background-color: var(--m-button-background-color);
+			color: var(--m-button-color);
+			border: 1px solid var(--m-button-border-color);
+
+			border-radius: var(--m-button-border-radius);
+		}
+
+		${n(".button")} {
+			cursor: default;
+		}
+
+		${n(".button","*")} {
+			pointer-events: none;
+		}
+
+		${e.focus(".button")} {
+			outline: 1px solid var(--m-button-outline-color);
+			outline-offset: var(--m-button-outline-offset);
+		}
+
+		${e.hover(".button")} {
+			--m-button-background-color: ${r("color-background-inverted")};
+			--m-button-border-color: ${r("color-background-inverted")};
+			--m-button-color: ${r("color-text-inverted")};
+		}
+
+		::slotted(*) {
+			display: inline-flex;
+			align-items: center;
+
+			${a(0)};
+			${l(0)};
+		}
+
+		slot[name='leading']::slotted(span),
+		slot[name='trailing']::slotted(span) {
+			justify-content: center;
+		}
+	`}export{b as s};
+//# sourceMappingURL=base-button.styles-824fd93f.js.map

package/dist/base-button.styles-824fd93f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-button.styles-824fd93f.js","sources":["../src/components/button/base-button.styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport token from '../../utils/get-token';\nimport color from '../../utils/get-color-token';\nimport { disabled, m, on, p, transition, typography } from '../../styles';\n\nfunction styles() {\n\treturn css`\n\t\t:host {\n\t\t\t--m-button-background-color: transparent;\n\t\t\t--m-button-base-size: ${token('global-height-default')};\n\t\t\t--m-button-border-color: ${color('color-neutral-90')};\n\t\t\t--m-button-border-radius: ${token('border-radius-s')};\n\t\t\t--m-button-color: ${color('color-text-secondary')};\n\t\t\t--m-button-outline-color: ${color('color-primary-100')};\n\t\t\t--m-button-outline-offset: 2px;\n\t\t\t--m-button-padding-x: ${token('spacing-4')};\n\t\t\t--m-button-padding-y: ${token('spacing-3')};\n\t\t\t/**\n\t\t\t * Useful when overriding via host :slotted query.\n\t\t\t */\n\t\t\t--m-button-font-size: ${token('font-size-3')};\n\t\t}\n\n\t\t:host([size='small']) {\n\t\t\t--m-button-base-size: ${token('global-height-small')};\n\t\t}\n\n\t\t:host([size='large']) {\n\t\t\t--m-button-base-size: ${token('global-height-large')};\n\t\t}\n\n\t\t:host([variant|='icon']) {\n\t\t\t--m-button-border-radius: ${token('border-radius-circle')};\n\n\t\t\tmin-inline-size: var(--m-button-base-size);\n\t\t\tinline-size: var(--m-button-base-size);\n\t\t}\n\n\t\t:host {\n\t\t\tdisplay: inline-block;\n\t\t\tmin-block-size: var(--m-button-base-size);\n\t\t\tblock-size: var(--m-button-base-size);\n\t\t\tborder-radius: var(--m-button-border-radius);\n\t\t}\n\n\t\t.button {\n\t\t\t${transition([\n\t\t\t\t{ property: 'color' },\n\t\t\t\t{ property: 'background-color' },\n\t\t\t\t{ property: 'border-color' },\n\t\t\t])};\n\n\t\t\t${typography('button-md')};\n\t\t\tfont-size: var(--m-button-font-size);\n\n\t\t\tcursor: pointer;\n\t\t\tposition: relative;\n\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\toverflow: hidden;\n\n\t\t\tblock-size: 100%;\n\t\t\tinline-size: 100%;\n\t\t\tbox-sizing: border-box;\n\n\t\t\ttext-decoration: none;\n\n\t\t\tgap: ${token('spacing-1')};\n\n\t\t\tpadding-inline: var(--m-button-padding-x);\n\t\t\tpadding-block: var(--m-button-padding-y);\n\n\t\t\tbackground-color: var(--m-button-background-color);\n\t\t\tcolor: var(--m-button-color);\n\t\t\tborder: 1px solid var(--m-button-border-color);\n\n\t\t\tborder-radius: var(--m-button-border-radius);\n\t\t}\n\n\t\t${disabled('.button')} {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t${disabled('.button', '*')} {\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t${on.focus('.button')} {\n\t\t\toutline: 1px solid var(--m-button-outline-color);\n\t\t\toutline-offset: var(--m-button-outline-offset);\n\t\t}\n\n\t\t${on.hover('.button')} {\n\t\t\t--m-button-background-color: ${color('color-background-inverted')};\n\t\t\t--m-button-border-color: ${color('color-background-inverted')};\n\t\t\t--m-button-color: ${color('color-text-inverted')};\n\t\t}\n\n\t\t::slotted(*) {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\n\t\t\t${p(0)};\n\t\t\t${m(0)};\n\t\t}\n\n\t\tslot[name='leading']::slotted(span),\n\t\tslot[name='trailing']::slotted(span) {\n\t\t\tjustify-content: center;\n\t\t}\n\t`;\n}\n\nexport default styles;\n"],"names":["styles","css","token","color","transition","property","typography","disabled","on","focus","hover","p","m"],"mappings":"mWAMA,SAASA,IACR,OAAOC,CAAG;;;2BAGgBC,EAAM;8BACHC,EAAM;+BACLD,EAAM;uBACdC,EAAM;+BACEA,EAAM;;2BAEVD,EAAM;2BACNA,EAAM;;;;2BAINA,EAAM;;;;2BAINA,EAAM;;;;2BAINA,EAAM;;;;+BAIFA,EAAM;;;;;;;;;;;;;;KAchCE,EAAW,CACZ,CAAEC,SAAU,SACZ,CAAEA,SAAU,oBACZ,CAAEA,SAAU;;KAGXC,EAAW;;;;;;;;;;;;;;;;;UAiBNJ,EAAM;;;;;;;;;;;;IAYZK,EAAS;;;;IAITA,EAAS,UAAW;;;;IAIpBC,EAAGC,MAAM;;;;;IAKTD,EAAGE,MAAM;kCACqBP,EAAM;8BACVA,EAAM;uBACbA,EAAM;;;;;;;KAOxBQ,EAAE;KACFC,EAAE;;;;;;;EAQP"}

package/dist/base-layout.styles-a06722dd.js

@@ -0,0 +1,33 @@
+import{_ as i}from"./tslib.es6-a1123316.js";import{s as t,x as d,i as a,r as n}from"./lit-element-e27601d4.js";import{t as p}from"./index-f6fbbb6c.js";function r(i,t){var d;const a=t?p(t):"";return i&&null!==(d="none"===i?"0":p(i))&&void 0!==d?d:a}var g;class s extends t{constructor(){super(...arguments),g.set(this,((i,t)=>{t?this.style.setProperty(i,r(t)):this.style.removeProperty(i)}))}static get properties(){return{padding:{type:String},paddingX:{type:String,attribute:"padding-x"},paddingY:{type:String,attribute:"padding-y"},paddingT:{type:String,attribute:"padding-t"},paddingB:{type:String,attribute:"padding-b"},paddingL:{type:String,attribute:"padding-l"},paddingR:{type:String,attribute:"padding-r"}}}getCSSPropertiesPrefix(){return"layout"}update(t){super.update(t);const d=this.getCSSPropertiesPrefix();t.has("padding")&&this.style.setProperty(`--m-${d}-padding`,r(this.padding)),t.has("paddingX")&&i(this,g,"f").call(this,`--m-${d}-padding-x`,this.paddingX),t.has("paddingY")&&i(this,g,"f").call(this,`--m-${d}-padding-y`,this.paddingY),t.has("paddingT")&&i(this,g,"f").call(this,`--m-${d}-padding-t`,this.paddingT),t.has("paddingB")&&i(this,g,"f").call(this,`--m-${d}-padding-b`,this.paddingB),t.has("paddingL")&&i(this,g,"f").call(this,`--m-${d}-padding-l`,this.paddingL),t.has("paddingR")&&i(this,g,"f").call(this,`--m-${d}-padding-r`,this.paddingR)}render(){return d`<slot></slot>`}}function e(i){return a`
+		:host {
+			padding-block-start: var(
+				--m-${n(i)}-padding-t,
+				var(
+					--m-${n(i)}-padding-y,
+					var(--m-${n(i)}-padding, 0)
+				)
+			);
+			padding-block-end: var(
+				--m-${n(i)}-padding-b,
+				var(
+					--m-${n(i)}-padding-y,
+					var(--m-${n(i)}-padding, 0)
+				)
+			);
+			padding-inline-start: var(
+				--m-${n(i)}-padding-l,
+				var(
+					--m-${n(i)}-padding-x,
+					var(--m-${n(i)}-padding, 0)
+				)
+			);
+			padding-inline-end: var(
+				--m-${n(i)}-padding-r,
+				var(
+					--m-${n(i)}-padding-x,
+					var(--m-${n(i)}-padding, 0)
+				)
+			);
+		}
+	`}g=new WeakMap;export{s as B,r as a,e as g};
+//# sourceMappingURL=base-layout.styles-a06722dd.js.map

package/dist/base-layout.styles-a06722dd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-layout.styles-a06722dd.js","sources":["../src/utils/get-spacing-value.ts","../src/components/layout/base-layout/base-layout.ts","../src/components/layout/base-layout/base-layout.styles.ts"],"sourcesContent":["import { toCSSValue } from '@loadsmart/miranda-tokens';\nimport type {\n\tSpacingTokenWithNone,\n\tSpacingToken,\n} from '@loadsmart/miranda-tokens';\n\n/**\n * Get css value for spacing token validating 'none'.\n *\n * @param {SpacingTokenWithNone} [spacing] - Spacing token or 'none'\n * @param {SpacingToken} [defaultSpacing] - Default spacing token if the provided spacing is not valid\n * @returns {string}\n */\nfunction getSpacingValue(\n\tspacing: SpacingTokenWithNone | undefined,\n\tdefaultSpacing?: SpacingToken,\n): string {\n\tconst defaultValue = defaultSpacing ? toCSSValue(defaultSpacing) : '';\n\n\tif (!spacing) {\n\t\treturn defaultValue;\n\t}\n\n\treturn (spacing === 'none' ? '0' : toCSSValue(spacing)) ?? defaultValue;\n}\n\nexport default getSpacingValue;\n","import { LitElement, html } from 'lit';\nimport type { PropertyValues } from 'lit';\n\nimport type { SpacingTokenWithNone } from '@loadsmart/miranda-tokens';\n\nimport getSpacingValue from '../../../utils/get-spacing-value';\n\nimport type { BaseLayoutProps } from './base-layout.types';\n\nexport class BaseLayout extends LitElement {\n\tstatic override get properties() {\n\t\treturn {\n\t\t\tpadding: { type: String },\n\t\t\tpaddingX: { type: String, attribute: 'padding-x' },\n\t\t\tpaddingY: { type: String, attribute: 'padding-y' },\n\t\t\tpaddingT: { type: String, attribute: 'padding-t' },\n\t\t\tpaddingB: { type: String, attribute: 'padding-b' },\n\t\t\tpaddingL: { type: String, attribute: 'padding-l' },\n\t\t\tpaddingR: { type: String, attribute: 'padding-r' },\n\t\t};\n\t}\n\n\tdeclare padding: BaseLayoutProps['padding'];\n\n\tdeclare paddingX: BaseLayoutProps['paddingX'];\n\n\tdeclare paddingY: BaseLayoutProps['paddingY'];\n\n\tdeclare paddingT: BaseLayoutProps['paddingT'];\n\n\tdeclare paddingB: BaseLayoutProps['paddingB'];\n\n\tdeclare paddingL: BaseLayoutProps['paddingL'];\n\n\tdeclare paddingR: BaseLayoutProps['paddingR'];\n\n\t/* eslint-disable-next-line class-methods-use-this */\n\tgetCSSPropertiesPrefix(): string {\n\t\treturn 'layout';\n\t}\n\n\tprotected override update(\n\t\tchangedProperties: PropertyValues<BaseLayoutProps>,\n\t): void {\n\t\tsuper.update(changedProperties);\n\n\t\tconst cssPropertiesPrefix = this.getCSSPropertiesPrefix();\n\n\t\tif (changedProperties.has('padding')) {\n\t\t\tthis.style.setProperty(\n\t\t\t\t`--m-${cssPropertiesPrefix}-padding`,\n\t\t\t\tgetSpacingValue(this.padding),\n\t\t\t);\n\t\t}\n\t\tif (changedProperties.has('paddingX')) {\n\t\t\tthis.#setOrRemoveProperty(\n\t\t\t\t`--m-${cssPropertiesPrefix}-padding-x`,\n\t\t\t\tthis.paddingX,\n\t\t\t);\n\t\t}\n\t\tif (changedProperties.has('paddingY')) {\n\t\t\tthis.#setOrRemoveProperty(\n\t\t\t\t`--m-${cssPropertiesPrefix}-padding-y`,\n\t\t\t\tthis.paddingY,\n\t\t\t);\n\t\t}\n\t\tif (changedProperties.has('paddingT')) {\n\t\t\tthis.#setOrRemoveProperty(\n\t\t\t\t`--m-${cssPropertiesPrefix}-padding-t`,\n\t\t\t\tthis.paddingT,\n\t\t\t);\n\t\t}\n\t\tif (changedProperties.has('paddingB')) {\n\t\t\tthis.#setOrRemoveProperty(\n\t\t\t\t`--m-${cssPropertiesPrefix}-padding-b`,\n\t\t\t\tthis.paddingB,\n\t\t\t);\n\t\t}\n\t\tif (changedProperties.has('paddingL')) {\n\t\t\tthis.#setOrRemoveProperty(\n\t\t\t\t`--m-${cssPropertiesPrefix}-padding-l`,\n\t\t\t\tthis.paddingL,\n\t\t\t);\n\t\t}\n\t\tif (changedProperties.has('paddingR')) {\n\t\t\tthis.#setOrRemoveProperty(\n\t\t\t\t`--m-${cssPropertiesPrefix}-padding-r`,\n\t\t\t\tthis.paddingR,\n\t\t\t);\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`<slot></slot>`;\n\t}\n\n\t#setOrRemoveProperty = (\n\t\tcssVar: string,\n\t\tvalue: SpacingTokenWithNone | undefined,\n\t) => {\n\t\tif (value) {\n\t\t\tthis.style.setProperty(cssVar, getSpacingValue(value));\n\t\t} else {\n\t\t\tthis.style.removeProperty(cssVar);\n\t\t}\n\t};\n}\n","import { css, unsafeCSS } from 'lit';\n\nexport function getBaseLayoutStyles(cssPropertiesPrefix: string) {\n\treturn css`\n\t\t:host {\n\t\t\tpadding-block-start: var(\n\t\t\t\t--m-${unsafeCSS(cssPropertiesPrefix)}-padding-t,\n\t\t\t\tvar(\n\t\t\t\t\t--m-${unsafeCSS(cssPropertiesPrefix)}-padding-y,\n\t\t\t\t\tvar(--m-${unsafeCSS(cssPropertiesPrefix)}-padding, 0)\n\t\t\t\t)\n\t\t\t);\n\t\t\tpadding-block-end: var(\n\t\t\t\t--m-${unsafeCSS(cssPropertiesPrefix)}-padding-b,\n\t\t\t\tvar(\n\t\t\t\t\t--m-${unsafeCSS(cssPropertiesPrefix)}-padding-y,\n\t\t\t\t\tvar(--m-${unsafeCSS(cssPropertiesPrefix)}-padding, 0)\n\t\t\t\t)\n\t\t\t);\n\t\t\tpadding-inline-start: var(\n\t\t\t\t--m-${unsafeCSS(cssPropertiesPrefix)}-padding-l,\n\t\t\t\tvar(\n\t\t\t\t\t--m-${unsafeCSS(cssPropertiesPrefix)}-padding-x,\n\t\t\t\t\tvar(--m-${unsafeCSS(cssPropertiesPrefix)}-padding, 0)\n\t\t\t\t)\n\t\t\t);\n\t\t\tpadding-inline-end: var(\n\t\t\t\t--m-${unsafeCSS(cssPropertiesPrefix)}-padding-r,\n\t\t\t\tvar(\n\t\t\t\t\t--m-${unsafeCSS(cssPropertiesPrefix)}-padding-x,\n\t\t\t\t\tvar(--m-${unsafeCSS(cssPropertiesPrefix)}-padding, 0)\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t`;\n}\n"],"names":["getSpacingValue","spacing","defaultSpacing","defaultValue","toCSSValue","_a","BaseLayout","LitElement","constructor","_BaseLayout_setOrRemoveProperty","set","this","cssVar","value","style","setProperty","removeProperty","properties","padding","type","String","paddingX","attribute","paddingY","paddingT","paddingB","paddingL","paddingR","getCSSPropertiesPrefix","update","changedProperties","super","cssPropertiesPrefix","has","__classPrivateFieldGet","call","render","html","getBaseLayoutStyles","css","unsafeCSS"],"mappings":"uJAaA,SAASA,EACRC,EACAC,SAEA,MAAMC,EAAeD,EAAiBE,EAAWF,GAAkB,GAEnE,OAAKD,GAIkD,UAAnC,SAAZA,EAAqB,IAAMG,EAAWH,UAAS,IAAAI,EAAAA,EAH/CF,CAIT,OCfM,MAAOG,UAAmBC,EAAhCC,kCAuFCC,EAAAC,IAAAC,MAAuB,CACtBC,EACAC,KAEIA,EACHF,KAAKG,MAAMC,YAAYH,EAAQZ,EAAgBa,IAE/CF,KAAKG,MAAME,eAAeJ,EAC1B,GAEF,CAhGoBK,wBACnB,MAAO,CACNC,QAAS,CAAEC,KAAMC,QACjBC,SAAU,CAAEF,KAAMC,OAAQE,UAAW,aACrCC,SAAU,CAAEJ,KAAMC,OAAQE,UAAW,aACrCE,SAAU,CAAEL,KAAMC,OAAQE,UAAW,aACrCG,SAAU,CAAEN,KAAMC,OAAQE,UAAW,aACrCI,SAAU,CAAEP,KAAMC,OAAQE,UAAW,aACrCK,SAAU,CAAER,KAAMC,OAAQE,UAAW,aAEtC,CAiBDM,yBACC,MAAO,QACP,CAEkBC,OAClBC,GAEAC,MAAMF,OAAOC,GAEb,MAAME,EAAsBrB,KAAKiB,yBAE7BE,EAAkBG,IAAI,YACzBtB,KAAKG,MAAMC,YACV,OAAOiB,YACPhC,EAAgBW,KAAKO,UAGnBY,EAAkBG,IAAI,aACzBC,EAAAvB,KAAIF,EAAA,KAAJ0B,KAAAxB,KACC,OAAOqB,cACPrB,KAAKU,UAGHS,EAAkBG,IAAI,aACzBC,EAAAvB,KAAIF,EAAA,KAAJ0B,KAAAxB,KACC,OAAOqB,cACPrB,KAAKY,UAGHO,EAAkBG,IAAI,aACzBC,EAAAvB,KAAIF,EAAA,KAAJ0B,KAAAxB,KACC,OAAOqB,cACPrB,KAAKa,UAGHM,EAAkBG,IAAI,aACzBC,EAAAvB,KAAIF,EAAA,KAAJ0B,KAAAxB,KACC,OAAOqB,cACPrB,KAAKc,UAGHK,EAAkBG,IAAI,aACzBC,EAAAvB,KAAIF,EAAA,KAAJ0B,KAAAxB,KACC,OAAOqB,cACPrB,KAAKe,UAGHI,EAAkBG,IAAI,aACzBC,EAAAvB,KAAIF,EAAA,KAAJ0B,KAAAxB,KACC,OAAOqB,cACPrB,KAAKgB,SAGP,CAEQS,SACR,OAAOC,CAAI,eACX,EC5FI,SAAUC,EAAoBN,GACnC,OAAOO,CAAG;;;UAGDC,EAAUR;;WAETQ,EAAUR;eACNQ,EAAUR;;;;UAIfQ,EAAUR;;WAETQ,EAAUR;eACNQ,EAAUR;;;;UAIfQ,EAAUR;;WAETQ,EAAUR;eACNQ,EAAUR;;;;UAIfQ,EAAUR;;WAETQ,EAAUR;eACNQ,EAAUR;;;;EAKzB"}

package/dist/box-ab4f9db9.js

@@ -0,0 +1,20 @@
+import{i as r,r as o,x as t}from"./lit-element-e27601d4.js";import{t as e}from"./index-f6fbbb6c.js";import{g as i,B as d}from"./base-layout.styles-a06722dd.js";import{g as s}from"./get-token-0e2fefa7.js";import{g as b}from"./get-color-token-747d7930.js";const a={padding:"spacing-4",borderRadius:"border-radius-s",borderWidth:"border-none",borderColor:"color-background-highlight",textAlign:"left"};class n extends d{static get properties(){return{...super.properties,backgroundColor:{type:String,attribute:"background-color"},borderRadius:{type:String,attribute:"border-radius"},borderWidth:{type:String,attribute:"border-width"},borderColor:{type:String,attribute:"border-color"},textAlign:{type:String,attribute:"text-align"}}}constructor(){super(),this.padding=a.padding,this.borderRadius=a.borderRadius,this.borderWidth=a.borderWidth,this.borderColor=a.borderColor,this.textAlign=a.textAlign}getCSSPropertiesPrefix(){return n.CSSPropertiesPrefix}update(r){var o,t,i,d;super.update(r),r.has("backgroundColor")&&this.style.setProperty("--m-box-background-color",null!==(o=this.backgroundColor&&e(this.backgroundColor))&&void 0!==o?o:"transparent"),r.has("borderRadius")&&this.style.setProperty("--m-box-border-radius",null!==(t=this.borderRadius&&e(this.borderRadius))&&void 0!==t?t:e(a.borderRadius)),r.has("borderWidth")&&this.style.setProperty("--m-box-border-width",null!==(i=this.borderWidth&&e(this.borderWidth))&&void 0!==i?i:e(a.borderWidth)),r.has("borderColor")&&this.style.setProperty("--m-box-border-color",null!==(d=this.borderColor&&e(this.borderColor))&&void 0!==d?d:e(a.borderColor)),r.has("textAlign")&&this.style.setProperty("--m-box-text-align",this.textAlign||a.textAlign)}render(){return t`<slot></slot>`}}n.CSSPropertiesPrefix="box",n.styles=[i(n.CSSPropertiesPrefix),r`
+		:host {
+			--m-box-padding: ${s(a.padding)};
+			--m-box-background-color: transparent;
+			--m-box-border-radius: ${s(a.borderRadius)};
+			--m-box-border-width: ${s(a.borderWidth)};
+			--m-box-border-color: ${b(a.borderColor)};
+			--m-box-text-align: ${o(a.textAlign)};
+
+			box-sizing: border-box;
+
+			background-color: var(--m-box-background-color);
+			border-radius: var(--m-box-border-radius);
+			border-style: solid;
+			border-width: var(--m-box-border-width);
+			border-color: var(--m-box-border-color);
+			text-align: var(--m-box-text-align);
+		}
+	`],window.customElements.define("m-box",n);export{n as B,a as d};
+//# sourceMappingURL=box-ab4f9db9.js.map

package/dist/box-ab4f9db9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box-ab4f9db9.js","sources":["../src/components/layout/box/box.constants.ts","../src/components/layout/box/box.ts","../src/components/layout/box/box.styles.ts"],"sourcesContent":["import type { SpacingToken } from '@loadsmart/miranda-tokens';\nimport type { BoxProps } from './box.types';\n\nexport const defaultBoxProps: Required<\n\tPick<\n\t\tBoxProps,\n\t\t'padding' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'textAlign'\n\t>\n> & { padding: SpacingToken } = {\n\tpadding: 'spacing-4',\n\tborderRadius: 'border-radius-s',\n\tborderWidth: 'border-none',\n\tborderColor: 'color-background-highlight',\n\ttextAlign: 'left',\n};\n","import { html } from 'lit';\nimport type { PropertyValues } from 'lit';\n\nimport { toCSSValue } from '@loadsmart/miranda-tokens';\n\nimport { BaseLayout, getBaseLayoutStyles } from '../base-layout';\n\nimport type { BoxProps } from './box.types';\nimport { defaultBoxProps } from './box.constants';\nimport { boxStyles } from './box.styles';\n\nexport class Box extends BaseLayout {\n\tprotected static CSSPropertiesPrefix = 'box';\n\n\tstatic override styles = [\n\t\tgetBaseLayoutStyles(Box.CSSPropertiesPrefix),\n\t\tboxStyles(),\n\t];\n\n\tstatic override get properties() {\n\t\treturn {\n\t\t\t...super.properties,\n\t\t\tbackgroundColor: { type: String, attribute: 'background-color' },\n\t\t\tborderRadius: { type: String, attribute: 'border-radius' },\n\t\t\tborderWidth: { type: String, attribute: 'border-width' },\n\t\t\tborderColor: { type: String, attribute: 'border-color' },\n\t\t\ttextAlign: { type: String, attribute: 'text-align' },\n\t\t};\n\t}\n\n\tdeclare backgroundColor: BoxProps['backgroundColor'];\n\n\tdeclare borderRadius: BoxProps['borderRadius'];\n\n\tdeclare borderWidth: BoxProps['borderWidth'];\n\n\tdeclare borderColor: BoxProps['borderColor'];\n\n\tdeclare textAlign: BoxProps['textAlign'];\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.padding = defaultBoxProps.padding;\n\t\tthis.borderRadius = defaultBoxProps.borderRadius;\n\t\tthis.borderWidth = defaultBoxProps.borderWidth;\n\t\tthis.borderColor = defaultBoxProps.borderColor;\n\t\tthis.textAlign = defaultBoxProps.textAlign;\n\t}\n\n\t/* eslint-disable-next-line class-methods-use-this */\n\toverride getCSSPropertiesPrefix(): string {\n\t\treturn Box.CSSPropertiesPrefix;\n\t}\n\n\tprotected override update(changedProperties: PropertyValues<BoxProps>): void {\n\t\tsuper.update(changedProperties);\n\n\t\tif (changedProperties.has('backgroundColor')) {\n\t\t\tthis.style.setProperty(\n\t\t\t\t'--m-box-background-color',\n\t\t\t\t(this.backgroundColor && toCSSValue(this.backgroundColor)) ??\n\t\t\t\t\t'transparent',\n\t\t\t);\n\t\t}\n\t\tif (changedProperties.has('borderRadius')) {\n\t\t\tthis.style.setProperty(\n\t\t\t\t'--m-box-border-radius',\n\t\t\t\t(this.borderRadius && toCSSValue(this.borderRadius)) ??\n\t\t\t\t\ttoCSSValue(defaultBoxProps.borderRadius),\n\t\t\t);\n\t\t}\n\t\tif (changedProperties.has('borderWidth')) {\n\t\t\tthis.style.setProperty(\n\t\t\t\t'--m-box-border-width',\n\t\t\t\t(this.borderWidth && toCSSValue(this.borderWidth)) ??\n\t\t\t\t\ttoCSSValue(defaultBoxProps.borderWidth),\n\t\t\t);\n\t\t}\n\t\tif (changedProperties.has('borderColor')) {\n\t\t\tthis.style.setProperty(\n\t\t\t\t'--m-box-border-color',\n\t\t\t\t(this.borderColor && toCSSValue(this.borderColor)) ??\n\t\t\t\t\ttoCSSValue(defaultBoxProps.borderColor),\n\t\t\t);\n\t\t}\n\t\tif (changedProperties.has('textAlign')) {\n\t\t\tthis.style.setProperty(\n\t\t\t\t'--m-box-text-align',\n\t\t\t\tthis.textAlign || defaultBoxProps.textAlign,\n\t\t\t);\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`<slot></slot>`;\n\t}\n}\n\nwindow.customElements.define('m-box', Box);\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'm-box': Box;\n\t}\n}\n","import { css, unsafeCSS } from 'lit';\n\nimport token from '../../../utils/get-token';\nimport color from '../../../utils/get-color-token';\n\nimport { defaultBoxProps } from './box.constants';\n\nexport function boxStyles() {\n\treturn css`\n\t\t:host {\n\t\t\t--m-box-padding: ${token(defaultBoxProps.padding)};\n\t\t\t--m-box-background-color: transparent;\n\t\t\t--m-box-border-radius: ${token(defaultBoxProps.borderRadius)};\n\t\t\t--m-box-border-width: ${token(defaultBoxProps.borderWidth)};\n\t\t\t--m-box-border-color: ${color(defaultBoxProps.borderColor)};\n\t\t\t--m-box-text-align: ${unsafeCSS(defaultBoxProps.textAlign)};\n\n\t\t\tbox-sizing: border-box;\n\n\t\t\tbackground-color: var(--m-box-background-color);\n\t\t\tborder-radius: var(--m-box-border-radius);\n\t\t\tborder-style: solid;\n\t\t\tborder-width: var(--m-box-border-width);\n\t\t\tborder-color: var(--m-box-border-color);\n\t\t\ttext-align: var(--m-box-text-align);\n\t\t}\n\t`;\n}\n"],"names":["defaultBoxProps","padding","borderRadius","borderWidth","borderColor","textAlign","Box","BaseLayout","properties","super","backgroundColor","type","String","attribute","constructor","this","getCSSPropertiesPrefix","CSSPropertiesPrefix","update","changedProperties","has","style","setProperty","_a","toCSSValue","_b","_c","_d","render","html","styles","getBaseLayoutStyles","css","token","color","unsafeCSS","window","customElements","define"],"mappings":"8PAGa,MAAAA,EAKmB,CAC/BC,QAAS,YACTC,aAAc,kBACdC,YAAa,cACbC,YAAa,6BACbC,UAAW,QCFN,MAAOC,UAAYC,EAQJC,wBACnB,MAAO,IACHC,MAAMD,WACTE,gBAAiB,CAAEC,KAAMC,OAAQC,UAAW,oBAC5CX,aAAc,CAAES,KAAMC,OAAQC,UAAW,iBACzCV,YAAa,CAAEQ,KAAMC,OAAQC,UAAW,gBACxCT,YAAa,CAAEO,KAAMC,OAAQC,UAAW,gBACxCR,UAAW,CAAEM,KAAMC,OAAQC,UAAW,cAEvC,CAYDC,cACCL,QAEAM,KAAKd,QAAUD,EAAgBC,QAC/Bc,KAAKb,aAAeF,EAAgBE,aACpCa,KAAKZ,YAAcH,EAAgBG,YACnCY,KAAKX,YAAcJ,EAAgBI,YACnCW,KAAKV,UAAYL,EAAgBK,SACjC,CAGQW,yBACR,OAAOV,EAAIW,mBACX,CAEkBC,OAAOC,eACzBV,MAAMS,OAAOC,GAETA,EAAkBC,IAAI,oBACzBL,KAAKM,MAAMC,YACV,2BAC0D,QAA1DC,EAACR,KAAKL,iBAAmBc,EAAWT,KAAKL,wBAAiB,IAAAa,EAAAA,EACzD,eAGCJ,EAAkBC,IAAI,iBACzBL,KAAKM,MAAMC,YACV,wBAEC,QADDG,EAACV,KAAKb,cAAgBsB,EAAWT,KAAKb,qBACrC,IAAAuB,EAAAA,EAAAD,EAAWxB,EAAgBE,eAG1BiB,EAAkBC,IAAI,gBACzBL,KAAKM,MAAMC,YACV,uBAEC,QADDI,EAACX,KAAKZ,aAAeqB,EAAWT,KAAKZ,oBACpC,IAAAuB,EAAAA,EAAAF,EAAWxB,EAAgBG,cAG1BgB,EAAkBC,IAAI,gBACzBL,KAAKM,MAAMC,YACV,uBAEC,QADDK,EAACZ,KAAKX,aAAeoB,EAAWT,KAAKX,oBACpC,IAAAuB,EAAAA,EAAAH,EAAWxB,EAAgBI,cAG1Be,EAAkBC,IAAI,cACzBL,KAAKM,MAAMC,YACV,qBACAP,KAAKV,WAAaL,EAAgBK,UAGpC,CAEQuB,SACR,OAAOC,CAAI,eACX,EApFgBvB,EAAmBW,oBAAG,MAEvBX,EAAAwB,OAAS,CACxBC,EAAoBzB,EAAIW,qBCPlBe,CAAG;;sBAEWC,EAAMjC,EAAgBC;;4BAEhBgC,EAAMjC,EAAgBE;2BACvB+B,EAAMjC,EAAgBG;2BACtB+B,EAAMlC,EAAgBI;yBACxB+B,EAAUnC,EAAgBK;;;;;;;;;;;IDoFnD+B,OAAOC,eAAeC,OAAO,QAAShC"}

package/dist/card.styles-abd38f20.js

@@ -0,0 +1,88 @@
+import{i as r}from"./lit-element-e27601d4.js";import{g as o}from"./get-token-0e2fefa7.js";import{g as d}from"./get-color-token-747d7930.js";import{t as a}from"./typography-9325aac2.js";function t(){return r`
+		:host {
+			--m-card-background-color: ${d("color-background-primary")};
+		}
+
+		.m-card {
+			position: relative;
+			display: flex;
+			flex-direction: row;
+
+			background-color: var(--m-card-background-color);
+			border-radius: ${o("border-radius-s")};
+			border: solid 1px ${d("color-divider")};
+		}
+
+		.m-card-flag {
+			position: absolute;
+			top: -1px;
+			bottom: -1px;
+			left: -1px;
+			display: block;
+
+			box-sizing: border-box;
+			border: 1px solid var(--m-card-flag-color);
+			background-color: var(--m-card-flag-color);
+			width: ${o("border-thick")};
+			border-top-left-radius: ${o("border-radius-s")};
+			border-top-right-radius: 0;
+			border-bottom-right-radius: 0;
+			border-bottom-left-radius: ${o("border-radius-s")};
+		}
+
+		.m-card-content {
+			display: flex;
+			flex: 1;
+			flex-direction: column;
+		}
+
+		::slotted(m-divider) {
+			--m-divider-margin-top: ${o("spacing-4")};
+		}
+	`}function i(){return r`
+		:host {
+			--m-card-body-padding-x: ${o("spacing-4")};
+			--m-card-body-padding-y: ${o("spacing-4")};
+		}
+
+		.m-card-body {
+			padding: var(--m-card-body-padding-y) var(--m-card-body-padding-x);
+		}
+	`}function e(){return r`
+		:host {
+			--m-card-subtitle-margin-top: ${o("spacing-2")};
+			--m-card-subtitle-padding-x: ${o("spacing-4")};
+			--m-card-subtitle-padding-y: 0;
+		}
+
+		.m-card-subtitle {
+			${a("body-md")};
+
+			margin-block-start: var(--m-card-subtitle-margin-top);
+			padding: var(--m-card-subtitle-padding-y) var(--m-card-subtitle-padding-x);
+
+			color: ${d("color-text-tertiary")};
+		}
+	`}function n(){return r`
+		:host {
+			--m-card-title-padding-x: ${o("spacing-4")};
+			--m-card-title-padding-top: ${o("spacing-4")};
+		}
+
+		.m-card-title {
+			padding: var(--m-card-title-padding-top) var(--m-card-title-padding-x) 0;
+
+			${a("heading-sm-bold")};
+			color: ${d("color-text-primary")};
+		}
+
+		slot[name='leading']::slotted(*) {
+			display: inline-flex;
+			flex-flow: row nowrap;
+			align-items: center;
+			justify-content: center;
+			pointer-events: none;
+			margin-inline-end: ${o("spacing-1")};
+		}
+	`}export{i as a,e as b,t as c,n as d};
+//# sourceMappingURL=card.styles-abd38f20.js.map

package/dist/card.styles-abd38f20.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles-abd38f20.js","sources":["../src/components/card/card.styles.ts"],"sourcesContent":["import { css } from 'lit';\nimport token from '../../utils/get-token';\nimport color from '../../utils/get-color-token';\nimport { typography } from '../../styles';\n\nexport function cardStyles() {\n\treturn css`\n\t\t:host {\n\t\t\t--m-card-background-color: ${color('color-background-primary')};\n\t\t}\n\n\t\t.m-card {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\n\t\t\tbackground-color: var(--m-card-background-color);\n\t\t\tborder-radius: ${token('border-radius-s')};\n\t\t\tborder: solid 1px ${color('color-divider')};\n\t\t}\n\n\t\t.m-card-flag {\n\t\t\tposition: absolute;\n\t\t\ttop: -1px;\n\t\t\tbottom: -1px;\n\t\t\tleft: -1px;\n\t\t\tdisplay: block;\n\n\t\t\tbox-sizing: border-box;\n\t\t\tborder: 1px solid var(--m-card-flag-color);\n\t\t\tbackground-color: var(--m-card-flag-color);\n\t\t\twidth: ${token('border-thick')};\n\t\t\tborder-top-left-radius: ${token('border-radius-s')};\n\t\t\tborder-top-right-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t\tborder-bottom-left-radius: ${token('border-radius-s')};\n\t\t}\n\n\t\t.m-card-content {\n\t\t\tdisplay: flex;\n\t\t\tflex: 1;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t::slotted(m-divider) {\n\t\t\t--m-divider-margin-top: ${token('spacing-4')};\n\t\t}\n\t`;\n}\n\nexport function cardBodyStyles() {\n\treturn css`\n\t\t:host {\n\t\t\t--m-card-body-padding-x: ${token('spacing-4')};\n\t\t\t--m-card-body-padding-y: ${token('spacing-4')};\n\t\t}\n\n\t\t.m-card-body {\n\t\t\tpadding: var(--m-card-body-padding-y) var(--m-card-body-padding-x);\n\t\t}\n\t`;\n}\n\nexport function cardSubtitleStyles() {\n\treturn css`\n\t\t:host {\n\t\t\t--m-card-subtitle-margin-top: ${token('spacing-2')};\n\t\t\t--m-card-subtitle-padding-x: ${token('spacing-4')};\n\t\t\t--m-card-subtitle-padding-y: 0;\n\t\t}\n\n\t\t.m-card-subtitle {\n\t\t\t${typography('body-md')};\n\n\t\t\tmargin-block-start: var(--m-card-subtitle-margin-top);\n\t\t\tpadding: var(--m-card-subtitle-padding-y) var(--m-card-subtitle-padding-x);\n\n\t\t\tcolor: ${color('color-text-tertiary')};\n\t\t}\n\t`;\n}\n\nexport function cardTitleStyles() {\n\treturn css`\n\t\t:host {\n\t\t\t--m-card-title-padding-x: ${token('spacing-4')};\n\t\t\t--m-card-title-padding-top: ${token('spacing-4')};\n\t\t}\n\n\t\t.m-card-title {\n\t\t\tpadding: var(--m-card-title-padding-top) var(--m-card-title-padding-x) 0;\n\n\t\t\t${typography('heading-sm-bold')};\n\t\t\tcolor: ${color('color-text-primary')};\n\t\t}\n\n\t\tslot[name='leading']::slotted(*) {\n\t\t\tdisplay: inline-flex;\n\t\t\tflex-flow: row nowrap;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tpointer-events: none;\n\t\t\tmargin-inline-end: ${token('spacing-1')};\n\t\t}\n\t`;\n}\n"],"names":["cardStyles","css","color","token","cardBodyStyles","cardSubtitleStyles","typography","cardTitleStyles"],"mappings":"kMAKgBA,IACf,OAAOC,CAAG;;gCAEqBC,EAAM;;;;;;;;;oBASlBC,EAAM;uBACHD,EAAM;;;;;;;;;;;;;YAajBC,EAAM;6BACWA,EAAM;;;gCAGHA,EAAM;;;;;;;;;;6BAUTA,EAAM;;EAGnC,UAEgBC,IACf,OAAOH,CAAG;;8BAEmBE,EAAM;8BACNA,EAAM;;;;;;EAOpC,UAEgBE,IACf,OAAOJ,CAAG;;mCAEwBE,EAAM;kCACPA,EAAM;;;;;KAKnCG,EAAW;;;;;YAKJJ,EAAM;;EAGlB,UAEgBK,IACf,OAAON,CAAG;;+BAEoBE,EAAM;iCACJA,EAAM;;;;;;KAMlCG,EAAW;YACJJ,EAAM;;;;;;;;;wBASMC,EAAM;;EAG9B"}

package/dist/class-map-08072625.js

@@ -0,0 +1,7 @@
+import{T as t}from"./lit-element-e27601d4.js";import{e as i,i as s,t as e}from"./directive-ee0c609c.js";
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const r=i(class extends s{constructor(t){var i;if(super(t),t.type!==e.ATTRIBUTE||"class"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((i=>t[i])).join(" ")+" "}update(i,[s]){var e,r;if(void 0===this.it){this.it=new Set,void 0!==i.strings&&(this.nt=new Set(i.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in s)s[t]&&!(null===(e=this.nt)||void 0===e?void 0:e.has(t))&&this.it.add(t);return this.render(s)}const n=i.element.classList;this.it.forEach((t=>{t in s||(n.remove(t),this.it.delete(t))}));for(const t in s){const i=!!s[t];i===this.it.has(t)||(null===(r=this.nt)||void 0===r?void 0:r.has(t))||(i?(n.add(t),this.it.add(t)):(n.remove(t),this.it.delete(t)))}return t}});export{r as o};
+//# sourceMappingURL=class-map-08072625.js.map

package/dist/class-map-08072625.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-map-08072625.js","sources":["../../../node_modules/lit-html/directives/class-map.js"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as i,Directive as s,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=i(class extends s{constructor(t){var i;if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter((i=>t[i])).join(\" \")+\" \"}update(i,[s]){var r,o;if(void 0===this.it){this.it=new Set,void 0!==i.strings&&(this.nt=new Set(i.strings.join(\" \").split(/\\s/).filter((t=>\"\"!==t))));for(const t in s)s[t]&&!(null===(r=this.nt)||void 0===r?void 0:r.has(t))&&this.it.add(t);return this.render(s)}const e=i.element.classList;this.it.forEach((t=>{t in s||(e.remove(t),this.it.delete(t))}));for(const t in s){const i=!!s[t];i===this.it.has(t)||(null===(o=this.nt)||void 0===o?void 0:o.has(t))||(i?(e.add(t),this.it.add(t)):(e.remove(t),this.it.delete(t)))}return t}});export{o as classMap};\n//# sourceMappingURL=class-map.js.map\n"],"names":["o","i","s","constructor","t","super","type","r","ATTRIBUTE","name","strings","length","Error","render","Object","keys","filter","join","update","this","it","Set","nt","split","has","add","e","element","classList","forEach","remove","delete"],"mappings":";;;;;GAKQ,MAACA,EAAEC,EAAE,cAAcC,EAAEC,YAAYC,GAAG,IAAIH,EAAE,GAAGI,MAAMD,GAAGA,EAAEE,OAAOC,EAAEC,WAAW,UAAUJ,EAAEK,OAAO,QAAQR,EAAEG,EAAEM,eAAU,IAAST,OAAE,EAAOA,EAAEU,QAAQ,EAAE,MAAMC,MAAM,qGAAqG,CAACC,OAAOT,GAAG,MAAM,IAAIU,OAAOC,KAAKX,GAAGY,QAAQf,GAAGG,EAAEH,KAAKgB,KAAK,KAAK,GAAG,CAACC,OAAOjB,GAAGC,IAAI,IAAIK,EAAEP,EAAE,QAAG,IAASmB,KAAKC,GAAG,CAACD,KAAKC,GAAG,IAAIC,SAAI,IAASpB,EAAES,UAAUS,KAAKG,GAAG,IAAID,IAAIpB,EAAES,QAAQO,KAAK,KAAKM,MAAM,MAAMP,QAAQZ,GAAG,KAAKA,MAAM,IAAI,MAAMA,KAAKF,EAAEA,EAAEE,MAAM,QAAQG,EAAEY,KAAKG,UAAK,IAASf,OAAE,EAAOA,EAAEiB,IAAIpB,KAAKe,KAAKC,GAAGK,IAAIrB,GAAG,OAAOe,KAAKN,OAAOX,EAAE,CAAC,MAAMwB,EAAEzB,EAAE0B,QAAQC,UAAUT,KAAKC,GAAGS,SAASzB,IAAIA,KAAKF,IAAIwB,EAAEI,OAAO1B,GAAGe,KAAKC,GAAGW,OAAO3B,GAAI,IAAG,IAAI,MAAMA,KAAKF,EAAE,CAAC,MAAMD,IAAIC,EAAEE,GAAGH,IAAIkB,KAAKC,GAAGI,IAAIpB,KAAK,QAAQJ,EAAEmB,KAAKG,UAAK,IAAStB,OAAE,EAAOA,EAAEwB,IAAIpB,MAAMH,GAAGyB,EAAED,IAAIrB,GAAGe,KAAKC,GAAGK,IAAIrB,KAAKsB,EAAEI,OAAO1B,GAAGe,KAAKC,GAAGW,OAAO3B,IAAI,CAAC,OAAOA,CAAC","x_google_ignoreList":[0]}

package/dist/component-5863f9a0.js

@@ -0,0 +1,2 @@
+import{s as t}from"./lit-element-e27601d4.js";class s extends t{constructor(){super(...arguments),this.emit=(t,s)=>{const e=new CustomEvent(t,{bubbles:!0,cancelable:!0,composed:!0,...s});this.dispatchEvent(e)},this.reemit=t=>{!function(t,s){!s.bubbles||t.shadowRoot&&!s.composed||s.stopPropagation();const e=Reflect.construct(s.constructor,[s.type,s]),o=t.dispatchEvent(e);o||s.preventDefault()}(this,t)}}}export{s as C};
+//# sourceMappingURL=component-5863f9a0.js.map

package/dist/component-5863f9a0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-5863f9a0.js","sources":["../src/components/component/component.ts","../src/utils/events.ts"],"sourcesContent":["import { LitElement } from 'lit';\n\nimport { redispatchEvent } from '../../utils/events';\n\nexport class Component extends LitElement {\n\tprotected emit = <T>(eventName: string, options?: CustomEventInit<T>) => {\n\t\tconst event = new CustomEvent<T>(eventName, {\n\t\t\tbubbles: true,\n\t\t\tcancelable: true,\n\t\t\tcomposed: true,\n\t\t\t...options,\n\t\t});\n\n\t\tthis.dispatchEvent(event);\n\t};\n\n\t/**\n\t * Re-dispatches an event.\n\t * This function is useful for forwarding non-composed events, such as `change`\n\t * events.\n\t *\n\t * @example\n\t * class MyInput extends LitElement {\n\t *   render() {\n\t *     return html`<input @change=${this.reemit}>`;\n\t *   }\n\t *\n\t * }\n\t *\n\t * @param event The event to re-dispatch.\n\t */\n\tprotected reemit = (event: Event) => {\n\t\tredispatchEvent(this, event);\n\t};\n}\n","/* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment */\n/**\n * Re-dispatches an event from the provided element.\n *\n * This function is useful for forwarding non-composed events, such as `change`\n * events.\n *\n * @example\n * class MyInput extends LitElement {\n *   render() {\n *     return html`<input @change=${this.redispatchEvent}>`;\n *   }\n *\n *   protected redispatchEvent(event: Event) {\n *     redispatchEvent(this, event);\n *   }\n * }\n *\n * Source: https://github.com/material-components/material-web/blob/c633e85192b20d7ad0930f131957ecefbb8a2f96/controller/events.ts\n *\n * @param element The element to dispatch the event from.\n * @param event The event to re-dispatch.\n * @return Whether or not the event was dispatched (if cancelable).\n */\nexport function redispatchEvent(element: Element, event: Event) {\n\t/**\n\t * For composed events or bubbling events in SSR light DOM, stop their\n\t * propagation and dispatch the copy.\n\t */\n\tif (event.bubbles && (!element.shadowRoot || event.composed)) {\n\t\tevent.stopPropagation();\n\t}\n\n\tconst copy = Reflect.construct(event.constructor, [event.type, event]);\n\tconst dispatched = element.dispatchEvent(copy);\n\tif (!dispatched) {\n\t\tevent.preventDefault();\n\t}\n\n\treturn dispatched;\n}\n"],"names":["Component","LitElement","constructor","this","emit","eventName","options","event","CustomEvent","bubbles","cancelable","composed","dispatchEvent","reemit","element","shadowRoot","stopPropagation","copy","Reflect","construct","type","dispatched","preventDefault","redispatchEvent"],"mappings":"8CAIM,MAAOA,UAAkBC,EAA/BC,kCACWC,KAAAC,KAAO,CAAIC,EAAmBC,KACvC,MAAMC,EAAQ,IAAIC,YAAeH,EAAW,CAC3CI,SAAS,EACTC,YAAY,EACZC,UAAU,KACPL,IAGJH,KAAKS,cAAcL,EAAM,EAkBhBJ,KAAAU,OAAUN,KCPL,SAAgBO,EAAkBP,IAK7CA,EAAME,SAAaK,EAAQC,aAAcR,EAAMI,UAClDJ,EAAMS,kBAGP,MAAMC,EAAOC,QAAQC,UAAUZ,EAAML,YAAa,CAACK,EAAMa,KAAMb,IACzDc,EAAaP,EAAQF,cAAcK,GACpCI,GACJd,EAAMe,gBAIR,CDREC,CAAgBpB,KAAMI,EAAM,CAE7B"}

package/dist/components/banner/banner-action-primary.js

@@ -0,0 +1,2 @@
+import{Button as t}from"../button/button.js";import"../../tslib.es6-a1123316.js";import"../../polymorphic-tag-8ac690fa.js";import"../../lit-element-e27601d4.js";import"../../if-defined-cafd9fa4.js";import"../../class-map-08072625.js";import"../../directive-ee0c609c.js";import"../form-control/form-control.js";import"../../get-token-0e2fefa7.js";import"../../index-f6fbbb6c.js";import"../../get-color-token-747d7930.js";import"../../index-7c8f5ea5.js";import"../../to-array-5c3637ca.js";import"../../_commonjsHelpers-1fe14821.js";import"../../base-button.styles-824fd93f.js";import"../../transition-05d2f752.js";import"../../typography-9325aac2.js";import"../../padding-98a3b04c.js";import"../../margin-bfc1a689.js";class o extends t{constructor(){super(),this.size="small"}connectedCallback(){super.connectedCallback(),this.setAttribute("slot","primary-action")}}window.customElements.define("m-banner-action-primary",o);export{o as BannerActionPrimary};
+//# sourceMappingURL=banner-action-primary.js.map

package/dist/components/banner/banner-action-primary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-action-primary.js","sources":["../../../src/components/banner/banner-action-primary.ts"],"sourcesContent":["import { Button } from '../button';\n\nexport class BannerActionPrimary extends Button {\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.size = 'small';\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\n\t\t// This sets the slot to which the banner-action-primary should be assigned inside the banner-actions component.\n\t\tthis.setAttribute('slot', 'primary-action');\n\t}\n}\n\nwindow.customElements.define('m-banner-action-primary', BannerActionPrimary);\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'm-banner-action-primary': BannerActionPrimary;\n\t}\n}\n"],"names":["BannerActionPrimary","Button","constructor","super","this","size","connectedCallback","setAttribute","window","customElements","define"],"mappings":"4sBAEM,MAAOA,UAA4BC,EACxCC,cACCC,QAEAC,KAAKC,KAAO,OACZ,CAEQC,oBACRH,MAAMG,oBAGNF,KAAKG,aAAa,OAAQ,iBAC1B,EAGFC,OAAOC,eAAeC,OAAO,0BAA2BV"}

package/dist/components/banner/banner-action-secondary.js

@@ -0,0 +1,2 @@
+import{Button as t}from"../button/button.js";import"../../tslib.es6-a1123316.js";import"../../polymorphic-tag-8ac690fa.js";import"../../lit-element-e27601d4.js";import"../../if-defined-cafd9fa4.js";import"../../class-map-08072625.js";import"../../directive-ee0c609c.js";import"../form-control/form-control.js";import"../../get-token-0e2fefa7.js";import"../../index-f6fbbb6c.js";import"../../get-color-token-747d7930.js";import"../../index-7c8f5ea5.js";import"../../to-array-5c3637ca.js";import"../../_commonjsHelpers-1fe14821.js";import"../../base-button.styles-824fd93f.js";import"../../transition-05d2f752.js";import"../../typography-9325aac2.js";import"../../padding-98a3b04c.js";import"../../margin-bfc1a689.js";class o extends t{constructor(){super(),this.variant="tertiary",this.size="small"}connectedCallback(){super.connectedCallback(),this.setAttribute("slot","secondary-action")}}window.customElements.define("m-banner-action-secondary",o);export{o as BannerActionSecondary};
+//# sourceMappingURL=banner-action-secondary.js.map

package/dist/components/banner/banner-action-secondary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-action-secondary.js","sources":["../../../src/components/banner/banner-action-secondary.ts"],"sourcesContent":["import { Button } from '../button';\n\nexport class BannerActionSecondary extends Button {\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.variant = 'tertiary';\n\t\tthis.size = 'small';\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\n\t\t// This sets the slot to which the banner-action-secondary should be assigned inside the banner-actions component.\n\t\tthis.setAttribute('slot', 'secondary-action');\n\t}\n}\n\nwindow.customElements.define(\n\t'm-banner-action-secondary',\n\tBannerActionSecondary,\n);\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'm-banner-action-secondary': BannerActionSecondary;\n\t}\n}\n"],"names":["BannerActionSecondary","Button","constructor","super","this","variant","size","connectedCallback","setAttribute","window","customElements","define"],"mappings":"4sBAEM,MAAOA,UAA8BC,EAC1CC,cACCC,QAEAC,KAAKC,QAAU,WACfD,KAAKE,KAAO,OACZ,CAEQC,oBACRJ,MAAMI,oBAGNH,KAAKI,aAAa,OAAQ,mBAC1B,EAGFC,OAAOC,eAAeC,OACrB,4BACAX"}

package/dist/components/banner/banner-actions.js

@@ -0,0 +1,11 @@
+import{i as t,s as e,x as n}from"../../lit-element-e27601d4.js";import{g as o}from"../../get-token-0e2fefa7.js";import"../../index-f6fbbb6c.js";class s extends e{connectedCallback(){super.connectedCallback(),this.setAttribute("slot","actions")}render(){return n`
+			<slot name="secondary-action"></slot>
+			<slot name="primary-action"></slot>
+		`}}s.styles=[t`
+		:host {
+			display: flex;
+			justify-content: flex-end;
+			gap: ${o("spacing-2")};
+		}
+	`],window.customElements.define("m-banner-actions",s);export{s as BannerActions};
+//# sourceMappingURL=banner-actions.js.map

package/dist/components/banner/banner-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-actions.js","sources":["../../../src/components/banner/banner-actions.ts","../../../src/components/banner/banner-actions.styles.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\n\nimport { styles } from './banner-actions.styles';\n\nexport class BannerActions extends LitElement {\n\tstatic override styles = [styles()];\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\n\t\t// This sets the slot to which the banner-actions should be assigned inside the banner component.\n\t\tthis.setAttribute('slot', 'actions');\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<slot name=\"secondary-action\"></slot>\n\t\t\t<slot name=\"primary-action\"></slot>\n\t\t`;\n\t}\n}\n\nwindow.customElements.define('m-banner-actions', BannerActions);\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'm-banner-actions': BannerActions;\n\t}\n}\n","import { css } from 'lit';\n\nimport token from '../../utils/get-token';\n\nexport function styles() {\n\treturn css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: flex-end;\n\t\t\tgap: ${token('spacing-2')};\n\t\t}\n\t`;\n}\n"],"names":["BannerActions","LitElement","connectedCallback","super","this","setAttribute","render","html","styles","css","token","window","customElements","define"],"mappings":"gJAIM,MAAOA,UAAsBC,EAGzBC,oBACRC,MAAMD,oBAGNE,KAAKC,aAAa,OAAQ,UAC1B,CAEQC,SACR,OAAOC,CAAI;;;GAIX,EAdeP,EAAAQ,OAAS,CCAlBC,CAAG;;;;UAIDC,EAAM;;IDahBC,OAAOC,eAAeC,OAAO,mBAAoBb"}

package/dist/components/banner/banner-description.js

@@ -0,0 +1,7 @@
+import{i as o,s as t,x as e}from"../../lit-element-e27601d4.js";import{g as r}from"../../get-color-token-747d7930.js";import{t as s}from"../../typography-9325aac2.js";import"../../index-f6fbbb6c.js";import"../../get-token-0e2fefa7.js";class n extends t{connectedCallback(){super.connectedCallback(),this.setAttribute("slot","description")}render(){return e`<slot></slot>`}}n.styles=[o`
+		:host {
+			${s("body-md")};
+			color: ${r("color-text-secondary")};
+		}
+	`],window.customElements.define("m-banner-description",n);export{n as BannerDescription};
+//# sourceMappingURL=banner-description.js.map

package/dist/components/banner/banner-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-description.js","sources":["../../../src/components/banner/banner-description.ts","../../../src/components/banner/banner-description.styles.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\n\nimport { styles } from './banner-description.styles';\n\nexport class BannerDescription extends LitElement {\n\tstatic override styles = [styles()];\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\n\t\t// This sets the slot to which the banner-description should be assigned inside the banner component.\n\t\tthis.setAttribute('slot', 'description');\n\t}\n\n\toverride render() {\n\t\treturn html`<slot></slot>`;\n\t}\n}\n\nwindow.customElements.define('m-banner-description', BannerDescription);\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'm-banner-description': BannerDescription;\n\t}\n}\n","import { css } from 'lit';\n\nimport color from '../../utils/get-color-token';\nimport { typography } from '../../styles';\n\nexport function styles() {\n\treturn css`\n\t\t:host {\n\t\t\t${typography('body-md')};\n\t\t\tcolor: ${color('color-text-secondary')};\n\t\t}\n\t`;\n}\n"],"names":["BannerDescription","LitElement","connectedCallback","super","this","setAttribute","render","html","styles","css","typography","color","window","customElements","define"],"mappings":"2OAIM,MAAOA,UAA0BC,EAG7BC,oBACRC,MAAMD,oBAGNE,KAAKC,aAAa,OAAQ,cAC1B,CAEQC,SACR,OAAOC,CAAI,eACX,EAXeP,EAAAQ,OAAS,CCClBC,CAAG;;KAENC,EAAW;YACJC,EAAM;;IDUlBC,OAAOC,eAAeC,OAAO,uBAAwBd"}

package/dist/components/banner/banner-icon.js

@@ -0,0 +1,2 @@
+import{s as e,x as n}from"../../lit-element-e27601d4.js";class t extends e{connectedCallback(){super.connectedCallback(),this.setAttribute("slot","icon")}render(){return n`<slot></slot>`}}window.customElements.define("m-banner-icon",t);export{t as BannerIcon};
+//# sourceMappingURL=banner-icon.js.map

package/dist/components/banner/banner-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-icon.js","sources":["../../../src/components/banner/banner-icon.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\n\nexport class BannerIcon extends LitElement {\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\n\t\t// This sets the slot to which the banner-icon should be assigned inside the banner component.\n\t\tthis.setAttribute('slot', 'icon');\n\t}\n\n\toverride render() {\n\t\treturn html`<slot></slot>`;\n\t}\n}\n\nwindow.customElements.define('m-banner-icon', BannerIcon);\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'm-banner-icon': BannerIcon;\n\t}\n}\n"],"names":["BannerIcon","LitElement","connectedCallback","super","this","setAttribute","render","html","window","customElements","define"],"mappings":"yDAEM,MAAOA,UAAmBC,EACtBC,oBACRC,MAAMD,oBAGNE,KAAKC,aAAa,OAAQ,OAC1B,CAEQC,SACR,OAAOC,CAAI,eACX,EAGFC,OAAOC,eAAeC,OAAO,gBAAiBV"}

package/dist/components/banner/banner-title.js

@@ -0,0 +1,7 @@
+import{i as t,s as o,x as e}from"../../lit-element-e27601d4.js";import{g as r}from"../../get-color-token-747d7930.js";import{t as s}from"../../typography-9325aac2.js";import"../../index-f6fbbb6c.js";import"../../get-token-0e2fefa7.js";class l extends o{connectedCallback(){super.connectedCallback(),this.setAttribute("slot","title")}render(){return e`<slot></slot>`}}l.styles=[t`
+		:host {
+			${s("body-md-bold")};
+			color: ${r("color-text-secondary")};
+		}
+	`],window.customElements.define("m-banner-title",l);export{l as BannerTitle};
+//# sourceMappingURL=banner-title.js.map

package/dist/components/banner/banner-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner-title.js","sources":["../../../src/components/banner/banner-title.ts","../../../src/components/banner/banner-title.styles.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\n\nimport { styles } from './banner-title.styles';\n\nexport class BannerTitle extends LitElement {\n\tstatic override styles = [styles()];\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\n\t\t// This sets the slot to which the banner-title should be assigned inside the banner component.\n\t\tthis.setAttribute('slot', 'title');\n\t}\n\n\toverride render() {\n\t\treturn html`<slot></slot>`;\n\t}\n}\n\nwindow.customElements.define('m-banner-title', BannerTitle);\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'm-banner-title': BannerTitle;\n\t}\n}\n","import { css } from 'lit';\n\nimport color from '../../utils/get-color-token';\nimport { typography } from '../../styles';\n\nexport function styles() {\n\treturn css`\n\t\t:host {\n\t\t\t${typography('body-md-bold')};\n\t\t\tcolor: ${color('color-text-secondary')};\n\t\t}\n\t`;\n}\n"],"names":["BannerTitle","LitElement","connectedCallback","super","this","setAttribute","render","html","styles","css","typography","color","window","customElements","define"],"mappings":"2OAIM,MAAOA,UAAoBC,EAGvBC,oBACRC,MAAMD,oBAGNE,KAAKC,aAAa,OAAQ,QAC1B,CAEQC,SACR,OAAOC,CAAI,eACX,EAXeP,EAAAQ,OAAS,CCClBC,CAAG;;KAENC,EAAW;YACJC,EAAM;;IDUlBC,OAAOC,eAAeC,OAAO,iBAAkBd"}

package/dist/components/banner/banner.js

@@ -0,0 +1,94 @@
+import{_ as r,a as n}from"../../tslib.es6-a1123316.js";import{i as o,A as i,x as s}from"../../lit-element-e27601d4.js";import{o as e}from"../../class-map-08072625.js";import{C as t}from"../../component-5863f9a0.js";import{g as a}from"../../get-token-0e2fefa7.js";import{g as c}from"../../get-color-token-747d7930.js";import"../button/button.js";import"../close-button/close-button.js";import"../text/text.js";import"../icon/icon.js";import"../../directive-ee0c609c.js";import"../../index-f6fbbb6c.js";import"../../polymorphic-tag-8ac690fa.js";import"../../if-defined-cafd9fa4.js";import"../form-control/form-control.js";import"../../index-7c8f5ea5.js";import"../../to-array-5c3637ca.js";import"../../_commonjsHelpers-1fe14821.js";import"../../base-button.styles-824fd93f.js";import"../../transition-05d2f752.js";import"../../typography-9325aac2.js";import"../../padding-98a3b04c.js";import"../../margin-bfc1a689.js";import"../../to-rem-1d73defe.js";import"../../style-map-6714bc07.js";import"../icon/available-icons.js";var l,m;class p extends t{static get properties(){return{variant:{type:String},dismissible:{type:Boolean},dismissed:{type:Boolean,reflect:!0}}}constructor(){super(),l.set(this,void 0),m.set(this,(()=>{this.dismissed=!0,this.emit("m-dismiss",{composed:!0})})),this.variant="neutral",this.dismissible=!1,this.dismissed=!1}get primaryAction(){return null==r(this,l,"f")&&n(this,l,this.querySelector("m-banner-action-primary"),"f"),r(this,l,"f")}updated(r){super.updated(r),r.has("variant")&&null!=this.primaryAction&&(this.primaryAction.variant=function(r){switch(r){case"warning":return"warning";case"danger":return"danger";default:return"primary"}}(this.variant))}render(){if(this.dismissed)return i;const n=null!=this.querySelector("*[slot='description']"),o=null!=this.querySelector("*[slot='actions']"),t=s`
+			<m-close-button
+				id="close"
+				label="Dismiss"
+				@click=${r(this,m,"f")}
+			></m-close-button>
+		`;return s`
+			<div
+				class=${e({banner:!0,"-success":"success"===this.variant,"-warning":"warning"===this.variant,"-danger":"danger"===this.variant,"-with-description":n})}
+			>
+				<div class="wrapper">
+					<slot name="icon">
+						<m-icon name="${function(r){switch(r){case"success":return"check";case"warning":case"danger":return"attention";default:return"info-circle"}}(this.variant)}"></m-icon>
+					</slot>
+					<div class="content">
+						<slot name="title"></slot>
+						<slot name="description"></slot>
+					</div>
+					${this.dismissible&&!o?t:i}
+				</div>
+				<slot name="actions"></slot>
+			</div>
+		`}}l=new WeakMap,m=new WeakMap,p.styles=[o`
+		:host {
+			display: block;
+			width: 100%;
+		}
+
+		:host([dismissed]) {
+			display: none;
+		}
+
+		.banner {
+			background-color: var(
+				--m-banner-background-color,
+				${c("color-background-secondary")}
+			);
+			border: var(--m-banner-border, 1px solid ${c("color-border")});
+			border-radius: var(--m-banner-border-radius, ${a("border-radius-m")});
+			padding-inline: var(--m-banner-padding-x, ${a("spacing-6")});
+			padding-block: var(--m-banner-padding-y, ${a("spacing-4")});
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: flex-end;
+			gap: ${a("spacing-6")};
+		}
+
+		.banner.-success {
+			--m-banner-background-color: ${c("color-success-20")};
+			--m-banner-border: 1px solid ${c("color-success-20")};
+			--m-banner-icon-color: ${c("color-success-60")};
+		}
+
+		.banner.-warning {
+			--m-banner-background-color: ${c("color-warning-20")};
+			--m-banner-border: 1px solid ${c("color-warning-20")};
+			--m-banner-icon-color: ${c("color-warning-100")};
+		}
+
+		.banner.-danger {
+			--m-banner-background-color: ${c("color-danger-20")};
+			--m-banner-border: 1px solid ${c("color-danger-20")};
+			--m-banner-icon-color: ${c("color-danger-60")};
+		}
+
+		.banner.-with-description {
+			flex-direction: column;
+		}
+
+		.wrapper {
+			display: flex;
+			gap: ${a("spacing-6")};
+			align-items: center;
+			flex-grow: 1;
+		}
+
+		slot[name='icon'] > m-icon,
+		slot[name='icon']::slotted(*) {
+			--m-icon-color: var(--m-banner-icon-color, ${c("color-neutral-90")});
+			--m-icon-size: var(--m-banner-icon-size, 24px);
+
+			fill: var(--m-banner-icon-color, ${c("color-neutral-90")});
+			block-size: var(--m-banner-icon-size, 24px);
+			inline-size: var(--m-banner-icon-size, 24px);
+		}
+
+		.content {
+			display: flex;
+			flex-direction: column;
+			flex-grow: 1;
+			gap: ${a("spacing-1")};
+		}
+	`],window.customElements.define("m-banner",p);export{p as Banner};
+//# sourceMappingURL=banner.js.map

package/dist/components/banner/banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.js","sources":["../../../src/components/banner/banner.ts","../../../src/components/banner/banner.styles.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport type { ButtonVariant } from '../button';\nimport { Component } from '../component';\nimport type { IconName } from '../icon';\nimport type { BannerActionPrimary } from './banner-action-primary';\nimport { styles } from './banner.styles';\n\nimport '../button';\nimport '../close-button';\nimport '../text';\nimport '../icon';\n\nexport type BannerVariant = 'neutral' | 'warning' | 'danger' | 'success';\n\nfunction getIcon(variant?: BannerVariant): IconName {\n\tswitch (variant) {\n\t\tcase 'success': {\n\t\t\treturn 'check';\n\t\t}\n\t\tcase 'warning':\n\t\tcase 'danger': {\n\t\t\treturn 'attention';\n\t\t}\n\t\tcase 'neutral':\n\t\tdefault: {\n\t\t\treturn 'info-circle';\n\t\t}\n\t}\n}\n\nfunction getPrimaryActionVariant(variant?: BannerVariant): ButtonVariant {\n\tswitch (variant) {\n\t\tcase 'warning': {\n\t\t\treturn 'warning';\n\t\t}\n\t\tcase 'danger': {\n\t\t\treturn 'danger';\n\t\t}\n\t\tcase 'success':\n\t\tcase 'neutral':\n\t\tdefault: {\n\t\t\treturn 'primary';\n\t\t}\n\t}\n}\n\nexport interface BannerProps {\n\tvariant?: BannerVariant;\n\tdismissible?: boolean;\n\tdismissed?: boolean;\n}\n\nexport class Banner extends Component {\n\tstatic override styles = [styles()];\n\n\tstatic override get properties() {\n\t\treturn {\n\t\t\tvariant: { type: String },\n\t\t\tdismissible: { type: Boolean },\n\t\t\tdismissed: { type: Boolean, reflect: true },\n\t\t};\n\t}\n\n\t/**\n\t * Determines the style. Defaults to 'neutral'.\n\t */\n\tdeclare variant: BannerProps['variant'];\n\n\t/**\n\t * Determine if the banner is dismissible. It will not be dismissible if\n\t * there's an action defined. Defaults to false.\n\t */\n\tdeclare dismissible: BannerProps['dismissible'];\n\n\t/**\n\t * Determine if the banner was dismissed or not.\n\t */\n\tdeclare dismissed: BannerProps['dismissed'];\n\n\t/**\n\t * Reference for the Primary Action\n\t */\n\t#primaryAction?: BannerActionPrimary | null;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.variant = 'neutral';\n\t\tthis.dismissible = false;\n\t\tthis.dismissed = false;\n\t}\n\n\tget primaryAction(): BannerActionPrimary | null {\n\t\tif (this.#primaryAction == null) {\n\t\t\tthis.#primaryAction = this.querySelector('m-banner-action-primary');\n\t\t}\n\n\t\treturn this.#primaryAction;\n\t}\n\n\toverride updated(changedProperties: PropertyValues) {\n\t\tsuper.updated(changedProperties);\n\n\t\t// Force the primary action to have a variant based on the banner's variant\n\t\tif (changedProperties.has('variant') && this.primaryAction != null) {\n\t\t\tthis.primaryAction.variant = getPrimaryActionVariant(this.variant);\n\t\t}\n\t}\n\n\toverride render() {\n\t\tif (this.dismissed) {\n\t\t\treturn nothing;\n\t\t}\n\n\t\tconst hasDescription = this.querySelector(`*[slot='description']`) != null;\n\t\tconst hasActions = this.querySelector(`*[slot='actions']`) != null;\n\n\t\tconst closeButton = html`\n\t\t\t<m-close-button\n\t\t\t\tid=\"close\"\n\t\t\t\tlabel=\"Dismiss\"\n\t\t\t\t@click=${this.#handleDismissClick}\n\t\t\t></m-close-button>\n\t\t`;\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap({\n\t\t\t\t\tbanner: true,\n\t\t\t\t\t'-success': this.variant === 'success',\n\t\t\t\t\t'-warning': this.variant === 'warning',\n\t\t\t\t\t'-danger': this.variant === 'danger',\n\t\t\t\t\t'-with-description': hasDescription,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<div class=\"wrapper\">\n\t\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t\t<m-icon name=\"${getIcon(this.variant)}\"></m-icon>\n\t\t\t\t\t</slot>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot name=\"title\"></slot>\n\t\t\t\t\t\t<slot name=\"description\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t${this.dismissible && !hasActions ? closeButton : nothing}\n\t\t\t\t</div>\n\t\t\t\t<slot name=\"actions\"></slot>\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t#handleDismissClick = () => {\n\t\tthis.dismissed = true;\n\n\t\tthis.emit('m-dismiss', { composed: true });\n\t};\n}\n\nwindow.customElements.define('m-banner', Banner);\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'm-banner': Banner;\n\t}\n}\n","import { css } from 'lit';\n\nimport token from '../../utils/get-token';\nimport color from '../../utils/get-color-token';\n\nexport function styles() {\n\treturn css`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t:host([dismissed]) {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.banner {\n\t\t\tbackground-color: var(\n\t\t\t\t--m-banner-background-color,\n\t\t\t\t${color('color-background-secondary')}\n\t\t\t);\n\t\t\tborder: var(--m-banner-border, 1px solid ${color('color-border')});\n\t\t\tborder-radius: var(--m-banner-border-radius, ${token('border-radius-m')});\n\t\t\tpadding-inline: var(--m-banner-padding-x, ${token('spacing-6')});\n\t\t\tpadding-block: var(--m-banner-padding-y, ${token('spacing-4')});\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tjustify-content: flex-end;\n\t\t\tgap: ${token('spacing-6')};\n\t\t}\n\n\t\t.banner.-success {\n\t\t\t--m-banner-background-color: ${color('color-success-20')};\n\t\t\t--m-banner-border: 1px solid ${color('color-success-20')};\n\t\t\t--m-banner-icon-color: ${color('color-success-60')};\n\t\t}\n\n\t\t.banner.-warning {\n\t\t\t--m-banner-background-color: ${color('color-warning-20')};\n\t\t\t--m-banner-border: 1px solid ${color('color-warning-20')};\n\t\t\t--m-banner-icon-color: ${color('color-warning-100')};\n\t\t}\n\n\t\t.banner.-danger {\n\t\t\t--m-banner-background-color: ${color('color-danger-20')};\n\t\t\t--m-banner-border: 1px solid ${color('color-danger-20')};\n\t\t\t--m-banner-icon-color: ${color('color-danger-60')};\n\t\t}\n\n\t\t.banner.-with-description {\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t.wrapper {\n\t\t\tdisplay: flex;\n\t\t\tgap: ${token('spacing-6')};\n\t\t\talign-items: center;\n\t\t\tflex-grow: 1;\n\t\t}\n\n\t\tslot[name='icon'] > m-icon,\n\t\tslot[name='icon']::slotted(*) {\n\t\t\t--m-icon-color: var(--m-banner-icon-color, ${color('color-neutral-90')});\n\t\t\t--m-icon-size: var(--m-banner-icon-size, 24px);\n\n\t\t\tfill: var(--m-banner-icon-color, ${color('color-neutral-90')});\n\t\t\tblock-size: var(--m-banner-icon-size, 24px);\n\t\t\tinline-size: var(--m-banner-icon-size, 24px);\n\t\t}\n\n\t\t.content {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tflex-grow: 1;\n\t\t\tgap: ${token('spacing-1')};\n\t\t}\n\t`;\n}\n"],"names":["Banner","Component","properties","variant","type","String","dismissible","Boolean","dismissed","reflect","constructor","super","_Banner_primaryAction","set","this","_Banner_handleDismissClick","emit","composed","primaryAction","__classPrivateFieldGet","__classPrivateFieldSet","querySelector","updated","changedProperties","has","getPrimaryActionVariant","render","nothing","hasDescription","hasActions","closeButton","html","classMap","banner","getIcon","styles","css","color","token","window","customElements","define"],"mappings":"ogCAuDM,MAAOA,UAAeC,EAGPC,wBACnB,MAAO,CACNC,QAAS,CAAEC,KAAMC,QACjBC,YAAa,CAAEF,KAAMG,SACrBC,UAAW,CAAEJ,KAAMG,QAASE,SAAS,GAEtC,CAuBDC,cACCC,QAHDC,EAA4CC,IAAAC,UAAA,GAoE5CC,EAAAF,IAAAC,MAAsB,KACrBA,KAAKN,WAAY,EAEjBM,KAAKE,KAAK,YAAa,CAAEC,UAAU,GAAO,IAlE1CH,KAAKX,QAAU,UACfW,KAAKR,aAAc,EACnBQ,KAAKN,WAAY,CACjB,CAEGU,oBAKH,OAJ2B,MAAvBC,EAAAL,KAAmBF,EAAA,MACtBQ,EAAAN,OAAsBA,KAAKO,cAAc,2BAA0B,KAG7DF,EAAAL,KAAIF,EAAA,IACX,CAEQU,QAAQC,GAChBZ,MAAMW,QAAQC,GAGVA,EAAkBC,IAAI,YAAoC,MAAtBV,KAAKI,gBAC5CJ,KAAKI,cAAcf,QA3EtB,SAAiCA,GAChC,OAAQA,GACP,IAAK,UACJ,MAAO,UAER,IAAK,SACJ,MAAO,SAIR,QACC,MAAO,UAGV,CA6DgCsB,CAAwBX,KAAKX,SAE3D,CAEQuB,SACR,GAAIZ,KAAKN,UACR,OAAOmB,EAGR,MAAMC,EAAgE,MAA/Cd,KAAKO,cAAc,yBACpCQ,EAAwD,MAA3Cf,KAAKO,cAAc,qBAEhCS,EAAcC,CAAI;;;;aAIbZ,EAAAL,KAAwBC,EAAA;;IAInC,OAAOgB,CAAI;;YAEDC,EAAS,CAChBC,QAAQ,EACR,WAA6B,YAAjBnB,KAAKX,QACjB,WAA6B,YAAjBW,KAAKX,QACjB,UAA4B,WAAjBW,KAAKX,QAChB,oBAAqByB;;;;sBAtH1B,SAAiBzB,GAChB,OAAQA,GACP,IAAK,UACJ,MAAO,QAER,IAAK,UACL,IAAK,SACJ,MAAO,YAGR,QACC,MAAO,cAGV,CA6GsB+B,CAAQpB,KAAKX;;;;;;OAM5BW,KAAKR,cAAgBuB,EAAaC,EAAcH;;;;GAKrD,8BA/Fe3B,EAAAmC,OAAS,CClDlBC,CAAG;;;;;;;;;;;;;MAaLC,EAAM;;8CAEkCA,EAAM;kDACFC,EAAM;+CACTA,EAAM;8CACPA,EAAM;;;;UAI1CA,EAAM;;;;kCAIkBD,EAAM;kCACNA,EAAM;4BACZA,EAAM;;;;kCAIAA,EAAM;kCACNA,EAAM;4BACZA,EAAM;;;;kCAIAA,EAAM;kCACNA,EAAM;4BACZA,EAAM;;;;;;;;;UASxBC,EAAM;;;;;;;gDAOgCD,EAAM;;;sCAGhBA,EAAM;;;;;;;;;UASlCC,EAAM;;IDsFhBC,OAAOC,eAAeC,OAAO,WAAYzC"}