Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(panel): Add component tokens #10822

Merged
merged 16 commits into from
Nov 21, 2024
Merged
Next Next commit
feat(panel): Add component tokens
macandcheese committed Nov 21, 2024
commit 5ae98508ce171bbc42a4efde73033815a8a2cf3e
8 changes: 1 addition & 7 deletions packages/calcite-components/.stylelintrc.cjs
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
// @ts-check

// ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
const customFunctions = [
"get-trailing-text-input-padding",
"medium-modular-scale",
"modular-scale",
"scale-duration",
"small-modular-scale"
];
const customFunctions = [];
// ⚠️ END OF AUTO-GENERATED CODE

const scssPatternRules = [
Original file line number Diff line number Diff line change
@@ -1108,7 +1108,7 @@ describe("calcite-dialog", () => {
},
"--calcite-dialog-footer-space": {
shadowSelector: `.${CSS.panel}`,
targetProp: "--calcite-panel-footer-padding",
targetProp: "--calcite-panel-footer-space",
},
"--calcite-dialog-offset-x": {
shadowSelector: `.${CSS.dialog}`,
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/dialog/dialog.scss
Original file line number Diff line number Diff line change
@@ -116,8 +116,8 @@

calcite-panel {
--calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));
--calcite-panel-footer-padding: var(--calcite-dialog-footer-space);
--calcite-panel-header-border-block-end: var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color);
--calcite-panel-footer-space: var(--calcite-dialog-footer-space);
--calcite-panel-border-color: var(--calcite-dialog-border-color);
--calcite-panel-background-color: var(--calcite-dialog-background-color);
}

119 changes: 111 additions & 8 deletions packages/calcite-components/src/components/panel/panel.e2e.ts
Original file line number Diff line number Diff line change
@@ -667,15 +667,118 @@ describe("calcite-panel", () => {
});

