smoothly 1.0.0-alpha.71 → 1.0.0-alpha.73

package/dist/cjs/smoothly-accordion_66.cjs.entry.js

@@ -109,7 +109,7 @@ const SmoothlyAccordionItem = class {
 };
 SmoothlyAccordionItem.style = styleCss$X;
 
-const styleCss$W = "smoothly-app{display:block;scrollbar-width:none}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{background:none}smoothly-app>smoothly-notifier>header{background:rgba(var(--smoothly-color));color:rgba(var(--smoothly-color-contrast))}smoothly-app>smoothly-notifier>header{position:fixed;top:0;left:0;width:100%;z-index:5;height:5rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-dark-shadow));border-bottom:1px solid rgba(var(--smoothly-dark-color))}smoothly-app>smoothly-notifier>header>nav{width:100%;flex-shrink:2}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{display:flex;height:100%;margin:0}smoothly-app>smoothly-notifier>header>h1{margin-left:3.8rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-start]{height:fit-content;padding:0.5em 0em;margin-top:1em}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-end]{width:fit-content;gap:0.5em;align-self:center;height:fit-content;margin-left:10em}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;margin:0 0.4cm;text-decoration:none;align-items:center;align-self:center}smoothly-app>smoothly-notifier>main{position:relative;top:5rem}@media screen and (max-width: 900px){smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{width:10em;top:2.5rem;position:absolute;right:0;flex-direction:column}smoothly-app>smoothly-notifier>header>nav>ul li{margin-right:0;margin-bottom:1em;background-color:rgba(var(--smoothly-color));width:100%}smoothly-app>smoothly-notifier>header>nav>ul smoothly-burger{position:absolute;top:0;right:0}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-start]{display:none}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-end]{margin-left:3em;width:10em;padding:1.5em;background-color:rgba(var(--smoothly-color))}}.true:not([menuOpen]){display:none}";
+const styleCss$W = "smoothly-app{display:block;scrollbar-width:none}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{background:none}smoothly-app>smoothly-notifier>header{background:rgba(var(--smoothly-color));color:rgba(var(--smoothly-color-contrast))}smoothly-app>smoothly-notifier>header{position:fixed;top:0;left:0;width:100%;z-index:5;height:5rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-dark-shadow));border-bottom:1px solid rgba(var(--smoothly-dark-color))}smoothly-app>smoothly-notifier>header>nav{width:100%;flex-shrink:2}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{display:flex;height:100%;margin:0}smoothly-app>smoothly-notifier>header>h1{margin-left:3.8rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-start]{height:fit-content;padding:0.5em 0em;margin-top:1em}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-end]{width:fit-content;gap:0.5em;align-self:center;height:fit-content;margin-left:10em}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;text-decoration:none;align-items:center;align-self:center}smoothly-app>smoothly-notifier>main{position:relative;top:5rem}@media screen and (max-width: 900px){smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{width:10em;top:2.5rem;position:absolute;right:0;flex-direction:column}smoothly-app>smoothly-notifier>header>nav>ul li{margin-right:0;margin-bottom:1em;background-color:rgba(var(--smoothly-color));width:100%}smoothly-app>smoothly-notifier>header>nav>ul smoothly-burger{position:absolute;top:0;right:0}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-start]{display:none}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-end]{margin-left:3em;width:10em;padding:1.5em;background-color:rgba(var(--smoothly-color))}}.true:not([menuOpen]){display:none}";
 
 const SmoothlyApp = class {
   constructor(hostRef) {
@@ -1394,7 +1394,7 @@ if (!globalThis.URLPattern) {
   globalThis.URLPattern = URLPattern$1;
 }
 
-const styleCss$V = ".sc-smoothly-app-room-h{display:flex;justify-content:center;text-align:center;cursor:pointer}.sc-smoothly-app-room-h>main.sc-smoothly-app-room{display:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room{height:100%;list-style:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{margin:0em 1.5em;height:100%}[selected].sc-smoothly-app-room-h>li.sc-smoothly-app-room{color:rgb(var(--smoothly-color-contrast));background:rgb(var(--smoothly-color-shade))}.sc-smoothly-app-room-h:hover>li.sc-smoothly-app-room{color:rgb(var(--smoothly-color-contrast));background-color:rgb(var(--smoothly-color-tint));transition:0.2s}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room>smoothly-icon.sc-smoothly-app-room{align-self:inherit;margin-bottom:1em}";
+const styleCss$V = ".sc-smoothly-app-room-h{display:flex;justify-content:center;text-align:center;cursor:pointer}.sc-smoothly-app-room-h>main.sc-smoothly-app-room{display:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room{height:100%;list-style:none}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room{padding:0 1.5em;height:100%}[selected].sc-smoothly-app-room-h>li.sc-smoothly-app-room{color:rgb(var(--smoothly-color-contrast));background:rgb(var(--smoothly-color-shade))}.sc-smoothly-app-room-h:hover>li.sc-smoothly-app-room{color:rgb(var(--smoothly-color-contrast));background-color:rgb(var(--smoothly-color-tint));transition:0.2s}.sc-smoothly-app-room-h>li.sc-smoothly-app-room>a.sc-smoothly-app-room>smoothly-icon.sc-smoothly-app-room{align-self:inherit;margin-bottom:1em}";
 
 const SmoothlyAppRoom = class {
   constructor(hostRef) {
@@ -22140,7 +22140,7 @@ const SmoothlyDisplayDemo = class {
   }
   render() {
     return [
-      index.h("main", null, index.h("fieldset", null, index.h("h2", null, "Smoothly display"), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "display amount without decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "date"), index.h("dd", null, index.h("smoothly-display", { type: "date", value: "2022-07-07" })), index.h("dt", null, "date time"), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "Europe/Stockholm" }, value: "2022-07-07T12:15Z" })), index.h("dt", null, "Deprecated display date time"), index.h("dt", null, "Display amount"), index.h("dd", null, index.h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-")))), index.h("fieldset", null, index.h("h2", null, "Smoothly skeleton"), index.h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" })), index.h("fieldset", null, index.h("h2", null, "Smoothly URL encoded"), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" })), index.h("fieldset", null, index.h("h2", null, "Smoothly popup"), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup"))), index.h("fieldset", null, index.h("h2", null, "Test of different kinds of notifier"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), index.h("fieldset", null, index.h("h2", null, "Smoothly spinner"), index.h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", index.h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), index.h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", index.h("smoothly-spinner", { active: true, size: "medium" })), index.h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", index.h("smoothly-spinner", { active: true, size: "small" })), index.h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, index.h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))), index.h("fieldset", null, index.h("h2", null, "Smoothly summary"), index.h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, index.h("p", { slot: "summary" }, "Some title"), index.h("p", { slot: "content" }, "Some content")), index.h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, index.h("p", { slot: "summary" }, "Some title"), index.h("p", { slot: "content" }, "Some content")), index.h("smoothly-summary", { color: "danger", fill: "clear" }, index.h("div", { slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", null, "Person"), index.h("smoothly-icon", { name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { slot: "content" }, "Some person information.")), index.h("smoothly-summary", { color: "danger", fill: "clear", open: true }, index.h("p", { slot: "summary" }, "Some other title"), index.h("p", { slot: "content" }, "A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.")))),
+      index.h("main", null, index.h("fieldset", null, index.h("h2", null, "Smoothly display"), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "display amount without decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), index.h("dt", null, "display amount with decimals"), index.h("dd", null, index.h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "date"), index.h("dd", null, index.h("smoothly-display", { type: "date", value: "2022-07-07" })), index.h("dt", null, "date time"), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }, value: "2022-07-07T02:02:02Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), index.h("dd", null, index.h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "Europe/Stockholm" }, value: "2022-07-07T12:15Z" })), index.h("dt", null, "Deprecated display date time"), index.h("dt", null, "Display amount"), index.h("dd", null, index.h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-")))), index.h("fieldset", null, index.h("h2", null, "Smoothly skeleton"), index.h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), index.h("smoothly-skeleton", { period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), index.h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" })), index.h("fieldset", null, index.h("h2", null, "Smoothly URL encoded"), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" })), index.h("fieldset", null, index.h("h2", null, "Smoothly popup"), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup"))), index.h("fieldset", null, index.h("h2", null, "Test of different kinds of notifier"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.succeeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(redirect.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), index.h("fieldset", null, index.h("h2", null, "Smoothly spinner"), index.h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", index.h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), index.h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", index.h("smoothly-spinner", { active: true, size: "medium" })), index.h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", index.h("smoothly-spinner", { active: true, size: "small" })), index.h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, index.h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))), index.h("fieldset", null, index.h("h2", null, "Smoothly summary"), index.h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, index.h("p", { slot: "summary" }, "Some title"), index.h("p", { slot: "content" }, "Some content")), index.h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, index.h("p", { slot: "summary" }, "Some title"), index.h("p", { slot: "content" }, "Some content")), index.h("smoothly-summary", { color: "danger", fill: "clear" }, index.h("div", { slot: "summary", style: { display: "flex", gap: "0.3rem" } }, index.h("span", null, "Person"), index.h("smoothly-icon", { name: "person", color: "light", fill: "clear", size: "tiny" })), index.h("p", { slot: "content" }, "Some person information.")), index.h("smoothly-summary", { color: "danger", fill: "clear", open: true, onSmoothlySummaryOpen: e => console.log("summary is open?", e.detail) }, index.h("p", { slot: "summary" }, "Some other title"), index.h("p", { slot: "content" }, "A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.")))),
     ];
   }
 };
