@brandsync/wc 1.5.0 → 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/brandsync-wc/brandsync-wc.esm.js +1 -1
- package/dist/brandsync-wc/p-e92f09b3.entry.js +1 -0
- package/dist/cjs/bs-accordion.cjs.entry.js +2 -2
- package/dist/collection/components/bs-accordion/bs-accordion.css +56 -24
- package/dist/collection/components/bs-accordion/bs-accordion.js +1 -1
- package/dist/collection/components/bs-accordion/bs-accordion.stories.js +17 -11
- package/dist/components/bs-accordion.js +1 -1
- package/dist/esm/bs-accordion.entry.js +2 -2
- package/package.json +1 -1
- package/dist/brandsync-wc/p-2e8bf5da.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,g as a,b as o}from"./p-CcPfH1dJ.js";export{s as setNonce}from"./p-CcPfH1dJ.js";(()=>{const a=import.meta.url,s={};return""!==a&&(s.resourcesUrl=new URL(".",a).href),e(s)})().then((async e=>(await a(),o([["p-2c2057f5",[[785,"bs-input",{value:[1025],type:[1],label:[1],placeholder:[1],description:[1],error:[1],disabled:[4],required:[4],step:[2],min:[2],max:[2],options:[16],rows:[2],chips:[16],titleOptions:[16],initialsTitle:[1,"initials-title"],countryOptions:[16],country:[1],length:[2],open:[1540],hasIcon:[32],hasEndIcon:[32],passwordVisible:[32],chipDraft:[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["p-3f6980bf",[[769,"bs-snackbar",{variant:[1],loading:[4],actionLabel:[1,"action-label"]}]]],["p-5ea24f7e",[[513,"bs-attachment",{type:[1],fileName:[1,"file-name"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],loading:[4],removable:[4]}]]],["p-d1dfd37d",[[513,"bs-breadcrumb-overflow",{items:[16],overflowLabel:[1,"overflow-label"],size:[513],open:[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["p-fd1acc0f",[[769,"bs-chatbot-header",{heading:[1],expanded:[1540]}]]],["p-da6fa359",[[769,"bs-dialog",{open:[1540],heading:[1],size:[1],centered:[516],hasFooter:[32],hasImage:[32],hasIcon:[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]],["p-a34c7553",[[769,"bs-navigation-drawer",{heading:[1],collapsible:[4],collapsed:[1540],logoBackground:[1,"logo-background"],showLogo:[4,"show-logo"]},null,{collapsed:[{onCollapsedChange:0}]}]]],["p-899d24f8",[[769,"bs-navigation-header",{alignment:[1],ariaLabel:[1,"aria-label"],skipToContentHref:[1,"skip-to-content-href"],skipToContentLabel:[1,"skip-to-content-label"],logoBackground:[1,"logo-background"]}]]],["p-
|
|
1
|
+
import{p as e,g as a,b as o}from"./p-CcPfH1dJ.js";export{s as setNonce}from"./p-CcPfH1dJ.js";(()=>{const a=import.meta.url,s={};return""!==a&&(s.resourcesUrl=new URL(".",a).href),e(s)})().then((async e=>(await a(),o([["p-2c2057f5",[[785,"bs-input",{value:[1025],type:[1],label:[1],placeholder:[1],description:[1],error:[1],disabled:[4],required:[4],step:[2],min:[2],max:[2],options:[16],rows:[2],chips:[16],titleOptions:[16],initialsTitle:[1,"initials-title"],countryOptions:[16],country:[1],length:[2],open:[1540],hasIcon:[32],hasEndIcon:[32],passwordVisible:[32],chipDraft:[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["p-3f6980bf",[[769,"bs-snackbar",{variant:[1],loading:[4],actionLabel:[1,"action-label"]}]]],["p-5ea24f7e",[[513,"bs-attachment",{type:[1],fileName:[1,"file-name"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],loading:[4],removable:[4]}]]],["p-d1dfd37d",[[513,"bs-breadcrumb-overflow",{items:[16],overflowLabel:[1,"overflow-label"],size:[513],open:[32]},[[0,"keydown","onHostKeydown"],[0,"focusout","onHostFocusOut"]]]]],["p-fd1acc0f",[[769,"bs-chatbot-header",{heading:[1],expanded:[1540]}]]],["p-da6fa359",[[769,"bs-dialog",{open:[1540],heading:[1],size:[1],centered:[516],hasFooter:[32],hasImage:[32],hasIcon:[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]],["p-a34c7553",[[769,"bs-navigation-drawer",{heading:[1],collapsible:[4],collapsed:[1540],logoBackground:[1,"logo-background"],showLogo:[4,"show-logo"]},null,{collapsed:[{onCollapsedChange:0}]}]]],["p-899d24f8",[[769,"bs-navigation-header",{alignment:[1],ariaLabel:[1,"aria-label"],skipToContentHref:[1,"skip-to-content-href"],skipToContentLabel:[1,"skip-to-content-label"],logoBackground:[1,"logo-background"]}]]],["p-e92f09b3",[[769,"bs-accordion",{expanded:[516],size:[1],disabled:[4],showIcon:[4,"show-icon"],showPreview:[4,"show-preview"]}]]],["p-6fd1fb04",[[257,"bs-ai-disclaimer"]]],["p-a55a3d87",[[513,"bs-ai-greeting",{assistantName:[1,"assistant-name"],productName:[1,"product-name"]}]]],["p-cd90ed34",[[513,"bs-ai-thinking",{label:[1]}]]],["p-76a37a98",[[769,"bs-attachment-list",{ariaLabel:[1,"aria-label"],canScrollRight:[32]}]]],["p-ba650ca9",[[513,"bs-avatar",{type:[1],size:[1],initials:[1],src:[1],alt:[1],ariaLabel:[1,"aria-label"],disabled:[516]}]]],["p-9d5cf289",[[769,"bs-badge",{variant:[1]}]]],["p-58969b2b",[[769,"bs-breadcrumb",{href:[1],current:[516],size:[513]}]]],["p-27741046",[[769,"bs-breadcrumbs",{label:[1],size:[1]},null,{size:[{onSizeChange:0}]}]]],["p-d69e5034",[[513,"bs-button-skeleton",{size:[1]}]]],["p-6b62bf53",[[769,"bs-card",{surface:[1],hasImage:[32]}]]],["p-b4211012",[[513,"bs-chatbot-feedback",{rating:[1538],submitted:[1540],comment:[1025],heading:[1],subtitle:[1]}]]],["p-e9a89ea0",[[769,"bs-chatbot-response-action",{sourcesCount:[2,"sources-count"],menuOpen:[1540,"menu-open"]},[[4,"click","onDocumentClick"],[4,"keydown","onKeydown"]]]]],["p-f4cb1337",[[769,"bs-chatbot-sources-drawer",{heading:[1],count:[2],slottedCount:[32]}]]],["p-1bfc80c3",[[769,"bs-chatbot-suggestion-button",{disabled:[4]}]]],["p-1d094352",[[785,"bs-checkbox",{size:[1],checked:[1540],indeterminate:[1540],disabled:[4],error:[4],ariaLabel:[1,"aria-label"]},null,{indeterminate:[{onIndeterminateChange:0}]}]]],["p-69c76966",[[513,"bs-checkbox-skeleton",{size:[1]}]]],["p-5f233b4e",[[785,"bs-chip-filter",{size:[1],selected:[516],dropdown:[4],disabled:[4],ariaLabel:[1,"aria-label"],hasIcon:[32]}]]],["p-dadbb3f1",[[769,"bs-chip-informative",{color:[1],size:[1],disabled:[516],hasIcon:[32]}]]],["p-83bda5f1",[[785,"bs-chip-input",{size:[1],selected:[1540],disabled:[516],hasIcon:[32],labelText:[32]}]]],["p-ac2ccc4b",[[785,"bs-composer",{variant:[1],placeholder:[1],value:[1025],state:[513],ariaLabel:[1,"aria-label"],hasAttachments:[32]}]]],["p-b332fe01",[[769,"bs-composer-status-banner",{type:[1],message:[1],showIcon:[4,"show-icon"],showButton:[4,"show-button"],actionLabel:[1,"action-label"],allowClose:[4,"allow-close"]}]]],["p-3e4a9f38",[[513,"bs-data-table",{columns:[16],rows:[16],sortColumn:[1,"sort-column"],sortDirection:[1,"sort-direction"],selectable:[4],cellRenderer:[16],selectedIds:[32],clearSelection:[64]}]]],["p-943fc6b9",[[769,"bs-inline-tab",{selected:[516],disabled:[4],ariaLabel:[1,"aria-label"],hasIcon:[32],hasLabel:[32]}]]],["p-dbd49107",[[769,"bs-navigation-drawer-item",{selected:[516],expandable:[4],expanded:[1540],nested:[4],ariaLabel:[1,"aria-label"],collapsed:[516],hasIcon:[32]}]]],["p-95e0fb92",[[513,"bs-pagination",{totalPages:[2,"total-pages"],currentPage:[1538,"current-page"],siblingCount:[2,"sibling-count"],previousLabel:[1,"previous-label"],nextLabel:[1,"next-label"]}]]],["p-906b4faa",[[513,"bs-progress",{type:[1],size:[1],strokeWidth:[2,"stroke-width"],value:[2],showLabel:[4,"show-label"]}]]],["p-4df71e00",[[769,"bs-progress-linear",{type:[1],size:[1],value:[2],showLabel:[4,"show-label"],hasLabelContent:[32]}]]],["p-46957b76",[[785,"bs-radio",{name:[1],value:[1],checked:[1540],disabled:[4]}]]],["p-35850bfe",[[529,"bs-slider",{type:[1],showLabel:[4,"show-label"],label:[1],min:[2],max:[2],step:[2],value:[1026],valueStart:[1026,"value-start"],valueEnd:[1026,"value-end"],segments:[2],disabled:[4],ariaLabel:[1,"aria-label"]}]]],["p-dc974a34",[[769,"bs-source-link",{fileName:[1,"file-name"],sourceName:[1,"source-name"],version:[1],href:[1],target:[1]}]]],["p-692fd5f0",[[769,"bs-stepper",{currentStep:[2,"current-step"],direction:[513],showDescription:[4,"show-description"]},null,{currentStep:[{onPropChange:0}],direction:[{onPropChange:0}],showDescription:[{onPropChange:0}]}]]],["p-8f90e906",[[513,"bs-stepper-step",{name:[1],description:[1],error:[4],disabled:[4],computedState:[1,"computed-state"],direction:[1],showDescription:[4,"show-description"]}]]],["p-a77a5438",[[785,"bs-switch",{size:[1],checked:[1540],disabled:[4],ariaLabel:[1,"aria-label"]}]]],["p-6acdf2e1",[[769,"bs-tab",{selected:[516],disabled:[4],iconPosition:[1,"icon-position"],ariaLabel:[1,"aria-label"],hasIcon:[32],hasLabel:[32],hasBadge:[32]}]]],["p-a64b64f8",[[769,"bs-tabs",{type:[1],orientation:[1]},[[0,"bsSelect","onTabSelect"]]]]],["p-f0a6ff05",[[769,"bs-toast",{state:[1]}]]],["p-eb1c98a5",[[785,"bs-button",{variant:[1],size:[1],disabled:[4],type:[1],ariaLabel:[1,"aria-label"],hasIcon:[32],hasEndIcon:[32],hasLabel:[32]}]]],["p-1b16b6e4",[[769,"bs-menu-item",{disabled:[4],hasIcon:[32]}]]],["p-a96ec9a1",[[769,"bs-tooltip",{placement:[1]}]]],["p-3145cc00",[[513,"bs-logo",{variant:[1],background:[1],src:[1],alt:[1]}]]],["p-c91eb3eb",[[257,"bs-menu"]]],["p-42f428b0",[[785,"bs-icon-button",{variant:[1],size:[1],disabled:[4],type:[1],ariaLabel:[1,"aria-label"]}]]]],e))));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as o,c as a,h as i}from"./p-CcPfH1dJ.js";const c=class{constructor(i){o(this,i),this.bsToggle=a(this,"bsToggle")}expanded=!1;size="medium";disabled=!1;showIcon=!0;showPreview=!0;bsToggle;onActivate=()=>{this.disabled||this.bsToggle.emit(!this.expanded)};render(){return i("div",{key:"2774538f3bc8d52e5a295edafbdad5e2a12dddda",part:"container",class:`bs-accordion bs-accordion--${this.size} ${this.disabled?"bs-accordion--disabled":""}`},i("button",{key:"7e1942dca9082ac653dd7e3d55d9b919790bcd5b",type:"button",part:"header",class:`bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon?"":"bs-accordion__header--no-icon"}`,disabled:this.disabled,"aria-expanded":String(this.expanded),onClick:this.onActivate},this.showIcon&&i("span",{key:"abd274cb295ae34e9220846a1e8466623f65663a",part:"icon",class:`bs-accordion__icon bs-accordion__icon--${this.size}`,"aria-hidden":"true"},i("slot",{key:"d9c4c429852c77f4a10c05eb247a9d3d35559ef6",name:"icon"},i(e,{key:"2fb492c43754a517e4e98b684f811be21777e849"}))),i("span",{key:"a02484f1a47148493fbc193bc4b9daa8e4c634e7",part:"label",class:"bs-accordion__label "+(this.showIcon?"":"bs-accordion__label--no-icon")},i("slot",{key:"8241ccee7233e85c2d69c225c07e67b982674ef7",name:"label"})),i("span",{key:"6e36ee8dbd22ca924f9d8ea8b5c3017c5478f058",part:"caret",class:`bs-accordion__caret bs-accordion__caret--${this.size}`,"aria-hidden":"true"},i(this.expanded?n:d,null))),(this.expanded||this.showPreview)&&i("div",{key:"1e3ad6fe654c633a4094ea9014ef79d82feae2db",part:"content",class:`bs-accordion__content ${this.showIcon?"":"bs-accordion__content--no-icon"} ${this.expanded?"bs-accordion__content--expanded":"bs-accordion__content--collapsed"}`},i("slot",{key:"6a60fd12ed4ec7e3b4ab0e56414e0a90c4f5d889"})))}},e=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},i("path",{d:"M12 5V19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}),i("path",{d:"M5 12H19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),d=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},i("path",{d:"M6 9.75L12 15.75L18 9.75",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),n=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},i("path",{d:"M6 14.25L12 8.25L18 14.25",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));c.style=":host{display:block;--bs-accordion-radius:var(--bs-border-radius-100);--bs-accordion-header-padding-y-medium:var(--bs-spacing-150);--bs-accordion-header-padding-y-large:var(--bs-spacing-250);--bs-accordion-header-padding-x:var(--bs-spacing-200);--bs-accordion-content-padding-bottom:var(--bs-spacing-150);--bs-accordion-content-padding-right:var(--bs-spacing-200);--bs-accordion-content-padding-left:var(--bs-spacing-800);--bs-accordion-content-padding-left-no-icon:var(--bs-spacing-200);--bs-accordion-icon-width-medium:var(--bs-spacing-800);--bs-accordion-icon-height-medium:48px;--bs-accordion-icon-size-large:var(--bs-spacing-800);--bs-accordion-font-size:var(--bs-font-size-md);--bs-accordion-line-height:var(--bs-line-height-body-md);--bs-accordion-font-weight:var(--bs-font-weight-semibold);--bs-accordion-text-default:var(--bs-text-default);--bs-accordion-bg-hover:var(--bs-surface-hover);--bs-accordion-bg-disabled:var(--bs-surface-action-disabled);--bs-accordion-text-disabled:var(--bs-text-on-disabled);--bs-accordion-focus-ring:var(--bs-border-neutral-focus)}.bs-accordion{display:block;border-radius:var(--bs-accordion-radius);overflow:hidden;font-family:inherit}.bs-accordion:has(.bs-accordion__header:hover),.bs-accordion:has(.bs-accordion__header:active){background:var(--bs-accordion-bg-hover)}.bs-accordion:has(.bs-accordion__header:focus-visible){background:var(--bs-accordion-bg-hover);outline:2px solid var(--bs-accordion-focus-ring);outline-offset:2px;border-radius:calc(var(--bs-accordion-radius) + 2px)}.bs-accordion__header{display:flex;align-items:center;width:100%;border:none;background:transparent;color:var(--bs-accordion-text-default);padding:0;cursor:pointer;font-family:inherit;text-align:left}.bs-accordion__header:focus-visible{outline:none}.bs-accordion__header--medium{padding-top:var(--bs-accordion-header-padding-y-medium);padding-bottom:var(--bs-accordion-header-padding-y-medium)}.bs-accordion__header--large{padding-top:var(--bs-accordion-header-padding-y-large);padding-bottom:var(--bs-accordion-header-padding-y-large)}.bs-accordion__header:disabled{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled);cursor:default}.bs-accordion__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__icon svg{width:24px;height:24px}.bs-accordion__icon--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__icon--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__label{flex:1 1 auto;min-width:0;font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px);font-weight:var(--bs-accordion-font-weight)}.bs-accordion__label--no-icon{padding-left:var(--bs-accordion-header-padding-x)}.bs-accordion__caret{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__caret svg{width:24px;height:24px}.bs-accordion__caret--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__caret--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__content{padding-top:0;padding-bottom:var(--bs-accordion-content-padding-bottom);padding-right:var(--bs-accordion-content-padding-right);padding-left:var(--bs-accordion-content-padding-left);color:var(--bs-accordion-text-default);font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px)}.bs-accordion__content--no-icon{padding-left:var(--bs-accordion-content-padding-left-no-icon)}.bs-accordion__content--collapsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bs-accordion--disabled .bs-accordion__content{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled)}";export{c as bs_accordion}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-Bj1mNOtg.js');
|
|
4
4
|
|
|
5
|
-
const bsAccordionCss = () => `:host{display:block;--bs-accordion-radius:var(--bs-border-radius-100);--bs-accordion-header-padding-y-medium:var(--bs-spacing-150);--bs-accordion-header-padding-y-large:var(--bs-spacing-250);--bs-accordion-header-padding-x:var(--bs-spacing-200);--bs-accordion-content-padding-bottom:var(--bs-spacing-150);--bs-accordion-content-padding-right:var(--bs-spacing-200);--bs-accordion-content-padding-left:var(--bs-spacing-800);--bs-accordion-content-padding-left-no-icon:var(--bs-spacing-200);--bs-accordion-icon-width-medium:var(--bs-spacing-800);--bs-accordion-icon-height-medium:48px;--bs-accordion-icon-size-large:var(--bs-spacing-800);--bs-accordion-font-size:var(--bs-font-size-md);--bs-accordion-line-height:var(--bs-line-height-body-md);--bs-accordion-font-weight:var(--bs-font-weight-semibold);--bs-accordion-text-default:var(--bs-text-default);--bs-accordion-bg-hover:var(--bs-surface-hover);--bs-accordion-bg-disabled:var(--bs-surface-action-disabled);--bs-accordion-text-disabled:var(--bs-text-on-disabled);--bs-accordion-focus-ring:var(--bs-border-neutral-focus)}.bs-accordion{display:block;border-radius:var(--bs-accordion-radius);overflow:hidden;font-family:inherit}.bs-accordion__header{display:flex;align-items:center;width:100%;border:none;background:transparent;color:var(--bs-accordion-text-default);padding:0
|
|
5
|
+
const bsAccordionCss = () => `:host{display:block;--bs-accordion-radius:var(--bs-border-radius-100);--bs-accordion-header-padding-y-medium:var(--bs-spacing-150);--bs-accordion-header-padding-y-large:var(--bs-spacing-250);--bs-accordion-header-padding-x:var(--bs-spacing-200);--bs-accordion-content-padding-bottom:var(--bs-spacing-150);--bs-accordion-content-padding-right:var(--bs-spacing-200);--bs-accordion-content-padding-left:var(--bs-spacing-800);--bs-accordion-content-padding-left-no-icon:var(--bs-spacing-200);--bs-accordion-icon-width-medium:var(--bs-spacing-800);--bs-accordion-icon-height-medium:48px;--bs-accordion-icon-size-large:var(--bs-spacing-800);--bs-accordion-font-size:var(--bs-font-size-md);--bs-accordion-line-height:var(--bs-line-height-body-md);--bs-accordion-font-weight:var(--bs-font-weight-semibold);--bs-accordion-text-default:var(--bs-text-default);--bs-accordion-bg-hover:var(--bs-surface-hover);--bs-accordion-bg-disabled:var(--bs-surface-action-disabled);--bs-accordion-text-disabled:var(--bs-text-on-disabled);--bs-accordion-focus-ring:var(--bs-border-neutral-focus)}.bs-accordion{display:block;border-radius:var(--bs-accordion-radius);overflow:hidden;font-family:inherit}.bs-accordion:has(.bs-accordion__header:hover),.bs-accordion:has(.bs-accordion__header:active){background:var(--bs-accordion-bg-hover)}.bs-accordion:has(.bs-accordion__header:focus-visible){background:var(--bs-accordion-bg-hover);outline:2px solid var(--bs-accordion-focus-ring);outline-offset:2px;border-radius:calc(var(--bs-accordion-radius) + 2px)}.bs-accordion__header{display:flex;align-items:center;width:100%;border:none;background:transparent;color:var(--bs-accordion-text-default);padding:0;cursor:pointer;font-family:inherit;text-align:left}.bs-accordion__header:focus-visible{outline:none}.bs-accordion__header--medium{padding-top:var(--bs-accordion-header-padding-y-medium);padding-bottom:var(--bs-accordion-header-padding-y-medium)}.bs-accordion__header--large{padding-top:var(--bs-accordion-header-padding-y-large);padding-bottom:var(--bs-accordion-header-padding-y-large)}.bs-accordion__header:disabled{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled);cursor:default}.bs-accordion__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__icon svg{width:24px;height:24px}.bs-accordion__icon--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__icon--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__label{flex:1 1 auto;min-width:0;font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px);font-weight:var(--bs-accordion-font-weight)}.bs-accordion__label--no-icon{padding-left:var(--bs-accordion-header-padding-x)}.bs-accordion__caret{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__caret svg{width:24px;height:24px}.bs-accordion__caret--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__caret--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__content{padding-top:0;padding-bottom:var(--bs-accordion-content-padding-bottom);padding-right:var(--bs-accordion-content-padding-right);padding-left:var(--bs-accordion-content-padding-left);color:var(--bs-accordion-text-default);font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px)}.bs-accordion__content--no-icon{padding-left:var(--bs-accordion-content-padding-left-no-icon)}.bs-accordion__content--collapsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bs-accordion--disabled .bs-accordion__content{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled)}`;
|
|
6
6
|
|
|
7
7
|
const BsAccordion = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -43,7 +43,7 @@ const BsAccordion = class {
|
|
|
43
43
|
// `<div role="button">`: it gets click, keyboard activation (Enter/Space), focus-visible
|
|
44
44
|
// styling, and `disabled` semantics (not focusable, no events) for free, and flexbox handles
|
|
45
45
|
// laying out its children as easily as a <div>'s -- no layout reason to hand-roll any of that.
|
|
46
|
-
return (index.h("div", { key: '2774538f3bc8d52e5a295edafbdad5e2a12dddda', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}` }, index.h("button", { key: '7e1942dca9082ac653dd7e3d55d9b919790bcd5b', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (index.h("span", { key: 'abd274cb295ae34e9220846a1e8466623f65663a', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, index.h("slot", { key: 'd9c4c429852c77f4a10c05eb247a9d3d35559ef6', name: "icon" }, index.h(PlusIcon, { key: '2fb492c43754a517e4e98b684f811be21777e849' })))), index.h("span", { key: '
|
|
46
|
+
return (index.h("div", { key: '2774538f3bc8d52e5a295edafbdad5e2a12dddda', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}` }, index.h("button", { key: '7e1942dca9082ac653dd7e3d55d9b919790bcd5b', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (index.h("span", { key: 'abd274cb295ae34e9220846a1e8466623f65663a', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, index.h("slot", { key: 'd9c4c429852c77f4a10c05eb247a9d3d35559ef6', name: "icon" }, index.h(PlusIcon, { key: '2fb492c43754a517e4e98b684f811be21777e849' })))), index.h("span", { key: 'a02484f1a47148493fbc193bc4b9daa8e4c634e7', part: "label", class: `bs-accordion__label ${this.showIcon ? '' : 'bs-accordion__label--no-icon'}` }, index.h("slot", { key: '8241ccee7233e85c2d69c225c07e67b982674ef7', name: "label" })), index.h("span", { key: '6e36ee8dbd22ca924f9d8ea8b5c3017c5478f058', part: "caret", class: `bs-accordion__caret bs-accordion__caret--${this.size}`, "aria-hidden": "true" }, this.expanded ? index.h(CaretUpIcon, null) : index.h(CaretDownIcon, null))), (this.expanded || this.showPreview) && (index.h("div", { key: '1e3ad6fe654c633a4094ea9014ef79d82feae2db', part: "content", class: `bs-accordion__content ${this.showIcon ? '' : 'bs-accordion__content--no-icon'} ${this.expanded ? 'bs-accordion__content--expanded' : 'bs-accordion__content--collapsed'}` }, index.h("slot", { key: '6a60fd12ed4ec7e3b4ab0e56414e0a90c4f5d889' })))));
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
49
|
const PlusIcon = () => (index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M12 5V19", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M5 12H19", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
|
|
@@ -50,6 +50,35 @@
|
|
|
50
50
|
font-family: inherit;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
+
/* Hover/pressed/focus-visible highlight the WHOLE item (header + content together), not just the
|
|
54
|
+
header button -- confirmed against Figma's own Focused variant, whose background spans both.
|
|
55
|
+
Applied on the outer container via :has() rather than on .bs-accordion__header directly, so the
|
|
56
|
+
content area underneath shares the same tint instead of staying white/visually disconnected
|
|
57
|
+
from a highlighted header. */
|
|
58
|
+
.bs-accordion:has(.bs-accordion__header:hover),
|
|
59
|
+
.bs-accordion:has(.bs-accordion__header:active) {
|
|
60
|
+
background: var(--bs-accordion-bg-hover);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.bs-accordion:has(.bs-accordion__header:focus-visible) {
|
|
64
|
+
background: var(--bs-accordion-bg-hover);
|
|
65
|
+
outline: 2px solid var(--bs-accordion-focus-ring);
|
|
66
|
+
outline-offset: 2px;
|
|
67
|
+
/* Ring radius = component radius + 2px, so the ring visually hugs the component's own rounded
|
|
68
|
+
corners instead of looking squared-off relative to them. */
|
|
69
|
+
border-radius: calc(var(--bs-accordion-radius) + 2px);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* No horizontal padding here -- per Figma, the leading icon box and trailing caret box (both
|
|
73
|
+
fixed-width, see .bs-accordion__icon/.bs-accordion__caret below) ARE the left/right inset on
|
|
74
|
+
their own; adding header-level padding on top of the icon box would double it up. The no-icon
|
|
75
|
+
case's left inset is handled on .bs-accordion__label directly instead (see below), since
|
|
76
|
+
there's no icon box there to provide it. */
|
|
77
|
+
/* No border-radius here -- the outer .bs-accordion container already clips both the header and
|
|
78
|
+
content to rounded corners via its own border-radius + overflow:hidden. Rounding the header
|
|
79
|
+
itself too created a visible seam: its own bottom corners would round off against the square
|
|
80
|
+
top corners of the content area sitting directly below it, whenever both are visible together
|
|
81
|
+
(e.g. expanded + hovered). */
|
|
53
82
|
.bs-accordion__header {
|
|
54
83
|
display: flex;
|
|
55
84
|
align-items: center;
|
|
@@ -57,11 +86,16 @@
|
|
|
57
86
|
border: none;
|
|
58
87
|
background: transparent;
|
|
59
88
|
color: var(--bs-accordion-text-default);
|
|
60
|
-
padding: 0
|
|
89
|
+
padding: 0;
|
|
61
90
|
cursor: pointer;
|
|
62
91
|
font-family: inherit;
|
|
63
92
|
text-align: left;
|
|
64
|
-
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* The focus-visible ring is drawn on the outer .bs-accordion container (see above), not here --
|
|
96
|
+
suppress the button's own native focus ring so there's exactly one ring, not two. */
|
|
97
|
+
.bs-accordion__header:focus-visible {
|
|
98
|
+
outline: none;
|
|
65
99
|
}
|
|
66
100
|
|
|
67
101
|
.bs-accordion__header--medium {
|
|
@@ -74,26 +108,6 @@
|
|
|
74
108
|
padding-bottom: var(--bs-accordion-header-padding-y-large);
|
|
75
109
|
}
|
|
76
110
|
|
|
77
|
-
/* Icon=No: no icon box reserving space on the left -- the label gets the symmetric padding
|
|
78
|
-
directly, confirmed against Figma's Icon=No variant. */
|
|
79
|
-
.bs-accordion__header--no-icon {
|
|
80
|
-
padding-left: var(--bs-accordion-header-padding-x);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.bs-accordion__header:hover,
|
|
84
|
-
.bs-accordion__header:active {
|
|
85
|
-
background: var(--bs-accordion-bg-hover);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.bs-accordion__header:focus-visible {
|
|
89
|
-
background: var(--bs-accordion-bg-hover);
|
|
90
|
-
outline: 2px solid var(--bs-accordion-focus-ring);
|
|
91
|
-
outline-offset: -2px;
|
|
92
|
-
/* Ring radius = component radius + 2px, so the ring visually hugs the component's own rounded
|
|
93
|
-
corners instead of looking squared-off relative to them. */
|
|
94
|
-
border-radius: calc(var(--bs-accordion-radius) + 2px);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
111
|
.bs-accordion__header:disabled {
|
|
98
112
|
background: var(--bs-accordion-bg-disabled);
|
|
99
113
|
color: var(--bs-accordion-text-disabled);
|
|
@@ -131,12 +145,20 @@
|
|
|
131
145
|
font-weight: var(--bs-accordion-font-weight);
|
|
132
146
|
}
|
|
133
147
|
|
|
148
|
+
/* Icon=No: no icon box on the left to provide the inset, so the label gets it directly --
|
|
149
|
+
confirmed against Figma's Icon=No variant. */
|
|
150
|
+
.bs-accordion__label--no-icon {
|
|
151
|
+
padding-left: var(--bs-accordion-header-padding-x);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* Same fixed-width/height box as .bs-accordion__icon (not just the 24px SVG) -- per Figma, the
|
|
155
|
+
trailing caret gets its own 64px-wide box exactly like the leading icon does, on BOTH sides
|
|
156
|
+
regardless of showIcon, not just generic header padding. Previously sized to only the SVG's
|
|
157
|
+
24px, which put the caret noticeably closer to the edge than the label's own spacing. */
|
|
134
158
|
.bs-accordion__caret {
|
|
135
159
|
display: flex;
|
|
136
160
|
align-items: center;
|
|
137
161
|
justify-content: center;
|
|
138
|
-
width: 24px;
|
|
139
|
-
height: 24px;
|
|
140
162
|
flex-shrink: 0;
|
|
141
163
|
color: inherit;
|
|
142
164
|
}
|
|
@@ -146,6 +168,16 @@
|
|
|
146
168
|
height: 24px;
|
|
147
169
|
}
|
|
148
170
|
|
|
171
|
+
.bs-accordion__caret--medium {
|
|
172
|
+
width: var(--bs-accordion-icon-width-medium);
|
|
173
|
+
height: var(--bs-accordion-icon-height-medium);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.bs-accordion__caret--large {
|
|
177
|
+
width: var(--bs-accordion-icon-size-large);
|
|
178
|
+
height: var(--bs-accordion-icon-size-large);
|
|
179
|
+
}
|
|
180
|
+
|
|
149
181
|
.bs-accordion__content {
|
|
150
182
|
padding-top: 0;
|
|
151
183
|
padding-bottom: var(--bs-accordion-content-padding-bottom);
|
|
@@ -55,7 +55,7 @@ export class BsAccordion {
|
|
|
55
55
|
// `<div role="button">`: it gets click, keyboard activation (Enter/Space), focus-visible
|
|
56
56
|
// styling, and `disabled` semantics (not focusable, no events) for free, and flexbox handles
|
|
57
57
|
// laying out its children as easily as a <div>'s -- no layout reason to hand-roll any of that.
|
|
58
|
-
return (h("div", { key: '2774538f3bc8d52e5a295edafbdad5e2a12dddda', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}` }, h("button", { key: '7e1942dca9082ac653dd7e3d55d9b919790bcd5b', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (h("span", { key: 'abd274cb295ae34e9220846a1e8466623f65663a', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, h("slot", { key: 'd9c4c429852c77f4a10c05eb247a9d3d35559ef6', name: "icon" }, h(PlusIcon, { key: '2fb492c43754a517e4e98b684f811be21777e849' })))), h("span", { key: '
|
|
58
|
+
return (h("div", { key: '2774538f3bc8d52e5a295edafbdad5e2a12dddda', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}` }, h("button", { key: '7e1942dca9082ac653dd7e3d55d9b919790bcd5b', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (h("span", { key: 'abd274cb295ae34e9220846a1e8466623f65663a', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, h("slot", { key: 'd9c4c429852c77f4a10c05eb247a9d3d35559ef6', name: "icon" }, h(PlusIcon, { key: '2fb492c43754a517e4e98b684f811be21777e849' })))), h("span", { key: 'a02484f1a47148493fbc193bc4b9daa8e4c634e7', part: "label", class: `bs-accordion__label ${this.showIcon ? '' : 'bs-accordion__label--no-icon'}` }, h("slot", { key: '8241ccee7233e85c2d69c225c07e67b982674ef7', name: "label" })), h("span", { key: '6e36ee8dbd22ca924f9d8ea8b5c3017c5478f058', part: "caret", class: `bs-accordion__caret bs-accordion__caret--${this.size}`, "aria-hidden": "true" }, this.expanded ? h(CaretUpIcon, null) : h(CaretDownIcon, null))), (this.expanded || this.showPreview) && (h("div", { key: '1e3ad6fe654c633a4094ea9014ef79d82feae2db', part: "content", class: `bs-accordion__content ${this.showIcon ? '' : 'bs-accordion__content--no-icon'} ${this.expanded ? 'bs-accordion__content--expanded' : 'bs-accordion__content--collapsed'}` }, h("slot", { key: '6a60fd12ed4ec7e3b4ab0e56414e0a90c4f5d889' })))));
|
|
59
59
|
}
|
|
60
60
|
static get is() { return "bs-accordion"; }
|
|
61
61
|
static get encapsulation() { return "shadow"; }
|
|
@@ -11,17 +11,23 @@ const meta = {
|
|
|
11
11
|
title: 'Components/bs-accordion',
|
|
12
12
|
parameters: { docs: { description: { component: componentDescription('bs-accordion') } } },
|
|
13
13
|
render: args => html `
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
14
|
+
<!-- Figma's spec is a fixed 486px-wide component -- matching that width here (instead of
|
|
15
|
+
letting it stretch to the full canvas) is what makes the collapsed state's single-line
|
|
16
|
+
ellipsis truncation actually visible; at full canvas width the preview text never overflows,
|
|
17
|
+
so collapsed and expanded look identical even though the truncation CSS is correctly wired. -->
|
|
18
|
+
<div style="max-width: 486px;">
|
|
19
|
+
<bs-accordion
|
|
20
|
+
?expanded=${args.expanded}
|
|
21
|
+
size=${args.size}
|
|
22
|
+
?disabled=${args.disabled}
|
|
23
|
+
?show-icon=${args.showIcon}
|
|
24
|
+
?show-preview=${args.showPreview}
|
|
25
|
+
@bsToggle=${echoToggle}
|
|
26
|
+
>
|
|
27
|
+
<span slot="label">${args.label}</span>
|
|
28
|
+
${args.content}
|
|
29
|
+
</bs-accordion>
|
|
30
|
+
</div>
|
|
25
31
|
`,
|
|
26
32
|
argTypes: {
|
|
27
33
|
expanded: { control: 'boolean', description: propDescription('bs-accordion', 'expanded') },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as o,p as a,H as i,c as e,h as
|
|
1
|
+
import{t as o,p as a,H as i,c as e,h as c}from"./p-CsnFdZ3v.js";const n=a(class extends i{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.bsToggle=e(this,"bsToggle")}expanded=!1;size="medium";disabled=!1;showIcon=!0;showPreview=!0;bsToggle;onActivate=()=>{this.disabled||this.bsToggle.emit(!this.expanded)};render(){return c("div",{key:"2774538f3bc8d52e5a295edafbdad5e2a12dddda",part:"container",class:`bs-accordion bs-accordion--${this.size} ${this.disabled?"bs-accordion--disabled":""}`},c("button",{key:"7e1942dca9082ac653dd7e3d55d9b919790bcd5b",type:"button",part:"header",class:`bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon?"":"bs-accordion__header--no-icon"}`,disabled:this.disabled,"aria-expanded":this.expanded+"",onClick:this.onActivate},this.showIcon&&c("span",{key:"abd274cb295ae34e9220846a1e8466623f65663a",part:"icon",class:"bs-accordion__icon bs-accordion__icon--"+this.size,"aria-hidden":"true"},c("slot",{key:"d9c4c429852c77f4a10c05eb247a9d3d35559ef6",name:"icon"},c(d,{key:"2fb492c43754a517e4e98b684f811be21777e849"}))),c("span",{key:"a02484f1a47148493fbc193bc4b9daa8e4c634e7",part:"label",class:"bs-accordion__label "+(this.showIcon?"":"bs-accordion__label--no-icon")},c("slot",{key:"8241ccee7233e85c2d69c225c07e67b982674ef7",name:"label"})),c("span",{key:"6e36ee8dbd22ca924f9d8ea8b5c3017c5478f058",part:"caret",class:"bs-accordion__caret bs-accordion__caret--"+this.size,"aria-hidden":"true"},c(this.expanded?s:r,null))),(this.expanded||this.showPreview)&&c("div",{key:"1e3ad6fe654c633a4094ea9014ef79d82feae2db",part:"content",class:`bs-accordion__content ${this.showIcon?"":"bs-accordion__content--no-icon"} ${this.expanded?"bs-accordion__content--expanded":"bs-accordion__content--collapsed"}`},c("slot",{key:"6a60fd12ed4ec7e3b4ab0e56414e0a90c4f5d889"})))}static get style(){return":host{display:block;--bs-accordion-radius:var(--bs-border-radius-100);--bs-accordion-header-padding-y-medium:var(--bs-spacing-150);--bs-accordion-header-padding-y-large:var(--bs-spacing-250);--bs-accordion-header-padding-x:var(--bs-spacing-200);--bs-accordion-content-padding-bottom:var(--bs-spacing-150);--bs-accordion-content-padding-right:var(--bs-spacing-200);--bs-accordion-content-padding-left:var(--bs-spacing-800);--bs-accordion-content-padding-left-no-icon:var(--bs-spacing-200);--bs-accordion-icon-width-medium:var(--bs-spacing-800);--bs-accordion-icon-height-medium:48px;--bs-accordion-icon-size-large:var(--bs-spacing-800);--bs-accordion-font-size:var(--bs-font-size-md);--bs-accordion-line-height:var(--bs-line-height-body-md);--bs-accordion-font-weight:var(--bs-font-weight-semibold);--bs-accordion-text-default:var(--bs-text-default);--bs-accordion-bg-hover:var(--bs-surface-hover);--bs-accordion-bg-disabled:var(--bs-surface-action-disabled);--bs-accordion-text-disabled:var(--bs-text-on-disabled);--bs-accordion-focus-ring:var(--bs-border-neutral-focus)}.bs-accordion{display:block;border-radius:var(--bs-accordion-radius);overflow:hidden;font-family:inherit}.bs-accordion:has(.bs-accordion__header:hover),.bs-accordion:has(.bs-accordion__header:active){background:var(--bs-accordion-bg-hover)}.bs-accordion:has(.bs-accordion__header:focus-visible){background:var(--bs-accordion-bg-hover);outline:2px solid var(--bs-accordion-focus-ring);outline-offset:2px;border-radius:calc(var(--bs-accordion-radius) + 2px)}.bs-accordion__header{display:flex;align-items:center;width:100%;border:none;background:transparent;color:var(--bs-accordion-text-default);padding:0;cursor:pointer;font-family:inherit;text-align:left}.bs-accordion__header:focus-visible{outline:none}.bs-accordion__header--medium{padding-top:var(--bs-accordion-header-padding-y-medium);padding-bottom:var(--bs-accordion-header-padding-y-medium)}.bs-accordion__header--large{padding-top:var(--bs-accordion-header-padding-y-large);padding-bottom:var(--bs-accordion-header-padding-y-large)}.bs-accordion__header:disabled{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled);cursor:default}.bs-accordion__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__icon svg{width:24px;height:24px}.bs-accordion__icon--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__icon--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__label{flex:1 1 auto;min-width:0;font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px);font-weight:var(--bs-accordion-font-weight)}.bs-accordion__label--no-icon{padding-left:var(--bs-accordion-header-padding-x)}.bs-accordion__caret{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__caret svg{width:24px;height:24px}.bs-accordion__caret--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__caret--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__content{padding-top:0;padding-bottom:var(--bs-accordion-content-padding-bottom);padding-right:var(--bs-accordion-content-padding-right);padding-left:var(--bs-accordion-content-padding-left);color:var(--bs-accordion-text-default);font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px)}.bs-accordion__content--no-icon{padding-left:var(--bs-accordion-content-padding-left-no-icon)}.bs-accordion__content--collapsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bs-accordion--disabled .bs-accordion__content{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled)}"}},[769,"bs-accordion",{expanded:[516],size:[1],disabled:[4],showIcon:[4,"show-icon"],showPreview:[4,"show-preview"]}]),d=()=>c("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},c("path",{d:"M12 5V19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}),c("path",{d:"M5 12H19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),r=()=>c("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},c("path",{d:"M6 9.75L12 15.75L18 9.75",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),s=()=>c("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},c("path",{d:"M6 14.25L12 8.25L18 14.25",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));function t(){"undefined"!=typeof customElements&&["bs-accordion"].forEach((a=>{"bs-accordion"===a&&(customElements.get(o(a))||customElements.define(o(a),n))}))}t();const b=n,l=t;export{b as BsAccordion,l as defineCustomElement}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h } from './index-CcPfH1dJ.js';
|
|
2
2
|
|
|
3
|
-
const bsAccordionCss = () => `:host{display:block;--bs-accordion-radius:var(--bs-border-radius-100);--bs-accordion-header-padding-y-medium:var(--bs-spacing-150);--bs-accordion-header-padding-y-large:var(--bs-spacing-250);--bs-accordion-header-padding-x:var(--bs-spacing-200);--bs-accordion-content-padding-bottom:var(--bs-spacing-150);--bs-accordion-content-padding-right:var(--bs-spacing-200);--bs-accordion-content-padding-left:var(--bs-spacing-800);--bs-accordion-content-padding-left-no-icon:var(--bs-spacing-200);--bs-accordion-icon-width-medium:var(--bs-spacing-800);--bs-accordion-icon-height-medium:48px;--bs-accordion-icon-size-large:var(--bs-spacing-800);--bs-accordion-font-size:var(--bs-font-size-md);--bs-accordion-line-height:var(--bs-line-height-body-md);--bs-accordion-font-weight:var(--bs-font-weight-semibold);--bs-accordion-text-default:var(--bs-text-default);--bs-accordion-bg-hover:var(--bs-surface-hover);--bs-accordion-bg-disabled:var(--bs-surface-action-disabled);--bs-accordion-text-disabled:var(--bs-text-on-disabled);--bs-accordion-focus-ring:var(--bs-border-neutral-focus)}.bs-accordion{display:block;border-radius:var(--bs-accordion-radius);overflow:hidden;font-family:inherit}.bs-accordion__header{display:flex;align-items:center;width:100%;border:none;background:transparent;color:var(--bs-accordion-text-default);padding:0
|
|
3
|
+
const bsAccordionCss = () => `:host{display:block;--bs-accordion-radius:var(--bs-border-radius-100);--bs-accordion-header-padding-y-medium:var(--bs-spacing-150);--bs-accordion-header-padding-y-large:var(--bs-spacing-250);--bs-accordion-header-padding-x:var(--bs-spacing-200);--bs-accordion-content-padding-bottom:var(--bs-spacing-150);--bs-accordion-content-padding-right:var(--bs-spacing-200);--bs-accordion-content-padding-left:var(--bs-spacing-800);--bs-accordion-content-padding-left-no-icon:var(--bs-spacing-200);--bs-accordion-icon-width-medium:var(--bs-spacing-800);--bs-accordion-icon-height-medium:48px;--bs-accordion-icon-size-large:var(--bs-spacing-800);--bs-accordion-font-size:var(--bs-font-size-md);--bs-accordion-line-height:var(--bs-line-height-body-md);--bs-accordion-font-weight:var(--bs-font-weight-semibold);--bs-accordion-text-default:var(--bs-text-default);--bs-accordion-bg-hover:var(--bs-surface-hover);--bs-accordion-bg-disabled:var(--bs-surface-action-disabled);--bs-accordion-text-disabled:var(--bs-text-on-disabled);--bs-accordion-focus-ring:var(--bs-border-neutral-focus)}.bs-accordion{display:block;border-radius:var(--bs-accordion-radius);overflow:hidden;font-family:inherit}.bs-accordion:has(.bs-accordion__header:hover),.bs-accordion:has(.bs-accordion__header:active){background:var(--bs-accordion-bg-hover)}.bs-accordion:has(.bs-accordion__header:focus-visible){background:var(--bs-accordion-bg-hover);outline:2px solid var(--bs-accordion-focus-ring);outline-offset:2px;border-radius:calc(var(--bs-accordion-radius) + 2px)}.bs-accordion__header{display:flex;align-items:center;width:100%;border:none;background:transparent;color:var(--bs-accordion-text-default);padding:0;cursor:pointer;font-family:inherit;text-align:left}.bs-accordion__header:focus-visible{outline:none}.bs-accordion__header--medium{padding-top:var(--bs-accordion-header-padding-y-medium);padding-bottom:var(--bs-accordion-header-padding-y-medium)}.bs-accordion__header--large{padding-top:var(--bs-accordion-header-padding-y-large);padding-bottom:var(--bs-accordion-header-padding-y-large)}.bs-accordion__header:disabled{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled);cursor:default}.bs-accordion__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__icon svg{width:24px;height:24px}.bs-accordion__icon--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__icon--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__label{flex:1 1 auto;min-width:0;font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px);font-weight:var(--bs-accordion-font-weight)}.bs-accordion__label--no-icon{padding-left:var(--bs-accordion-header-padding-x)}.bs-accordion__caret{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__caret svg{width:24px;height:24px}.bs-accordion__caret--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__caret--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__content{padding-top:0;padding-bottom:var(--bs-accordion-content-padding-bottom);padding-right:var(--bs-accordion-content-padding-right);padding-left:var(--bs-accordion-content-padding-left);color:var(--bs-accordion-text-default);font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px)}.bs-accordion__content--no-icon{padding-left:var(--bs-accordion-content-padding-left-no-icon)}.bs-accordion__content--collapsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bs-accordion--disabled .bs-accordion__content{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled)}`;
|
|
4
4
|
|
|
5
5
|
const BsAccordion = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -41,7 +41,7 @@ const BsAccordion = class {
|
|
|
41
41
|
// `<div role="button">`: it gets click, keyboard activation (Enter/Space), focus-visible
|
|
42
42
|
// styling, and `disabled` semantics (not focusable, no events) for free, and flexbox handles
|
|
43
43
|
// laying out its children as easily as a <div>'s -- no layout reason to hand-roll any of that.
|
|
44
|
-
return (h("div", { key: '2774538f3bc8d52e5a295edafbdad5e2a12dddda', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}` }, h("button", { key: '7e1942dca9082ac653dd7e3d55d9b919790bcd5b', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (h("span", { key: 'abd274cb295ae34e9220846a1e8466623f65663a', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, h("slot", { key: 'd9c4c429852c77f4a10c05eb247a9d3d35559ef6', name: "icon" }, h(PlusIcon, { key: '2fb492c43754a517e4e98b684f811be21777e849' })))), h("span", { key: '
|
|
44
|
+
return (h("div", { key: '2774538f3bc8d52e5a295edafbdad5e2a12dddda', part: "container", class: `bs-accordion bs-accordion--${this.size} ${this.disabled ? 'bs-accordion--disabled' : ''}` }, h("button", { key: '7e1942dca9082ac653dd7e3d55d9b919790bcd5b', type: "button", part: "header", class: `bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon ? '' : 'bs-accordion__header--no-icon'}`, disabled: this.disabled, "aria-expanded": String(this.expanded), onClick: this.onActivate }, this.showIcon && (h("span", { key: 'abd274cb295ae34e9220846a1e8466623f65663a', part: "icon", class: `bs-accordion__icon bs-accordion__icon--${this.size}`, "aria-hidden": "true" }, h("slot", { key: 'd9c4c429852c77f4a10c05eb247a9d3d35559ef6', name: "icon" }, h(PlusIcon, { key: '2fb492c43754a517e4e98b684f811be21777e849' })))), h("span", { key: 'a02484f1a47148493fbc193bc4b9daa8e4c634e7', part: "label", class: `bs-accordion__label ${this.showIcon ? '' : 'bs-accordion__label--no-icon'}` }, h("slot", { key: '8241ccee7233e85c2d69c225c07e67b982674ef7', name: "label" })), h("span", { key: '6e36ee8dbd22ca924f9d8ea8b5c3017c5478f058', part: "caret", class: `bs-accordion__caret bs-accordion__caret--${this.size}`, "aria-hidden": "true" }, this.expanded ? h(CaretUpIcon, null) : h(CaretDownIcon, null))), (this.expanded || this.showPreview) && (h("div", { key: '1e3ad6fe654c633a4094ea9014ef79d82feae2db', part: "content", class: `bs-accordion__content ${this.showIcon ? '' : 'bs-accordion__content--no-icon'} ${this.expanded ? 'bs-accordion__content--expanded' : 'bs-accordion__content--collapsed'}` }, h("slot", { key: '6a60fd12ed4ec7e3b4ab0e56414e0a90c4f5d889' })))));
|
|
45
45
|
}
|
|
46
46
|
};
|
|
47
47
|
const PlusIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M12 5V19", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M5 12H19", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as o,c as a,h as i}from"./p-CcPfH1dJ.js";const d=class{constructor(i){o(this,i),this.bsToggle=a(this,"bsToggle")}expanded=!1;size="medium";disabled=!1;showIcon=!0;showPreview=!0;bsToggle;onActivate=()=>{this.disabled||this.bsToggle.emit(!this.expanded)};render(){return i("div",{key:"2774538f3bc8d52e5a295edafbdad5e2a12dddda",part:"container",class:`bs-accordion bs-accordion--${this.size} ${this.disabled?"bs-accordion--disabled":""}`},i("button",{key:"7e1942dca9082ac653dd7e3d55d9b919790bcd5b",type:"button",part:"header",class:`bs-accordion__header bs-accordion__header--${this.size} ${this.showIcon?"":"bs-accordion__header--no-icon"}`,disabled:this.disabled,"aria-expanded":String(this.expanded),onClick:this.onActivate},this.showIcon&&i("span",{key:"abd274cb295ae34e9220846a1e8466623f65663a",part:"icon",class:`bs-accordion__icon bs-accordion__icon--${this.size}`,"aria-hidden":"true"},i("slot",{key:"d9c4c429852c77f4a10c05eb247a9d3d35559ef6",name:"icon"},i(e,{key:"2fb492c43754a517e4e98b684f811be21777e849"}))),i("span",{key:"0b0c7d891e30aa3d45f70d7ff1c79e93ae0dfd6c",part:"label",class:"bs-accordion__label"},i("slot",{key:"21cc50e1f368663dc1a980c9dd96522265c8c433",name:"label"})),i("span",{key:"b9506bf3fa94a5ad05083b5cda4eafa29de0369f",part:"caret",class:"bs-accordion__caret","aria-hidden":"true"},i(this.expanded?r:c,null))),(this.expanded||this.showPreview)&&i("div",{key:"36db0dc0bdf61286d61136be6c3d4292e64e9a51",part:"content",class:`bs-accordion__content ${this.showIcon?"":"bs-accordion__content--no-icon"} ${this.expanded?"bs-accordion__content--expanded":"bs-accordion__content--collapsed"}`},i("slot",{key:"51747175592ba93a1e41d4cf98f9e1bf1630d847"})))}},e=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},i("path",{d:"M12 5V19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}),i("path",{d:"M5 12H19",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),c=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},i("path",{d:"M6 9.75L12 15.75L18 9.75",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),r=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},i("path",{d:"M6 14.25L12 8.25L18 14.25",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));d.style=":host{display:block;--bs-accordion-radius:var(--bs-border-radius-100);--bs-accordion-header-padding-y-medium:var(--bs-spacing-150);--bs-accordion-header-padding-y-large:var(--bs-spacing-250);--bs-accordion-header-padding-x:var(--bs-spacing-200);--bs-accordion-content-padding-bottom:var(--bs-spacing-150);--bs-accordion-content-padding-right:var(--bs-spacing-200);--bs-accordion-content-padding-left:var(--bs-spacing-800);--bs-accordion-content-padding-left-no-icon:var(--bs-spacing-200);--bs-accordion-icon-width-medium:var(--bs-spacing-800);--bs-accordion-icon-height-medium:48px;--bs-accordion-icon-size-large:var(--bs-spacing-800);--bs-accordion-font-size:var(--bs-font-size-md);--bs-accordion-line-height:var(--bs-line-height-body-md);--bs-accordion-font-weight:var(--bs-font-weight-semibold);--bs-accordion-text-default:var(--bs-text-default);--bs-accordion-bg-hover:var(--bs-surface-hover);--bs-accordion-bg-disabled:var(--bs-surface-action-disabled);--bs-accordion-text-disabled:var(--bs-text-on-disabled);--bs-accordion-focus-ring:var(--bs-border-neutral-focus)}.bs-accordion{display:block;border-radius:var(--bs-accordion-radius);overflow:hidden;font-family:inherit}.bs-accordion__header{display:flex;align-items:center;width:100%;border:none;background:transparent;color:var(--bs-accordion-text-default);padding:0 var(--bs-accordion-header-padding-x);cursor:pointer;font-family:inherit;text-align:left;border-radius:var(--bs-accordion-radius)}.bs-accordion__header--medium{padding-top:var(--bs-accordion-header-padding-y-medium);padding-bottom:var(--bs-accordion-header-padding-y-medium)}.bs-accordion__header--large{padding-top:var(--bs-accordion-header-padding-y-large);padding-bottom:var(--bs-accordion-header-padding-y-large)}.bs-accordion__header--no-icon{padding-left:var(--bs-accordion-header-padding-x)}.bs-accordion__header:hover,.bs-accordion__header:active{background:var(--bs-accordion-bg-hover)}.bs-accordion__header:focus-visible{background:var(--bs-accordion-bg-hover);outline:2px solid var(--bs-accordion-focus-ring);outline-offset:-2px;border-radius:calc(var(--bs-accordion-radius) + 2px)}.bs-accordion__header:disabled{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled);cursor:default}.bs-accordion__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.bs-accordion__icon svg{width:24px;height:24px}.bs-accordion__icon--medium{width:var(--bs-accordion-icon-width-medium);height:var(--bs-accordion-icon-height-medium)}.bs-accordion__icon--large{width:var(--bs-accordion-icon-size-large);height:var(--bs-accordion-icon-size-large)}.bs-accordion__label{flex:1 1 auto;min-width:0;font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px);font-weight:var(--bs-accordion-font-weight)}.bs-accordion__caret{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:inherit}.bs-accordion__caret svg{width:24px;height:24px}.bs-accordion__content{padding-top:0;padding-bottom:var(--bs-accordion-content-padding-bottom);padding-right:var(--bs-accordion-content-padding-right);padding-left:var(--bs-accordion-content-padding-left);color:var(--bs-accordion-text-default);font-size:var(--bs-accordion-font-size);line-height:calc(var(--bs-accordion-line-height) * 1px)}.bs-accordion__content--no-icon{padding-left:var(--bs-accordion-content-padding-left-no-icon)}.bs-accordion__content--collapsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bs-accordion--disabled .bs-accordion__content{background:var(--bs-accordion-bg-disabled);color:var(--bs-accordion-text-disabled)}";export{d as bs_accordion}
|