describe("theme", () => {
themed(html`<calcite-panel collapsible closable>scrolling content</calcite-panel>`, {
"--calcite-panel-content-space": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "padding",
themed(
html`<calcite-panel heading="Terms and conditions" description="Something great about this" closable collapsible>
<calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
<calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
<calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
<div slot="content-top">To continue, you must agree to the terms</div>
<calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
<calcite-checkbox></calcite-checkbox>I agree to the terms
</calcite-label>
<p>
Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros. Aenean
sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est tortor,
vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum tortor, a
iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor, porttitor est sed,
vestibulum risus. Integer non erat libero.
</p>
<p>
Cras sagittis vel neque sed efficitur. Vestibulum mattis diam eget urna condimentum tempus. Donec malesuada
velit sit amet metus faucibus pharetra. Sed sit amet massa facilisis, porttitor nunc vitae, sollicitudin
mauris. Nullam nec rhoncus augue. Praesent rhoncus varius sapien, sit amet porttitor nisl varius eu.
Pellentesque at eros eget metus dignissim lacinia. Sed sed justo eget sapien ultrices commodo. Donec eget
pretium urna. Vestibulum ut tortor ut quam viverra dictum. Morbi ut turpis velit. Phasellus maximus lacus
nunc, ac consequat est varius in. Nullam facilisis, purus ut aliquet condimentum, est tortor accumsan justo,
at sagittis urna dolor eget lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros. Aenean
sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est tortor,
vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum tortor, a
iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor, porttitor est sed,
vestibulum risus. Integer non erat libero.
</p>
<calcite-button slot="footer-end"> I'm done </calcite-button>
</calcite-panel>`,
{
"--calcite-panel-corner-radius": {
shadowSelector: `.${CSS.container}`,
targetProp: "borderRadius",
},
"--calcite-panel-heading-text-color": {
shadowSelector: `.${CSS.heading}`,
targetProp: "color",
},
"--calcite-panel-description-text-color": {
shadowSelector: `.${CSS.description}`,
targetProp: "color",
},
"--calcite-panel-background-color": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "backgroundColor",
},
"--calcite-panel-header-background-color": {
shadowSelector: `.${CSS.header}`,
targetProp: "backgroundColor",
},
"--calcite-panel-footer-background-color": {
shadowSelector: `.${CSS.footer}`,
targetProp: "backgroundColor",
},
"--calcite-panel-border-color": [
{
shadowSelector: `.${CSS.headerContainer}`,
targetProp: "borderBlockEndColor",
},
{
shadowSelector: `.${CSS.contentTop}`,
targetProp: "borderBlockEndColor",
},
{
shadowSelector: `.${CSS.contentBottom}`,
targetProp: "borderBlockStartColor",
},
{
shadowSelector: `.${CSS.footer}`,
targetProp: "borderBlockStartColor",
},
],
"--calcite-panel-space": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "padding",
},
"--calcite-panel-footer-space": {
shadowSelector: `.${CSS.footer}`,
targetProp: "padding",
},
"--calcite-panel-content-space": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "padding",
},
},
"--calcite-panel-background-color": {
shadowSelector: `.${CSS.contentWrapper}`,
targetProp: "backgroundColor",
);
themed(
html`<calcite-panel heading="Terms and conditions" description="Something great about this" closable collapsible>
<div slot="header-content">Custom header content</div>
<p>
Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros. Aenean
sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est tortor,
vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum tortor, a
iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor, porttitor est sed,
vestibulum risus. Integer non erat libero.
</p>
<calcite-button slot="footer-end"> I'm done </calcite-button>
</calcite-panel>`,
{
"--calcite-panel-header-content-space": {
shadowSelector: `.${CSS.headerSlottedContent}`,
targetProp: "padding",
},
},
});
);
});
});
144 changes: 108 additions & 36 deletions packages/calcite-components/src/components/panel/panel.scss
Original file line number Diff line number Diff line change
@@ -2,11 +2,31 @@
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-panel-content-space: Specifies the padding of the component's content.
* @prop --calcite-panel-footer-padding: Specifies the padding of the component's footer.
* @prop --calcite-panel-header-border-block-end: Specifies the component header's block end border.
* @prop --calcite-panel-corner-radius: Specifies the corner radius of the component.
* @prop --calcite-panel-shadow: Specifies the shadow of the component.
* @prop --calcite-panel-heading-text-color: Specifies the text color of the component's `heading`.
* @prop --calcite-panel-description-text-color: Specifies the text color of the component's `description`.
* @prop --calcite-panel-border-color: Specifies the border color of the component.
* @prop --calcite-panel-background-color: Specifies the background color of the component.
* @prop --calcite-panel-header-background-color: Specifies the background color of the component's footer.
* @prop --calcite-panel-footer-background-color: Specifies the background color of the component's footer.
* @prop --calcite-panel-space: Specifies the padding of the component's `"unnamed (default)"` slot.
* @prop --calcite-panel-header-content-space: Specifies the padding of the `"header-content"` slot.
alisonailea marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-panel-footer-space: Specifies the padding of the component's footer.
* @prop --calcite-panel-content-space: [Deprecated] Specifies the padding of the component's content. Use `--calcite-panel-space` instead.
macandcheese marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-panel-footer-padding: [Deprecated] Specifies the padding of the component's footer. Use `--calcite-panel-footer-space` instead.
* @prop --calcite-panel-header-border-block-end: [Deprecated] Specifies the component header's block end border. Use `--calcite-panel-border-color` instead.
macandcheese marked this conversation as resolved.
Show resolved Hide resolved
* @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` Action components. Will apply to any slotted Calcite Action components.
* @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` Action components when hovered. Will apply to any slotted Calcite Action components.
* @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` Action components when pressed. Will apply to any slotted Calcite Action components.
* @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` Action components when hovered. Will apply to any slotted Calcite Action components.
* @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` Action components when pressed. Will apply to any slotted Calcite Action components.
* @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered Popover component, which is rendered within an Action Menu when slotted Actions are present in the `header-actions-end` slot. Will apply to any slotted Calcite Popover components.
*/

:host {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

border-radius needs to be added to the :host or the component doesn't look right.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I don't know if this component needs @extend %component-host; at all which places that visible background that isn't clipped. Might be able to remove that and not have to set the radius on :host

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was able to just take what was needed from %component-host and not set a background color on :host. Could you verify: https://www.chromatic.com/build?appId=6266d45509d7eb004aa254fb&number=6466

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Going to merge in.

@@ -21,7 +41,7 @@
@import "../../assets/styles/header";

:host([scale="s"]) {
--calcite-internal-panel-default-padding: var(--calcite-spacing-sm);
--calcite-internal-panel-default-space: var(--calcite-spacing-sm);
--calcite-internal-panel-header-vertical-padding: 10px; // this should use a spacing token once made available

.header-content {
@@ -36,7 +56,7 @@
}

:host([scale="m"]) {
--calcite-internal-panel-default-padding: var(--calcite-spacing-md);
--calcite-internal-panel-default-space: var(--calcite-spacing-md);
--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg);

.header-content {
@@ -51,7 +71,7 @@
}

:host([scale="l"]) {
--calcite-internal-panel-default-padding: var(--calcite-spacing-xl);
--calcite-internal-panel-default-space: var(--calcite-spacing-xl);
--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl);

.header-content {
@@ -68,41 +88,66 @@
.content-top,
.content-bottom {
@apply flex items-start self-stretch;
}

border-block-start: 1px solid var(--calcite-color-border-3);
background-color: var(--calcite-color-foreground-1);
.content-top {
background-color: var(--calcite-panel-background-color, var(--calcite-color-foreground-1));
padding: var(--calcite-internal-panel-default-space);
border-block: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
}

.container {
@apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;
.content-bottom {
background-color: var(--calcite-panel-background-color, var(--calcite-color-foreground-1));
padding: var(--calcite-internal-panel-default-space);
border-block-start: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
}

.content-wrapper + .footer {
border-block-start: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
}

:host([collapsed]) .content-top {
border-block-end: 0;
}

.container {
@apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0 overflow-hidden box-border;
transition:
max-block-size var(--calcite-animation-timing),
inline-size var(--calcite-animation-timing);
border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));
box-sizing: border-box;
font-size: var(--calcite-font-size--1);
}

.container[hidden] {
@apply hidden;
}

.header {
@apply bg-foreground-1 flex flex-col z-header;
border-block-end: var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-color-border-3));
@apply flex flex-col z-header;
border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none))
var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) 0 0;
background-color: var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));
}

.header-container {
@apply flex flex-row w-full
items-stretch
justify-start;
flex: 0 0 auto;
}

.header-container--border-end {
border-block-end: 1px solid var(--calcite-color-border-3);
border-block-end: 1px solid
var((--calcite-panel-header-border-block-end), var(--calcite-panel-border-color, var(--calcite-color-border-3)));
}

.action-bar-container {
@apply w-full;
border-block-end: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
}

.action-bar-container ~ .content-top,
.action-bar-container ~ .content-bottom {
border-block-start: 0;
}

.action-bar-container ::slotted(calcite-action-bar) {
@@ -126,23 +171,24 @@
}

.heading {
@apply mx-0 mt-0 mb-1 font-medium text-color-1;
@apply mx-0 mt-0 mb-1 font-medium;
color: var(--calcite-panel-heading-text-color, var(--calcite-color-text-1));

&:only-child {
@apply mb-0;
}
}

.description {
@apply text-color-2;
color: var(--calcite-panel-description-text-color, var(--calcite-color-text-2));
}
}

.back-button {
@apply border-color-3
border-0
@apply border-0
border-solid;
border-inline-end-width: theme("borderWidth.DEFAULT");
border-color: var(--calcite-panel-border-color, var(--calcite-color-border-3));
}

.header-actions {
@@ -156,6 +202,24 @@
margin-inline-start: theme("margin.auto");
}

#close,
#collapse,
.back-button,
calcite-action-menu {
}

#close,
#collapse,
calcite-action-menu {
&:last-child {
--calcite-action-corner-radius-start-end: var(--calcite-panel-corner-radius);
}
}

.back-button {
--calcite-action-corner-radius-start-start: var(--calcite-panel-corner-radius);
}

.content-wrapper {
@apply flex
flex-auto
@@ -165,30 +229,38 @@
overflow-auto
h-full
focus-base
relative;
padding: var(--calcite-panel-content-space, 0);
text-color-2;
padding: var(--calcite-panel-space, var(--calcite-panel-content-space, 0));
background: var(--calcite-panel-background-color, var(--calcite-color-background));
}

.content-wrapper:focus-visible {
@apply focus-inset;
}

.content-top,
.content-bottom {
padding: var(--calcite-internal-panel-default-padding);
}

.header-content {
flex: 1 1 auto;
justify-content: center;
padding-block: var(--calcite-internal-panel-header-vertical-padding);
padding-inline: var(--calcite-internal-panel-default-padding);
}
padding-inline: var(--calcite-internal-panel-default-space);

&.header-slotted-content {
padding: var(
--calcite-panel-header-content-space,
var(--calcite-internal-panel-header-vertical-padding) var(--calcite-internal-panel-default-space)
);
}
}
.footer {
@apply flex mt-auto flex-row content-between justify-center items-center bg-foreground-1 text-n2-wrap;
border-block-start: 1px solid var(--calcite-color-border-3);
padding: var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-padding));
@apply flex mt-auto flex-row content-between justify-center items-center text-n2-wrap;
border-block-start: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
padding: var(
--calcite-panel-footer-space,
var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space))
);
background-color: var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1));
border-radius: 0 0 var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none))
var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));
}

.footer-content {
@@ -197,19 +269,19 @@

.footer-actions {
@apply flex flex-row items-center justify-evenly flex-1;
gap: var(--calcite-internal-panel-default-padding);
gap: var(--calcite-internal-panel-default-space);
}

.footer-start {
@apply flex flex-row items-center justify-start flex-1;
margin-inline-end: auto;
gap: var(--calcite-internal-panel-default-padding);
gap: var(--calcite-internal-panel-default-space);
}

.footer-end {
@apply flex flex-row items-center justify-end flex-1;
margin-inline-start: auto;
gap: var(--calcite-internal-panel-default-padding);
gap: var(--calcite-internal-panel-default-space);
}

.fab-container {
6 changes: 5 additions & 1 deletion packages/calcite-components/src/components/panel/panel.tsx
Original file line number Diff line number Diff line change
@@ -424,7 +424,11 @@ export class Panel extends LitElement implements InteractiveComponent, LoadableC

private renderHeaderSlottedContent(): JsxNode {
return (
<div class={CSS.headerContent} hidden={!this.hasHeaderContent} key="slotted-header-content">
<div
class={{ [CSS.headerContent]: true, [CSS.headerSlottedContent]: true }}
hidden={!this.hasHeaderContent}
key="slotted-header-content"
>
<slot name={SLOTS.headerContent} onSlotChange={this.handleHeaderContentSlotChange} />
</div>
);
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@ export const CSS = {
footerActions: "footer-actions",
footerStart: "footer-start",
footerEnd: "footer-end",
headerSlottedContent: "header-slotted-content",
};

export const IDS = {
221 changes: 220 additions & 1 deletion packages/calcite-components/src/demos/panel.html
Original file line number Diff line number Diff line change
@@ -32,9 +32,31 @@
margin: 60px 0;
border-top: 1px solid var(--calcite-color-border-2);
}

.themed-panel {
--calcite-panel-corner-radius: 12px;
--calcite-panel-heading-text-color: darkgreen;
--calcite-panel-description-text-color: lightgreen;
--calcite-panel-background-color: yellow;
--calcite-panel-header-background-color: orange;
--calcite-panel-footer-background-color: red;

--calcite-panel-border-color: lime;

--calcite-panel-space: 2rem;
--calcite-panel-header-content-space: 0;
--calcite-panel-footer-space: 0;

--calcite-action-background-color: lime;
--calcite-action-background-color-hover: lime;
--calcite-action-background-color-pressed: lime;
--calcite-action-text-color: blue;
--calcite-action-text-color-pressed: blue;
--calcite-popover-border-color: blue;
}
</style>

<script src="./_assets/head.ts"></script>
<script src="./_assets/head.js"></script>
</head>

<body>
@@ -61,6 +83,16 @@
</div>
</div>

<!-- no content -->
<div class="parent">
<div class="child right-aligned-text">no content</div>
<div class="child">
<calcite-panel height-scale="s" heading="Header!">
<p slot="footer">Footer!</p>
</calcite-panel>
</div>
</div>

<!-- with action bar and content top-->
<div class="parent">
<div class="child right-aligned-text">Slotted Action Bar + Slotted Content Top</div>
@@ -283,6 +315,193 @@
</div>
</div>
</div>
<!-- themed -->
<div class="parent">
<div class="child right-aligned-text">themed inactive theme collapsed</div>
<div class="child">
<calcite-panel
heading="Terms and conditions"
description="Something great about this"
closable
collapsible
collapsed
>
<calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
<calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
<calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
<div slot="content-top">To continue, you must agree to the terms</div>
<calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
<calcite-checkbox></calcite-checkbox>I agree to the terms
</calcite-label>
<p>
Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
porttitor est sed, vestibulum risus. Integer non erat libero.
</p>
<p>
Cras sagittis vel neque sed efficitur. Vestibulum mattis diam eget urna condimentum tempus. Donec
malesuada velit sit amet metus faucibus pharetra. Sed sit amet massa facilisis, porttitor nunc vitae,
sollicitudin mauris. Nullam nec rhoncus augue. Praesent rhoncus varius sapien, sit amet porttitor nisl
varius eu. Pellentesque at eros eget metus dignissim lacinia. Sed sed justo eget sapien ultrices commodo.
Donec eget pretium urna. Vestibulum ut tortor ut quam viverra dictum. Morbi ut turpis velit. Phasellus
maximus lacus nunc, ac consequat est varius in. Nullam facilisis, purus ut aliquet condimentum, est tortor
accumsan justo, at sagittis urna dolor eget lacus. Interdum et malesuada fames ac ante ipsum primis in
faucibus.
</p>
<p>
Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
porttitor est sed, vestibulum risus. Integer non erat libero.
</p>
<calcite-button slot="footer-end"> I'm done </calcite-button>
</calcite-panel>
</div>
</div>
<!-- themed -->
<div class="parent">
<div class="child right-aligned-text">themed inactive theme</div>
<div class="child">
<calcite-panel heading="Terms and conditions" description="Something great about this" closable collapsible>
<calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
<calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
<calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
<div slot="content-top">To continue, you must agree to the terms</div>
<calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
<calcite-checkbox></calcite-checkbox>I agree to the terms
</calcite-label>
<p>
Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
porttitor est sed, vestibulum risus. Integer non erat libero.
</p>
<p>
Cras sagittis vel neque sed efficitur. Vestibulum mattis diam eget urna condimentum tempus. Donec
malesuada velit sit amet metus faucibus pharetra. Sed sit amet massa facilisis, porttitor nunc vitae,
sollicitudin mauris. Nullam nec rhoncus augue. Praesent rhoncus varius sapien, sit amet porttitor nisl
varius eu. Pellentesque at eros eget metus dignissim lacinia. Sed sed justo eget sapien ultrices commodo.
Donec eget pretium urna. Vestibulum ut tortor ut quam viverra dictum. Morbi ut turpis velit. Phasellus
maximus lacus nunc, ac consequat est varius in. Nullam facilisis, purus ut aliquet condimentum, est tortor
accumsan justo, at sagittis urna dolor eget lacus. Interdum et malesuada fames ac ante ipsum primis in
faucibus.
</p>
<p>
Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
porttitor est sed, vestibulum risus. Integer non erat libero.
</p>
<calcite-button slot="footer-end"> I'm done </calcite-button>
</calcite-panel>
</div>
</div>
<!-- themed -->
<div class="parent">
<div class="child right-aligned-text">themed</div>
<div class="child">
<calcite-panel
class="themed-panel"
heading="Terms and conditions"
description="Something great about this"
closable
collapsible
>
<calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
<calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
<calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
<div slot="content-top">To continue, you must agree to the terms</div>
<calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
<calcite-checkbox></calcite-checkbox>I agree to the terms
</calcite-label>
<p>
Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
porttitor est sed, vestibulum risus. Integer non erat libero.
</p>
<p>
Cras sagittis vel neque sed efficitur. Vestibulum mattis diam eget urna condimentum tempus. Donec
malesuada velit sit amet metus faucibus pharetra. Sed sit amet massa facilisis, porttitor nunc vitae,
sollicitudin mauris. Nullam nec rhoncus augue. Praesent rhoncus varius sapien, sit amet porttitor nisl
varius eu. Pellentesque at eros eget metus dignissim lacinia. Sed sed justo eget sapien ultrices commodo.
Donec eget pretium urna. Vestibulum ut tortor ut quam viverra dictum. Morbi ut turpis velit. Phasellus
maximus lacus nunc, ac consequat est varius in. Nullam facilisis, purus ut aliquet condimentum, est tortor
accumsan justo, at sagittis urna dolor eget lacus. Interdum et malesuada fames ac ante ipsum primis in
faucibus.
</p>
<p>
Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
porttitor est sed, vestibulum risus. Integer non erat libero.
</p>
<calcite-button slot="footer-end"> I'm done </calcite-button>
</calcite-panel>
</div>
</div>
<!-- themed -->
<div class="parent">
<div class="child right-aligned-text">themed with header-content slotted</div>
<div class="child">
<calcite-panel
class="themed-panel"
heading="Terms and conditions"
description="Something great about this"
closable
collapsible
>
<div slot="header-content" placeholder="Example" style="height: 100%; background: pink">Custom Div</div>
<calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
<calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
<calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
<div slot="content-top">To continue, you must agree to the terms</div>
<calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
<calcite-checkbox></calcite-checkbox>I agree to the terms
</calcite-label>
<p>
Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
porttitor est sed, vestibulum risus. Integer non erat libero.
</p>
<p>
Cras sagittis vel neque sed efficitur. Vestibulum mattis diam eget urna condimentum tempus. Donec
malesuada velit sit amet metus faucibus pharetra. Sed sit amet massa facilisis, porttitor nunc vitae,
sollicitudin mauris. Nullam nec rhoncus augue. Praesent rhoncus varius sapien, sit amet porttitor nisl
varius eu. Pellentesque at eros eget metus dignissim lacinia. Sed sed justo eget sapien ultrices commodo.
Donec eget pretium urna. Vestibulum ut tortor ut quam viverra dictum. Morbi ut turpis velit. Phasellus
maximus lacus nunc, ac consequat est varius in. Nullam facilisis, purus ut aliquet condimentum, est tortor
accumsan justo, at sagittis urna dolor eget lacus. Interdum et malesuada fames ac ante ipsum primis in
faucibus.
</p>
<p>
Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
Aenean sodales sollicitudin dui in fermentum. Fusce egestas erat nec eros sodales ornare. Ut malesuada est
tortor, vitae semper turpis rutrum at. Donec suscipit, nulla in euismod luctus, nulla sapien interdum
tortor, a iaculis elit mi sed lectus. Morbi in congue metus, non imperdiet ex. Nunc et neque tempor,
porttitor est sed, vestibulum risus. Integer non erat libero.
</p>
<calcite-button slot="footer-end"> I'm done </calcite-button>
</calcite-panel>
</div>
</div>
</demo-dom-swapper>
</body>
</html>