@maggioli-design-system/mds-accordion-item
Advanced tools
Comparing version 4.2.0 to 4.3.0
@@ -9,3 +9,3 @@ 'use strict'; | ||
const mdsAccordionItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.fixed{position:fixed}.absolute{position:absolute}.contents{display:contents}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-accordion-item-border-color:rgb(var(--tone-neutral-08));--mds-accordion-item-color:rgb(var(--tone-neutral-03));--mds-accordion-item-description-color:rgb(var(--tone-neutral-02));position:relative;display:grid;padding-top:1rem;padding-bottom:1rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);border-bottom:solid 2px transparent !important;border-top:solid 2px transparent !important;color:var(--mds-accordion-item-color);fill:var(--mds-accordion-item-color);margin-bottom:-2px}:host([selected]){margin-top:1rem;margin-bottom:1rem;padding-top:2rem;padding-bottom:2rem;border-bottom:solid 2px var(--mds-accordion-item-border-color) !important;border-top:solid 2px var(--mds-accordion-item-border-color) !important}:host(.sibling[selected]){margin-top:-1.125rem;border-top-color:transparent !important}:host([selected]:first-child){margin-top:0px;border-top-color:transparent !important}:host([selected]:last-child){margin-bottom:0px;border-bottom-color:transparent !important}.action{display:grid;cursor:pointer;grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;gap:1rem;border-radius:0.5rem;border-style:none;background-color:transparent;padding:0px;text-align:left;color:var(--mds-accordion-item-description-color);grid-template-columns:1fr auto}.icon-button{display:block;font-weight:400}.contents{display:-ms-flexbox;display:flex;height:0px;-ms-flex-direction:column;flex-direction:column;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94)}:host([selected]) .contents{height:auto;padding-top:1rem;opacity:1}.icon{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);fill:var(--mds-accordion-item-color);-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([selected]) .icon{-webkit-transform:rotate(0deg);transform:rotate(0deg)}"; | ||
const mdsAccordionItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.fixed{position:fixed}.absolute{position:absolute}.contents{display:contents}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-accordion-item-border-color:var(--mds-accordion-border-color, rgb(var(--tone-neutral-08)));--mds-accordion-item-border-width:var(--mds-accordion-border-width, 2px);--mds-accordion-item-color:var(--mds-accordion-color, rgb(var(--tone-neutral-03)));--mds-accordion-item-description-color:var(--mds-accordion-description-color, rgb(var(--tone-neutral-02)));--mds-accordion-item-duration:var(--mds-accordion-duration, 300ms);--mds-accordion-item-padding-selected:var(--mds-accordion-padding-selected, 1rem 0 2rem 0);--mds-accordion-item-padding-unselected:var(--mds-accordion-padding-unselected, 1rem 0 1rem 0);position:relative;display:grid;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);border-bottom:solid var(--mds-accordion-item-border-width) transparent;border-top:solid var(--mds-accordion-item-border-width) transparent;color:var(--mds-accordion-item-color);fill:var(--mds-accordion-item-color);padding:var(--mds-accordion-item-padding-unselected);margin-top:calc(-1 * var(--mds-accordion-item-border-width))}:host(:first-child){margin-top:0}:host([selected]){padding:var(--mds-accordion-item-padding-selected);border-bottom:solid var(--mds-accordion-item-border-width) var(--mds-accordion-item-border-color);border-top:solid var(--mds-accordion-item-border-width) var(--mds-accordion-item-border-color)}:host([selected]:first-child){margin-top:0px;border-top-color:transparent}:host([selected]:last-child){margin-bottom:0px;border-bottom-color:transparent}.action{display:grid;cursor:pointer;grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;gap:1rem;border-radius:0.5rem;border-style:none;background-color:transparent;padding:0px;text-align:left;color:var(--mds-accordion-item-description-color);grid-template-columns:1fr auto}.icon-button{display:block;font-weight:400}.contents{display:grid;min-height:0px;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);grid-template-rows:0fr;-webkit-transition-duration:var(--mds-accordion-item-duration);transition-duration:var(--mds-accordion-item-duration);-webkit-transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding, -ms-grid-rows opacity padding}.contents-expander{min-height:0}:host([selected]) .contents{padding-top:1rem;opacity:1;grid-template-rows:1fr}.icon{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);fill:var(--mds-accordion-item-color);-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([selected]) .icon{-webkit-transform:rotate(0deg);transform:rotate(0deg)}"; | ||
@@ -32,3 +32,3 @@ const MdsAccordionItem = class { | ||
render() { | ||
return (index.h(index.Host, null, index.h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, index.h("mds-text", { typography: this.typography }, this.description), index.h("mds-text", { "aria-hidden": "true", class: "icon-button", typography: this.typography }, index.h("i", { class: "svg icon", innerHTML: miBaselineKeyboardArrowUp }))), index.h("div", { "aria-labelledby": "action", class: "contents", id: "contents", role: "region" }, index.h("slot", null)))); | ||
return (index.h(index.Host, null, index.h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, index.h("mds-text", { typography: this.typography }, this.description), index.h("mds-text", { "aria-hidden": "true", class: "icon-button", typography: this.typography }, index.h("i", { class: "svg icon", innerHTML: miBaselineKeyboardArrowUp }))), index.h("div", { class: "contents", id: "contents" }, index.h("div", { "aria-labelledby": "action", class: "contents-expander", part: "contents", role: "region" }, index.h("slot", null))))); | ||
} | ||
@@ -35,0 +35,0 @@ get element() { return index.getElement(this); } |
@@ -19,3 +19,3 @@ import miBaselineKeyboardArrowUp from '@icon/mi/baseline/keyboard-arrow-up.svg'; | ||
render() { | ||
return (h(Host, null, h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { typography: this.typography }, this.description), h("mds-text", { "aria-hidden": "true", class: "icon-button", typography: this.typography }, h("i", { class: "svg icon", innerHTML: miBaselineKeyboardArrowUp }))), h("div", { "aria-labelledby": "action", class: "contents", id: "contents", role: "region" }, h("slot", null)))); | ||
return (h(Host, null, h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { typography: this.typography }, this.description), h("mds-text", { "aria-hidden": "true", class: "icon-button", typography: this.typography }, h("i", { class: "svg icon", innerHTML: miBaselineKeyboardArrowUp }))), h("div", { class: "contents", id: "contents" }, h("div", { "aria-labelledby": "action", class: "contents-expander", part: "contents", role: "region" }, h("slot", null))))); | ||
} | ||
@@ -22,0 +22,0 @@ static get is() { return "mds-accordion-item"; } |
@@ -16,2 +16,6 @@ const buttonVariantDictionary = [ | ||
]; | ||
const buttonTargetDictionary = [ | ||
'blank', | ||
'self', | ||
]; | ||
const buttonSizeDictionary = [ | ||
@@ -27,2 +31,2 @@ 'sm', | ||
]; | ||
export { buttonSizeDictionary, buttonToneVariantDictionary, buttonVariantDictionary, buttonIconPositionDictionary, }; | ||
export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonVariantDictionary, }; |
@@ -56,2 +56,10 @@ const themeVariantDictionary = [ | ||
]; | ||
const toneActionVariantDictionary = [ | ||
'primary', | ||
'secondary', | ||
'tertiary', | ||
'strong', | ||
'weak', | ||
'quiet', | ||
]; | ||
const toneSimpleVariantDictionary = [ | ||
@@ -66,2 +74,2 @@ 'strong', | ||
]; | ||
export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, }; | ||
export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, }; |
@@ -5,3 +5,3 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client'; | ||
const mdsAccordionItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.fixed{position:fixed}.absolute{position:absolute}.contents{display:contents}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-accordion-item-border-color:rgb(var(--tone-neutral-08));--mds-accordion-item-color:rgb(var(--tone-neutral-03));--mds-accordion-item-description-color:rgb(var(--tone-neutral-02));position:relative;display:grid;padding-top:1rem;padding-bottom:1rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);border-bottom:solid 2px transparent !important;border-top:solid 2px transparent !important;color:var(--mds-accordion-item-color);fill:var(--mds-accordion-item-color);margin-bottom:-2px}:host([selected]){margin-top:1rem;margin-bottom:1rem;padding-top:2rem;padding-bottom:2rem;border-bottom:solid 2px var(--mds-accordion-item-border-color) !important;border-top:solid 2px var(--mds-accordion-item-border-color) !important}:host(.sibling[selected]){margin-top:-1.125rem;border-top-color:transparent !important}:host([selected]:first-child){margin-top:0px;border-top-color:transparent !important}:host([selected]:last-child){margin-bottom:0px;border-bottom-color:transparent !important}.action{display:grid;cursor:pointer;grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;gap:1rem;border-radius:0.5rem;border-style:none;background-color:transparent;padding:0px;text-align:left;color:var(--mds-accordion-item-description-color);grid-template-columns:1fr auto}.icon-button{display:block;font-weight:400}.contents{display:-ms-flexbox;display:flex;height:0px;-ms-flex-direction:column;flex-direction:column;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94)}:host([selected]) .contents{height:auto;padding-top:1rem;opacity:1}.icon{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);fill:var(--mds-accordion-item-color);-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([selected]) .icon{-webkit-transform:rotate(0deg);transform:rotate(0deg)}"; | ||
const mdsAccordionItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.fixed{position:fixed}.absolute{position:absolute}.contents{display:contents}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-accordion-item-border-color:var(--mds-accordion-border-color, rgb(var(--tone-neutral-08)));--mds-accordion-item-border-width:var(--mds-accordion-border-width, 2px);--mds-accordion-item-color:var(--mds-accordion-color, rgb(var(--tone-neutral-03)));--mds-accordion-item-description-color:var(--mds-accordion-description-color, rgb(var(--tone-neutral-02)));--mds-accordion-item-duration:var(--mds-accordion-duration, 300ms);--mds-accordion-item-padding-selected:var(--mds-accordion-padding-selected, 1rem 0 2rem 0);--mds-accordion-item-padding-unselected:var(--mds-accordion-padding-unselected, 1rem 0 1rem 0);position:relative;display:grid;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);border-bottom:solid var(--mds-accordion-item-border-width) transparent;border-top:solid var(--mds-accordion-item-border-width) transparent;color:var(--mds-accordion-item-color);fill:var(--mds-accordion-item-color);padding:var(--mds-accordion-item-padding-unselected);margin-top:calc(-1 * var(--mds-accordion-item-border-width))}:host(:first-child){margin-top:0}:host([selected]){padding:var(--mds-accordion-item-padding-selected);border-bottom:solid var(--mds-accordion-item-border-width) var(--mds-accordion-item-border-color);border-top:solid var(--mds-accordion-item-border-width) var(--mds-accordion-item-border-color)}:host([selected]:first-child){margin-top:0px;border-top-color:transparent}:host([selected]:last-child){margin-bottom:0px;border-bottom-color:transparent}.action{display:grid;cursor:pointer;grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;gap:1rem;border-radius:0.5rem;border-style:none;background-color:transparent;padding:0px;text-align:left;color:var(--mds-accordion-item-description-color);grid-template-columns:1fr auto}.icon-button{display:block;font-weight:400}.contents{display:grid;min-height:0px;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);grid-template-rows:0fr;-webkit-transition-duration:var(--mds-accordion-item-duration);transition-duration:var(--mds-accordion-item-duration);-webkit-transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding, -ms-grid-rows opacity padding}.contents-expander{min-height:0}:host([selected]) .contents{padding-top:1rem;opacity:1;grid-template-rows:1fr}.icon{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);fill:var(--mds-accordion-item-color);-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([selected]) .icon{-webkit-transform:rotate(0deg);transform:rotate(0deg)}"; | ||
@@ -30,3 +30,3 @@ const MdsAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement { | ||
render() { | ||
return (h(Host, null, h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { typography: this.typography }, this.description), h("mds-text", { "aria-hidden": "true", class: "icon-button", typography: this.typography }, h("i", { class: "svg icon", innerHTML: miBaselineKeyboardArrowUp }))), h("div", { "aria-labelledby": "action", class: "contents", id: "contents", role: "region" }, h("slot", null)))); | ||
return (h(Host, null, h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { typography: this.typography }, this.description), h("mds-text", { "aria-hidden": "true", class: "icon-button", typography: this.typography }, h("i", { class: "svg icon", innerHTML: miBaselineKeyboardArrowUp }))), h("div", { class: "contents", id: "contents" }, h("div", { "aria-labelledby": "action", class: "contents-expander", part: "contents", role: "region" }, h("slot", null))))); | ||
} | ||
@@ -33,0 +33,0 @@ get element() { return this; } |
{ | ||
"timestamp": "2023-04-14T10:13:20", | ||
"timestamp": "2023-06-23T10:11:38", | ||
"compiler": { | ||
@@ -133,3 +133,3 @@ "name": "@stencil/core", | ||
"annotation": "prop", | ||
"docs": "Sets the border-color of the element" | ||
"docs": "Sets the border-color of the component" | ||
}, | ||
@@ -139,3 +139,3 @@ { | ||
"annotation": "prop", | ||
"docs": "Sets the text-color of the element" | ||
"docs": "Sets the text-color of the component" | ||
}, | ||
@@ -146,6 +146,26 @@ { | ||
"docs": "Sets the color of the always visible title description" | ||
}, | ||
{ | ||
"name": "--mds-accordion-item-duration", | ||
"annotation": "prop", | ||
"docs": "Sets the transition duration of the close/open animation of the component" | ||
}, | ||
{ | ||
"name": "--mds-accordion-item-padding-selected", | ||
"annotation": "prop", | ||
"docs": "Sets the vertical padding of the component when it's selected" | ||
}, | ||
{ | ||
"name": "--mds-accordion-item-padding-unselected", | ||
"annotation": "prop", | ||
"docs": "Sets the vertical padding of the component when it's unselected" | ||
} | ||
], | ||
"slots": [], | ||
"parts": [], | ||
"parts": [ | ||
{ | ||
"name": "contents", | ||
"docs": "" | ||
} | ||
], | ||
"dependents": [], | ||
@@ -152,0 +172,0 @@ "dependencies": [], |
@@ -1,1 +0,1 @@ | ||
import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-54e481e6.js";var miBaselineKeyboardArrowUp='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg>';var mdsAccordionItemCss="@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.fixed{position:fixed}.absolute{position:absolute}.contents{display:contents}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-accordion-item-border-color:rgb(var(--tone-neutral-08));--mds-accordion-item-color:rgb(var(--tone-neutral-03));--mds-accordion-item-description-color:rgb(var(--tone-neutral-02));position:relative;display:grid;padding-top:1rem;padding-bottom:1rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);border-bottom:solid 2px transparent !important;border-top:solid 2px transparent !important;color:var(--mds-accordion-item-color);fill:var(--mds-accordion-item-color);margin-bottom:-2px}:host([selected]){margin-top:1rem;margin-bottom:1rem;padding-top:2rem;padding-bottom:2rem;border-bottom:solid 2px var(--mds-accordion-item-border-color) !important;border-top:solid 2px var(--mds-accordion-item-border-color) !important}:host(.sibling[selected]){margin-top:-1.125rem;border-top-color:transparent !important}:host([selected]:first-child){margin-top:0px;border-top-color:transparent !important}:host([selected]:last-child){margin-bottom:0px;border-bottom-color:transparent !important}.action{display:grid;cursor:pointer;grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;gap:1rem;border-radius:0.5rem;border-style:none;background-color:transparent;padding:0px;text-align:left;color:var(--mds-accordion-item-description-color);grid-template-columns:1fr auto}.icon-button{display:block;font-weight:400}.contents{display:-ms-flexbox;display:flex;height:0px;-ms-flex-direction:column;flex-direction:column;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94)}:host([selected]) .contents{height:auto;padding-top:1rem;opacity:1}.icon{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);fill:var(--mds-accordion-item-color);-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([selected]) .icon{-webkit-transform:rotate(0deg);transform:rotate(0deg)}";var MdsAccordionItem=function(){function t(t){var o=this;registerInstance(this,t);this.selectedEvent=createEvent(this,"mdsAccordionItemSelect",7);this.unselectedEvent=createEvent(this,"mdsAccordionItemUnselect",7);this.changedEvent=createEvent(this,"mdsAccordionItemChange",7);this.toggle=function(){o.selected=!o.selected;o.changedEvent.emit({id:o.element.id,selected:o.selected});if(o.selected){o.selectedEvent.emit({id:o.element.id,selected:o.selected});return}o.unselectedEvent.emit({id:o.element.id,selected:o.selected})};this.typography="h5";this.selected=undefined;this.description=undefined}t.prototype.render=function(){return h(Host,null,h("button",{"aria-controls":"contents","aria-expanded":this.selected?"true":"false",class:"action focusable",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},h("mds-text",{typography:this.typography},this.description),h("mds-text",{"aria-hidden":"true",class:"icon-button",typography:this.typography},h("i",{class:"svg icon",innerHTML:miBaselineKeyboardArrowUp}))),h("div",{"aria-labelledby":"action",class:"contents",id:"contents",role:"region"},h("slot",null)))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();MdsAccordionItem.style=mdsAccordionItemCss;export{MdsAccordionItem as mds_accordion_item}; | ||
import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-54e481e6.js";var miBaselineKeyboardArrowUp='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg>';var mdsAccordionItemCss="@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.fixed{position:fixed}.absolute{position:absolute}.contents{display:contents}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-accordion-item-border-color:var(--mds-accordion-border-color, rgb(var(--tone-neutral-08)));--mds-accordion-item-border-width:var(--mds-accordion-border-width, 2px);--mds-accordion-item-color:var(--mds-accordion-color, rgb(var(--tone-neutral-03)));--mds-accordion-item-description-color:var(--mds-accordion-description-color, rgb(var(--tone-neutral-02)));--mds-accordion-item-duration:var(--mds-accordion-duration, 300ms);--mds-accordion-item-padding-selected:var(--mds-accordion-padding-selected, 1rem 0 2rem 0);--mds-accordion-item-padding-unselected:var(--mds-accordion-padding-unselected, 1rem 0 1rem 0);position:relative;display:grid;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);border-bottom:solid var(--mds-accordion-item-border-width) transparent;border-top:solid var(--mds-accordion-item-border-width) transparent;color:var(--mds-accordion-item-color);fill:var(--mds-accordion-item-color);padding:var(--mds-accordion-item-padding-unselected);margin-top:calc(-1 * var(--mds-accordion-item-border-width))}:host(:first-child){margin-top:0}:host([selected]){padding:var(--mds-accordion-item-padding-selected);border-bottom:solid var(--mds-accordion-item-border-width) var(--mds-accordion-item-border-color);border-top:solid var(--mds-accordion-item-border-width) var(--mds-accordion-item-border-color)}:host([selected]:first-child){margin-top:0px;border-top-color:transparent}:host([selected]:last-child){margin-bottom:0px;border-bottom-color:transparent}.action{display:grid;cursor:pointer;grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;gap:1rem;border-radius:0.5rem;border-style:none;background-color:transparent;padding:0px;text-align:left;color:var(--mds-accordion-item-description-color);grid-template-columns:1fr auto}.icon-button{display:block;font-weight:400}.contents{display:grid;min-height:0px;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);grid-template-rows:0fr;-webkit-transition-duration:var(--mds-accordion-item-duration);transition-duration:var(--mds-accordion-item-duration);-webkit-transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding, -ms-grid-rows opacity padding}.contents-expander{min-height:0}:host([selected]) .contents{padding-top:1rem;opacity:1;grid-template-rows:1fr}.icon{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);fill:var(--mds-accordion-item-color);-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([selected]) .icon{-webkit-transform:rotate(0deg);transform:rotate(0deg)}";var MdsAccordionItem=function(){function t(t){var o=this;registerInstance(this,t);this.selectedEvent=createEvent(this,"mdsAccordionItemSelect",7);this.unselectedEvent=createEvent(this,"mdsAccordionItemUnselect",7);this.changedEvent=createEvent(this,"mdsAccordionItemChange",7);this.toggle=function(){o.selected=!o.selected;o.changedEvent.emit({id:o.element.id,selected:o.selected});if(o.selected){o.selectedEvent.emit({id:o.element.id,selected:o.selected});return}o.unselectedEvent.emit({id:o.element.id,selected:o.selected})};this.typography="h5";this.selected=undefined;this.description=undefined}t.prototype.render=function(){return h(Host,null,h("button",{"aria-controls":"contents","aria-expanded":this.selected?"true":"false",class:"action focusable",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},h("mds-text",{typography:this.typography},this.description),h("mds-text",{"aria-hidden":"true",class:"icon-button",typography:this.typography},h("i",{class:"svg icon",innerHTML:miBaselineKeyboardArrowUp}))),h("div",{class:"contents",id:"contents"},h("div",{"aria-labelledby":"action",class:"contents-expander",part:"contents",role:"region"},h("slot",null))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();MdsAccordionItem.style=mdsAccordionItemCss;export{MdsAccordionItem as mds_accordion_item}; |
@@ -5,3 +5,3 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-54e481e6.js'; | ||
const mdsAccordionItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.fixed{position:fixed}.absolute{position:absolute}.contents{display:contents}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-accordion-item-border-color:rgb(var(--tone-neutral-08));--mds-accordion-item-color:rgb(var(--tone-neutral-03));--mds-accordion-item-description-color:rgb(var(--tone-neutral-02));position:relative;display:grid;padding-top:1rem;padding-bottom:1rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);border-bottom:solid 2px transparent !important;border-top:solid 2px transparent !important;color:var(--mds-accordion-item-color);fill:var(--mds-accordion-item-color);margin-bottom:-2px}:host([selected]){margin-top:1rem;margin-bottom:1rem;padding-top:2rem;padding-bottom:2rem;border-bottom:solid 2px var(--mds-accordion-item-border-color) !important;border-top:solid 2px var(--mds-accordion-item-border-color) !important}:host(.sibling[selected]){margin-top:-1.125rem;border-top-color:transparent !important}:host([selected]:first-child){margin-top:0px;border-top-color:transparent !important}:host([selected]:last-child){margin-bottom:0px;border-bottom-color:transparent !important}.action{display:grid;cursor:pointer;grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;gap:1rem;border-radius:0.5rem;border-style:none;background-color:transparent;padding:0px;text-align:left;color:var(--mds-accordion-item-description-color);grid-template-columns:1fr auto}.icon-button{display:block;font-weight:400}.contents{display:-ms-flexbox;display:flex;height:0px;-ms-flex-direction:column;flex-direction:column;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94)}:host([selected]) .contents{height:auto;padding-top:1rem;opacity:1}.icon{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);fill:var(--mds-accordion-item-color);-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([selected]) .icon{-webkit-transform:rotate(0deg);transform:rotate(0deg)}"; | ||
const mdsAccordionItemCss = "@tailwind components; .focus-off,.focusable,.focusable-light,.focusable-light-off{-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform}.focus-on,.focusable-light:focus-visible,.focusable:focus-visible{--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}.svg{display:-ms-flexbox;display:flex}.svg svg{aspect-ratio:1 / 1;height:100%;width:100%}.fixed{position:fixed}.absolute{position:absolute}.contents{display:contents}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-accordion-item-border-color:var(--mds-accordion-border-color, rgb(var(--tone-neutral-08)));--mds-accordion-item-border-width:var(--mds-accordion-border-width, 2px);--mds-accordion-item-color:var(--mds-accordion-color, rgb(var(--tone-neutral-03)));--mds-accordion-item-description-color:var(--mds-accordion-description-color, rgb(var(--tone-neutral-02)));--mds-accordion-item-duration:var(--mds-accordion-duration, 300ms);--mds-accordion-item-padding-selected:var(--mds-accordion-padding-selected, 1rem 0 2rem 0);--mds-accordion-item-padding-unselected:var(--mds-accordion-padding-unselected, 1rem 0 1rem 0);position:relative;display:grid;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);border-bottom:solid var(--mds-accordion-item-border-width) transparent;border-top:solid var(--mds-accordion-item-border-width) transparent;color:var(--mds-accordion-item-color);fill:var(--mds-accordion-item-color);padding:var(--mds-accordion-item-padding-unselected);margin-top:calc(-1 * var(--mds-accordion-item-border-width))}:host(:first-child){margin-top:0}:host([selected]){padding:var(--mds-accordion-item-padding-selected);border-bottom:solid var(--mds-accordion-item-border-width) var(--mds-accordion-item-border-color);border-top:solid var(--mds-accordion-item-border-width) var(--mds-accordion-item-border-color)}:host([selected]:first-child){margin-top:0px;border-top-color:transparent}:host([selected]:last-child){margin-bottom:0px;border-bottom-color:transparent}.action{display:grid;cursor:pointer;grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;gap:1rem;border-radius:0.5rem;border-style:none;background-color:transparent;padding:0px;text-align:left;color:var(--mds-accordion-item-description-color);grid-template-columns:1fr auto}.icon-button{display:block;font-weight:400}.contents{display:grid;min-height:0px;gap:1rem;overflow:hidden;padding-top:0px;opacity:0;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);grid-template-rows:0fr;-webkit-transition-duration:var(--mds-accordion-item-duration);transition-duration:var(--mds-accordion-item-duration);-webkit-transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding, -ms-grid-rows opacity padding}.contents-expander{min-height:0}:host([selected]) .contents{padding-top:1rem;opacity:1;grid-template-rows:1fr}.icon{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);fill:var(--mds-accordion-item-color);-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([selected]) .icon{-webkit-transform:rotate(0deg);transform:rotate(0deg)}"; | ||
@@ -28,3 +28,3 @@ const MdsAccordionItem = class { | ||
render() { | ||
return (h(Host, null, h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { typography: this.typography }, this.description), h("mds-text", { "aria-hidden": "true", class: "icon-button", typography: this.typography }, h("i", { class: "svg icon", innerHTML: miBaselineKeyboardArrowUp }))), h("div", { "aria-labelledby": "action", class: "contents", id: "contents", role: "region" }, h("slot", null)))); | ||
return (h(Host, null, h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focusable", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, h("mds-text", { typography: this.typography }, this.description), h("mds-text", { "aria-hidden": "true", class: "icon-button", typography: this.typography }, h("i", { class: "svg icon", innerHTML: miBaselineKeyboardArrowUp }))), h("div", { class: "contents", id: "contents" }, h("div", { "aria-labelledby": "action", class: "contents-expander", part: "contents", role: "region" }, h("slot", null))))); | ||
} | ||
@@ -31,0 +31,0 @@ get element() { return getElement(this); } |
@@ -1,1 +0,1 @@ | ||
import{p as e,b as o}from"./p-b5a1441d.js";export{s as setNonce}from"./p-b5a1441d.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-d2c5ce30",[[1,"mds-accordion-item",{typography:[1],selected:[1540],description:[1]}]]]],e))); | ||
import{p as o,b as e}from"./p-b5a1441d.js";export{s as setNonce}from"./p-b5a1441d.js";(()=>{const s=import.meta.url,e={};return""!==s&&(e.resourcesUrl=new URL(".",s).href),o(e)})().then((o=>e([["p-44bb5701",[[1,"mds-accordion-item",{typography:[1],selected:[1540],description:[1]}]]]],o))); |
@@ -1,1 +0,1 @@ | ||
System.register(["./p-3d1be197.system.js"],(function(e,t){"use strict";var r,n;return{setters:[function(t){r=t.p;n=t.b;e("setNonce",t.s)}],execute:function(){var e=function(){var e=t.meta.url;var n={};if(e!==""){n.resourcesUrl=new URL(".",e).href}return r(n)};e().then((function(e){return n([["p-2354b4a4.system",[[1,"mds-accordion-item",{typography:[1],selected:[1540],description:[1]}]]]],e)}))}}})); | ||
System.register(["./p-3d1be197.system.js"],(function(e,t){"use strict";var r,n;return{setters:[function(t){r=t.p;n=t.b;e("setNonce",t.s)}],execute:function(){var e=function(){var e=t.meta.url;var n={};if(e!==""){n.resourcesUrl=new URL(".",e).href}return r(n)};e().then((function(e){return n([["p-3c77c121.system",[[1,"mds-accordion-item",{typography:[1],selected:[1540],description:[1]}]]]],e)}))}}})); |
{ | ||
"timestamp": "2023-04-14T10:13:20", | ||
"timestamp": "2023-06-23T10:11:38", | ||
"compiler": { | ||
@@ -12,10 +12,11 @@ "name": "node", | ||
"entries": 1, | ||
"bundles": 66, | ||
"bundles": 67, | ||
"outputs": [ | ||
{ | ||
"name": "dist-collection", | ||
"files": 25, | ||
"files": 26, | ||
"generatedFiles": [ | ||
"./dist/collection/common/aria.js", | ||
"./dist/collection/common/keyboard-manager.js", | ||
"./dist/collection/common/unit.js", | ||
"./dist/collection/components/mds-accordion-item/mds-accordion-item.js", | ||
@@ -80,17 +81,17 @@ "./dist/collection/components/mds-accordion-item/meta/event-detail.js", | ||
"./dist/mds-accordion-item/mds-accordion-item.js", | ||
"./dist/mds-accordion-item/p-2354b4a4.system.entry.js", | ||
"./dist/mds-accordion-item/p-3c77c121.system.entry.js", | ||
"./dist/mds-accordion-item/p-3d1be197.system.js", | ||
"./dist/mds-accordion-item/p-44bb5701.entry.js", | ||
"./dist/mds-accordion-item/p-50ea2036.system.js", | ||
"./dist/mds-accordion-item/p-94315af6.system.js", | ||
"./dist/mds-accordion-item/p-b5a1441d.js", | ||
"./dist/mds-accordion-item/p-d2c5ce30.entry.js", | ||
"./www/build/index.esm.js", | ||
"./www/build/mds-accordion-item.esm.js", | ||
"./www/build/mds-accordion-item.js", | ||
"./www/build/p-2354b4a4.system.entry.js", | ||
"./www/build/p-3c77c121.system.entry.js", | ||
"./www/build/p-3d1be197.system.js", | ||
"./www/build/p-44bb5701.entry.js", | ||
"./www/build/p-50ea2036.system.js", | ||
"./www/build/p-94315af6.system.js", | ||
"./www/build/p-b5a1441d.js", | ||
"./www/build/p-d2c5ce30.entry.js" | ||
"./www/build/p-b5a1441d.js" | ||
] | ||
@@ -128,8 +129,8 @@ }, | ||
], | ||
"bundleId": "p-d2c5ce30", | ||
"fileName": "p-d2c5ce30.entry.js", | ||
"bundleId": "p-44bb5701", | ||
"fileName": "p-44bb5701.entry.js", | ||
"imports": [ | ||
"p-b5a1441d.js" | ||
], | ||
"originalByteSize": 7395 | ||
"originalByteSize": 7470 | ||
} | ||
@@ -148,3 +149,3 @@ ], | ||
], | ||
"originalByteSize": 7399 | ||
"originalByteSize": 7474 | ||
} | ||
@@ -163,3 +164,3 @@ ], | ||
], | ||
"originalByteSize": 7399 | ||
"originalByteSize": 7474 | ||
} | ||
@@ -173,8 +174,8 @@ ], | ||
], | ||
"bundleId": "p-2354b4a4.system", | ||
"fileName": "p-2354b4a4.system.entry.js", | ||
"bundleId": "p-3c77c121.system", | ||
"fileName": "p-3c77c121.system.entry.js", | ||
"imports": [ | ||
"p-3d1be197.system.js" | ||
], | ||
"originalByteSize": 7802 | ||
"originalByteSize": 7877 | ||
} | ||
@@ -193,3 +194,3 @@ ], | ||
], | ||
"originalByteSize": 7488 | ||
"originalByteSize": 7569 | ||
} | ||
@@ -532,3 +533,3 @@ ] | ||
"name": "--mds-accordion-item-border-color", | ||
"docs": "Sets the border-color of the element", | ||
"docs": "Sets the border-color of the component", | ||
"annotation": "prop" | ||
@@ -538,3 +539,3 @@ }, | ||
"name": "--mds-accordion-item-color", | ||
"docs": "Sets the text-color of the element", | ||
"docs": "Sets the text-color of the component", | ||
"annotation": "prop" | ||
@@ -546,2 +547,17 @@ }, | ||
"annotation": "prop" | ||
}, | ||
{ | ||
"name": "--mds-accordion-item-duration", | ||
"docs": "Sets the transition duration of the close/open animation of the component", | ||
"annotation": "prop" | ||
}, | ||
{ | ||
"name": "--mds-accordion-item-padding-selected", | ||
"docs": "Sets the vertical padding of the component when it's selected", | ||
"annotation": "prop" | ||
}, | ||
{ | ||
"name": "--mds-accordion-item-padding-unselected", | ||
"docs": "Sets the vertical padding of the component when it's unselected", | ||
"annotation": "prop" | ||
} | ||
@@ -613,3 +629,4 @@ ], | ||
"innerHTML", | ||
"aria-labelledby" | ||
"aria-labelledby", | ||
"part" | ||
], | ||
@@ -623,3 +640,5 @@ "htmlTagNames": [ | ||
], | ||
"htmlParts": [], | ||
"htmlParts": [ | ||
"contents" | ||
], | ||
"isUpdateable": true, | ||
@@ -646,2 +665,3 @@ "potentialCmpRefs": [ | ||
"./src/common/keyboard-manager.ts": [], | ||
"./src/common/unit.ts": [], | ||
"./src/components/mds-accordion-item/mds-accordion-item.tsx": [], | ||
@@ -648,0 +668,0 @@ "./src/components/mds-accordion-item/meta/event-detail.ts": [], |
import { EventEmitter } from '../../stencil-public-runtime'; | ||
import { TypographyTitleType } from '@type/typography'; | ||
import { MdsAccordionItemEventDetail } from './meta/event-detail'; | ||
import { TypographyTitleType } from '@type/typography'; | ||
export declare class MdsAccordionItem { | ||
@@ -5,0 +5,0 @@ private element; |
declare const buttonVariantDictionary: string[]; | ||
declare const buttonToneVariantDictionary: string[]; | ||
declare const buttonTargetDictionary: string[]; | ||
declare const buttonSizeDictionary: string[]; | ||
declare const buttonIconPositionDictionary: string[]; | ||
export { buttonSizeDictionary, buttonToneVariantDictionary, buttonVariantDictionary, buttonIconPositionDictionary, }; | ||
export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonVariantDictionary, }; |
@@ -7,4 +7,5 @@ declare const themeVariantDictionary: string[]; | ||
declare const toneVariantDictionary: string[]; | ||
declare const toneActionVariantDictionary: string[]; | ||
declare const toneSimpleVariantDictionary: string[]; | ||
declare const toneMinimalVariantDictionary: string[]; | ||
export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, }; | ||
export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, }; |
export type ButtonType = 'a' | 'button' | 'reset' | 'submit'; | ||
export type ButtonTargetType = 'self' | 'blank'; | ||
export type ButtonSizeType = 'sm' | 'md' | 'lg' | 'xl'; | ||
export type ButtonIconPositionType = 'left' | 'right'; | ||
export type ButtonVariantType = 'primary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning'; |
@@ -8,4 +8,5 @@ export type ThemeStatusVariantType = 'error' | 'info' | 'success' | 'warning'; | ||
export type StateVariantType = 'disabled' | 'focused' | 'readonly'; | ||
export type ToneActionVariantType = 'primary' | 'secondary' | 'tertiary' | 'strong' | 'weak' | 'ghost' | 'quiet'; | ||
export type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet'; | ||
export type ToneSimpleVariantType = 'strong' | 'weak' | 'quiet'; | ||
export type ToneMinimalVariantType = 'strong' | 'weak'; |
{ | ||
"timestamp": "2023-04-14T09:57:39", | ||
"timestamp": "2023-06-23T10:05:29", | ||
"compiler": { | ||
@@ -134,3 +134,3 @@ "name": "@stencil/core", | ||
"annotation": "prop", | ||
"docs": "Sets the border-color of the element" | ||
"docs": "Sets the border-color of the component" | ||
}, | ||
@@ -140,3 +140,3 @@ { | ||
"annotation": "prop", | ||
"docs": "Sets the text-color of the element" | ||
"docs": "Sets the text-color of the component" | ||
}, | ||
@@ -147,6 +147,26 @@ { | ||
"docs": "Sets the color of the always visible title description" | ||
}, | ||
{ | ||
"name": "--mds-accordion-item-duration", | ||
"annotation": "prop", | ||
"docs": "Sets the transition duration of the close/open animation of the component" | ||
}, | ||
{ | ||
"name": "--mds-accordion-item-padding-selected", | ||
"annotation": "prop", | ||
"docs": "Sets the vertical padding of the component when it's selected" | ||
}, | ||
{ | ||
"name": "--mds-accordion-item-padding-unselected", | ||
"annotation": "prop", | ||
"docs": "Sets the vertical padding of the component when it's unselected" | ||
} | ||
], | ||
"slots": [], | ||
"parts": [], | ||
"parts": [ | ||
{ | ||
"name": "contents", | ||
"docs": "" | ||
} | ||
], | ||
"dependents": [], | ||
@@ -153,0 +173,0 @@ "dependencies": [ |
{ | ||
"name": "@maggioli-design-system/mds-accordion-item", | ||
"version": "4.2.0", | ||
"version": "4.3.0", | ||
"description": "mds-accordion-item is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.", | ||
@@ -28,3 +28,3 @@ "main": "dist/index.cjs.js", | ||
"@maggioli-design-system/mds-text": "^3.3.0", | ||
"@maggioli-design-system/styles": "^11.4.0", | ||
"@maggioli-design-system/styles": "^11.5.2", | ||
"@stencil/core": "^2.22.3" | ||
@@ -31,0 +31,0 @@ }, |
@@ -26,9 +26,19 @@ # mds-accordion-item | ||
## Shadow Parts | ||
| Part | Description | | ||
| ------------ | ----------- | | ||
| `"contents"` | | | ||
## CSS Custom Properties | ||
| Name | Description | | ||
| ---------------------------------------- | ------------------------------------------------------ | | ||
| `--mds-accordion-item-border-color` | Sets the border-color of the element | | ||
| `--mds-accordion-item-color` | Sets the text-color of the element | | ||
| `--mds-accordion-item-description-color` | Sets the color of the always visible title description | | ||
| Name | Description | | ||
| ----------------------------------------- | ------------------------------------------------------------------------- | | ||
| `--mds-accordion-item-border-color` | Sets the border-color of the component | | ||
| `--mds-accordion-item-color` | Sets the text-color of the component | | ||
| `--mds-accordion-item-description-color` | Sets the color of the always visible title description | | ||
| `--mds-accordion-item-duration` | Sets the transition duration of the close/open animation of the component | | ||
| `--mds-accordion-item-padding-selected` | Sets the vertical padding of the component when it's selected | | ||
| `--mds-accordion-item-padding-unselected` | Sets the vertical padding of the component when it's unselected | | ||
@@ -35,0 +45,0 @@ |
@@ -26,9 +26,19 @@ # mds-accordion-item | ||
## Shadow Parts | ||
| Part | Description | | ||
| ------------ | ----------- | | ||
| `"contents"` | | | ||
## CSS Custom Properties | ||
| Name | Description | | ||
| ---------------------------------------- | ------------------------------------------------------ | | ||
| `--mds-accordion-item-border-color` | Sets the border-color of the element | | ||
| `--mds-accordion-item-color` | Sets the text-color of the element | | ||
| `--mds-accordion-item-description-color` | Sets the color of the always visible title description | | ||
| Name | Description | | ||
| ----------------------------------------- | ------------------------------------------------------------------------- | | ||
| `--mds-accordion-item-border-color` | Sets the border-color of the component | | ||
| `--mds-accordion-item-color` | Sets the text-color of the component | | ||
| `--mds-accordion-item-description-color` | Sets the color of the always visible title description | | ||
| `--mds-accordion-item-duration` | Sets the transition duration of the close/open animation of the component | | ||
| `--mds-accordion-item-padding-selected` | Sets the vertical padding of the component when it's selected | | ||
| `--mds-accordion-item-padding-unselected` | Sets the vertical padding of the component when it's unselected | | ||
@@ -35,0 +45,0 @@ |
@@ -18,2 +18,7 @@ const buttonVariantDictionary = [ | ||
const buttonTargetDictionary = [ | ||
'blank', | ||
'self', | ||
] | ||
const buttonSizeDictionary = [ | ||
@@ -32,6 +37,7 @@ 'sm', | ||
export { | ||
buttonIconPositionDictionary, | ||
buttonSizeDictionary, | ||
buttonTargetDictionary, | ||
buttonToneVariantDictionary, | ||
buttonVariantDictionary, | ||
buttonIconPositionDictionary, | ||
} |
@@ -62,2 +62,11 @@ const themeVariantDictionary = [ | ||
const toneActionVariantDictionary = [ | ||
'primary', | ||
'secondary', | ||
'tertiary', | ||
'strong', | ||
'weak', | ||
'quiet', | ||
] | ||
const toneSimpleVariantDictionary = [ | ||
@@ -80,2 +89,3 @@ 'strong', | ||
themeVariantDictionary, | ||
toneActionVariantDictionary, | ||
toneMinimalVariantDictionary, | ||
@@ -82,0 +92,0 @@ toneSimpleVariantDictionary, |
@@ -31,2 +31,3 @@ [ | ||
"mgg/area-weather", | ||
"mgg/bill", | ||
"mgg/box-multiple", | ||
@@ -37,2 +38,3 @@ "mgg/breadcrumb", | ||
"mgg/calendar-schedule", | ||
"mgg/cancelled-sheet", | ||
"mgg/car-license", | ||
@@ -44,3 +46,5 @@ "mgg/card-stamping", | ||
"mgg/city-bin", | ||
"mgg/classic-permission", | ||
"mgg/copy-paste", | ||
"mgg/d-instrumental-buildings", | ||
"mgg/data-analytics-alt", | ||
@@ -56,2 +60,3 @@ "mgg/data-analytics-search", | ||
"mgg/dataset", | ||
"mgg/delivered-to-the-recipient", | ||
"mgg/document-magic", | ||
@@ -85,5 +90,9 @@ "mgg/document-rename", | ||
"mgg/fit-vertical", | ||
"mgg/forwarded-with-a-single-sending", | ||
"mgg/fullscreen-on-alt", | ||
"mgg/google-check-small", | ||
"mgg/google-place-item", | ||
"mgg/group-assigned-automatically-system", | ||
"mgg/group-ceased", | ||
"mgg/group-inherited", | ||
"mgg/heart", | ||
@@ -99,2 +108,3 @@ "mgg/heart-outline", | ||
"mgg/input-calendar-time", | ||
"mgg/instrumental-buildings", | ||
"mgg/isbn", | ||
@@ -121,2 +131,4 @@ "mgg/judge-hammer", | ||
"mgg/national-document-off", | ||
"mgg/not-instrumental-d-buildings", | ||
"mgg/not-sent-yet", | ||
"mgg/order-return-down-left-to-right", | ||
@@ -140,4 +152,6 @@ "mgg/order-return-down-left-to-up", | ||
"mgg/other-properties-off", | ||
"mgg/other-residential-buildings", | ||
"mgg/partial-wall", | ||
"mgg/payment-settings", | ||
"mgg/pec-sent-to-the-not-pec-recipient", | ||
"mgg/places-green", | ||
@@ -156,2 +170,3 @@ "mgg/places-green-doc", | ||
"mgg/residency-permit", | ||
"mgg/roles-permission", | ||
"mgg/rubber-stamp", | ||
@@ -161,2 +176,3 @@ "mgg/rurale", | ||
"mgg/send-progress", | ||
"mgg/sending-error", | ||
"mgg/settings-attachment", | ||
@@ -171,2 +187,3 @@ "mgg/sign-shop", | ||
"mgg/stuck-codes", | ||
"mgg/subtractive-permission", | ||
"mgg/tea-light", | ||
@@ -188,2 +205,3 @@ "mgg/terminal", | ||
"mgg/trending-down", | ||
"mgg/tribute", | ||
"mgg/tributes", | ||
@@ -195,2 +213,3 @@ "mgg/urban-city", | ||
"mgg/user-location-off", | ||
"mgg/user-signed-out", | ||
"mgg/view-chart-gantt", | ||
@@ -197,0 +216,0 @@ "mgg/view-side-by-side", |
@@ -20,2 +20,3 @@ [ | ||
"mgg/area-weather", | ||
"mgg/bill", | ||
"mgg/box-multiple", | ||
@@ -26,2 +27,3 @@ "mgg/breadcrumb", | ||
"mgg/calendar-schedule", | ||
"mgg/cancelled-sheet", | ||
"mgg/car-license", | ||
@@ -33,3 +35,5 @@ "mgg/card-stamping", | ||
"mgg/city-bin", | ||
"mgg/classic-permission", | ||
"mgg/copy-paste", | ||
"mgg/d-instrumental-buildings", | ||
"mgg/data-analytics-alt", | ||
@@ -45,2 +49,3 @@ "mgg/data-analytics-search", | ||
"mgg/dataset", | ||
"mgg/delivered-to-the-recipient", | ||
"mgg/document-magic", | ||
@@ -74,5 +79,9 @@ "mgg/document-rename", | ||
"mgg/fit-vertical", | ||
"mgg/forwarded-with-a-single-sending", | ||
"mgg/fullscreen-on-alt", | ||
"mgg/google-check-small", | ||
"mgg/google-place-item", | ||
"mgg/group-assigned-automatically-system", | ||
"mgg/group-ceased", | ||
"mgg/group-inherited", | ||
"mgg/heart-outline", | ||
@@ -88,2 +97,3 @@ "mgg/heart", | ||
"mgg/input-calendar-time", | ||
"mgg/instrumental-buildings", | ||
"mgg/isbn", | ||
@@ -110,2 +120,4 @@ "mgg/judge-hammer", | ||
"mgg/national-document", | ||
"mgg/not-instrumental-d-buildings", | ||
"mgg/not-sent-yet", | ||
"mgg/order-return-down-left-to-right", | ||
@@ -129,4 +141,6 @@ "mgg/order-return-down-left-to-up", | ||
"mgg/other-properties", | ||
"mgg/other-residential-buildings", | ||
"mgg/partial-wall", | ||
"mgg/payment-settings", | ||
"mgg/pec-sent-to-the-not-pec-recipient", | ||
"mgg/places-green-doc", | ||
@@ -145,2 +159,3 @@ "mgg/places-green-history", | ||
"mgg/residency-permit", | ||
"mgg/roles-permission", | ||
"mgg/rubber-stamp", | ||
@@ -150,2 +165,3 @@ "mgg/rurale", | ||
"mgg/send-progress", | ||
"mgg/sending-error", | ||
"mgg/settings-attachment", | ||
@@ -160,2 +176,3 @@ "mgg/sign-shop", | ||
"mgg/stuck-codes", | ||
"mgg/subtractive-permission", | ||
"mgg/tea-light", | ||
@@ -177,2 +194,3 @@ "mgg/terminal", | ||
"mgg/trending-down", | ||
"mgg/tribute", | ||
"mgg/tributes", | ||
@@ -184,2 +202,3 @@ "mgg/urban-city", | ||
"mgg/user-location", | ||
"mgg/user-signed-out", | ||
"mgg/view-chart-gantt", | ||
@@ -186,0 +205,0 @@ "mgg/view-side-by-side", |
@@ -7,2 +7,6 @@ export type ButtonType = | ||
export type ButtonTargetType = | ||
|'self' | ||
|'blank' | ||
export type ButtonSizeType = | ||
@@ -9,0 +13,0 @@ | 'sm' |
@@ -60,2 +60,11 @@ export type ThemeStatusVariantType = | ||
export type ToneActionVariantType = | ||
| 'primary' // background strong | ||
| 'secondary' // background weak | ||
| 'tertiary' // no background, no border | ||
| 'strong' // background strong | ||
| 'weak' // background weak | ||
| 'ghost' // bordered | ||
| 'quiet' // no background, no border | ||
export type ToneVariantType = | ||
@@ -62,0 +71,0 @@ | 'strong' // background strong |
@@ -1,1 +0,1 @@ | ||
import{p as e,b as o}from"./p-b5a1441d.js";export{s as setNonce}from"./p-b5a1441d.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-d2c5ce30",[[1,"mds-accordion-item",{typography:[1],selected:[1540],description:[1]}]]]],e))); | ||
import{p as o,b as e}from"./p-b5a1441d.js";export{s as setNonce}from"./p-b5a1441d.js";(()=>{const s=import.meta.url,e={};return""!==s&&(e.resourcesUrl=new URL(".",s).href),o(e)})().then((o=>e([["p-44bb5701",[[1,"mds-accordion-item",{typography:[1],selected:[1540],description:[1]}]]]],o))); |
@@ -1,1 +0,1 @@ | ||
System.register(["./p-3d1be197.system.js"],(function(e,t){"use strict";var r,n;return{setters:[function(t){r=t.p;n=t.b;e("setNonce",t.s)}],execute:function(){var e=function(){var e=t.meta.url;var n={};if(e!==""){n.resourcesUrl=new URL(".",e).href}return r(n)};e().then((function(e){return n([["p-2354b4a4.system",[[1,"mds-accordion-item",{typography:[1],selected:[1540],description:[1]}]]]],e)}))}}})); | ||
System.register(["./p-3d1be197.system.js"],(function(e,t){"use strict";var r,n;return{setters:[function(t){r=t.p;n=t.b;e("setNonce",t.s)}],execute:function(){var e=function(){var e=t.meta.url;var n={};if(e!==""){n.resourcesUrl=new URL(".",e).href}return r(n)};e().then((function(e){return n([["p-3c77c121.system",[[1,"mds-accordion-item",{typography:[1],selected:[1540],description:[1]}]]]],e)}))}}})); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
795475
148
10361
61