@@ -28317,7 +28317,7 @@ const Notification = class {
 };
 Notification.style = styleCss$w;
 
-const styleCss$v = ".sc-smoothly-notifier-h{display:block}[hidden].sc-smoothly-notifier-h{display:none}.sc-smoothly-notifier-h>aside.sc-smoothly-notifier{display:flex;flex-wrap:wrap-reverse;align-content:stretch;justify-content:flex-start;position:fixed;bottom:3em;left:0;text-align:center;width:100%;z-index:100}";
+const styleCss$v = ".sc-smoothly-notifier-h{display:block}[hidden].sc-smoothly-notifier-h{display:none}.sc-smoothly-notifier-h>aside.sc-smoothly-notifier{display:flex;flex-wrap:wrap-reverse;align-content:stretch;position:fixed;bottom:3rem;left:0;text-align:center;z-index:100}";
 
 const Notifier = class {
   constructor(hostRef) {
@@ -29007,14 +29007,17 @@ const styleCss$f = ".sc-smoothly-summary-h>details.sc-smoothly-summary>summary.s
 const SmoothlySummary = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.smoothlySummaryOpen = index.createEvent(this, "smoothlySummaryOpen", 7);
     this.open = false;
     this.color = "primary";
     this.fill = "solid";
     this.size = "tiny";
   }
   toggleHandler(event) {
-    if (event.target instanceof HTMLDetailsElement)
+    if (event.target instanceof HTMLDetailsElement) {
       this.open = event.target.open;
+      this.smoothlySummaryOpen.emit(this.open);
+    }
   }
   render() {
     return (index.h("details", { onToggle: e => this.toggleHandler(e), open: this.open }, index.h("summary", null, index.h("smoothly-icon", { name: "chevron-forward", color: this.color, fill: this.fill, size: this.size }), index.h("slot", { name: "summary" })), index.h("slot", { name: "content" })));