@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/dialog/dialog.component.js

@@ -1,79 +1,116 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import dialogStyles from "./dialog.css" with { type: "css" };
+import { LitElement, nothing } from 'lit';
+import { html } from 'lit/static-html.js';
+import { SlotPresenceController } from '../../lib/slot-presence-controller.js';
+import dialogStyles from './dialog.css' with { type: 'css' };
+
+// Safari does not implement closedby; the attribute is only added when supported.
+const supportsClosedBy =
+  typeof HTMLDialogElement !== 'undefined' && 'closedBy' in HTMLDialogElement.prototype;
 
 export class GrantCodesDialog extends LitElement {
-	// Styles are scoped to this element: they won't conflict with styles
-	// on the main page or in other components. Styling API can be exposed
-	// via CSS custom properties.
-	static styles = [dialogStyles];
-
-	static properties = {
-		open: { type: Boolean, reflect: true },
-		dismissible: { type: Boolean },
-	};
-
-	constructor() {
-		super();
-
-		this.dialog;
-
-		this.open = false;
-		this.dismissible = true;
-	}
-
-	firstUpdated() {
-		this.dialog = this.renderRoot.querySelector("dialog");
-	}
-
-	updated(changedProperties) {
-		if (changedProperties.has("open")) {
-			this._handleOpenChange();
-		}
-	}
-
-	_handleOpenChange() {
-		if (!this.dialog) return;
-		if (this.open) {
-			this.dialog.showModal();
-		} else {
-			this.dialog.close();
-		}
-	}
-
-	dismissTemplate() {
-		if (!this.dismissible) {
-			return html``;
-		}
-
-		return html`
+  // Styles are scoped to this element: they won't conflict with styles
+  // on the main page or in other components. Styling API can be exposed
+  // via CSS custom properties.
+  static styles = [dialogStyles];
+
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    dismissible: { type: Boolean },
+    _hasHeader: { state: true },
+    _hasFooter: { state: true },
+  };
+
+  constructor() {
+    super();
+
+    this.dialog;
+
+    this.open = false;
+    this.dismissible = true;
+    this._hasHeader = false;
+    this._hasFooter = false;
+
+    this._headerPresence = new SlotPresenceController(this, 'header', (present) => {
+      this._hasHeader = present;
+    });
+    this._footerPresence = new SlotPresenceController(this, 'footer', (present) => {
+      this._hasFooter = present;
+    });
+  }
+
+  _handleSlotChange() {
+    this._headerPresence.refresh();
+    this._footerPresence.refresh();
+  }
+
+  firstUpdated() {
+    this.dialog = this.renderRoot.querySelector('dialog');
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('open')) {
+      this._handleOpenChange();
+    }
+  }
+
+  _handleOpenChange() {
+    if (!this.dialog) return;
+    if (this.open) {
+      if (!this.dialog.open) {
+        this.dialog.showModal();
+      }
+    } else if (this.dialog.open) {
+      this.dialog.close();
+    }
+  }
+
+  // Esc and light-dismiss close the native dialog without touching `open`.
+  _handleNativeClose() {
+    this.open = false;
+  }
+
+  _handleNativeCancel() {
+    this.open = false;
+  }
+
+  dismissTemplate() {
+    if (!this.dismissible) {
+      return html``;
+    }
+
+    return html`
       <button
         class="dialog__dismiss"
         @click=${() => {
-					this.open = false;
-				}}
+          this.open = false;
+        }}
         aria-label="Dismiss dialog"
       >
         &times;
       </button>
     `;
-	}
+  }
 
-	render() {
-		return html`
-	      <dialog class="dialog" ?open=${this.open}>
+  render() {
+    return html`
+	      <dialog
+        class="dialog"
+        closedby=${supportsClosedBy && this.dismissible ? 'any' : nothing}
+        @close=${this._handleNativeClose}
+        @cancel=${this._handleNativeCancel}
+      >
         ${this.dismissTemplate()}
 
-        <header class="dialog__header">
-          <slot name="header"></slot>
+        <header class="dialog__header" ?hidden=${!this._hasHeader}>
+          <slot name="header" @slotchange=${this._handleSlotChange}></slot>
         </header>
 
         <slot class="dialog__content"></slot>
 
-        <footer class="dialog__footer">
-          <slot name="footer"> </slot>
+        <footer class="dialog__footer" ?hidden=${!this._hasFooter}>
+          <slot name="footer" @slotchange=${this._handleSlotChange}></slot>
         </footer>
       </dialog>
     `;
-	}
+  }
 }

package/src/components/dialog/dialog.css

@@ -1,74 +1,69 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .dialog {
-	width: 100%;
-	padding: 0;
-	max-width: 1200px;
-	background: var(--g-color-background-default);
-	border-style: solid;
-	border-width: var(--g-border-width-sm);
-	border-color: var(--g-color-border-default);
-	border-radius: var(--g-border-radius-md);
-	overflow: hidden;
+  width: 100%;
+  padding: 0;
+  max-width: 1200px;
+  background: var(--g-color-background-default);
+  border-style: solid;
+  border-width: var(--g-border-width-sm);
+  border-color: var(--g-color-border-default);
+  border-radius: var(--g-border-radius-md);
+  overflow: hidden;
 }
 
 .dialog::backdrop {
-	position: fixed;
-	inset: 0;
-	background-color: rgba(0, 0, 0, 0.4);
-	backdrop-filter: blur(6px);
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(6px);
 }
 
 .dialog__dismiss {
-	display: block;
-	position: absolute;
-	border: none;
-	line-height: 1;
-	font-size: var(--g-typography-h4-font-size);
-	cursor: pointer;
-	background: transparent;
-	inset-block-start: var(--g-spacing-md);
-	inset-inline-end: var(--g-spacing-md);
-	margin-block-start: -0.25rem;
-	margin-inline-end: -0.25rem;
-	border-radius: 50%;
-	width: 2rem;
-	height: 2rem;
-	padding: var(--g-spacing-xs);
-	justify-content: center;
-	align-items: center;
+  display: block;
+  position: absolute;
+  border: none;
+  line-height: 1;
+  font-size: var(--g-typography-h4-font-size);
+  cursor: pointer;
+  background: transparent;
+  inset-block-start: calc(var(--g-spacing-xs) + var(--g-spacing-2xs));
+  inset-inline-end: calc(var(--g-spacing-xs) + var(--g-spacing-2xs));
+  border-radius: 50%;
+  inline-size: var(--g-size-touch-target);
+  block-size: var(--g-size-touch-target);
+  padding: var(--g-spacing-xs);
+  justify-content: center;
+  align-items: center;
 }
 
 .dialog__content {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	gap: var(--g-spacing-md);
-	padding: var(--g-spacing-md);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: var(--g-spacing-md);
+  padding: var(--g-spacing-md);
 }
 
-.dialog__header,
-.dialog__footer {
-	&:empty,
-	&:has(slot:empty) {
-		display: none;
-	}
+/* Needed because the display rules below are author-origin and outrank the UA [hidden] rule. */
+.dialog__header[hidden],
+.dialog__footer[hidden] {
+  display: none;
 }
 
 .dialog__header {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	padding: var(--g-spacing-md);
-	border-bottom: var(--g-border-width-sm) solid
-		var(--g-color-border-default);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--g-spacing-md);
+  border-bottom: var(--g-border-width-sm) solid var(--g-color-border-default);
 }
 
 .dialog__footer ::slotted(grantcodes-button-group) {
-	--g-border-radius-md: 0;
+  --g-border-radius-md: 0;
 }

package/src/components/dialog/dialog.js

@@ -1,6 +1,6 @@
-import { GrantCodesDialog } from "./dialog.component.js";
+import { GrantCodesDialog } from './dialog.component.js';
 
-export * from "./dialog.component.js";
+export * from './dialog.component.js';
 export default GrantCodesDialog;
 
-customElements.define("grantcodes-dialog", GrantCodesDialog);
+customElements.define('grantcodes-dialog', GrantCodesDialog);

package/src/components/dialog/dialog.react.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { GrantCodesDialog } from "./dialog.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesDialog } from './dialog.js';
 
 export const Dialog = createComponent({
-	tagName: "grantcodes-dialog",
-	elementClass: GrantCodesDialog,
-	react: React,
+  tagName: 'grantcodes-dialog',
+  elementClass: GrantCodesDialog,
+  react: React,
 });

package/src/components/dialog/dialog.stories.js

@@ -1,28 +1,27 @@
-import { html } from "lit/static-html.js";
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-const { events, args, argTypes, template } =
-	getStorybookHelpers("grantcodes-dialog");
-import "./dialog.js";
-import "../button/button.js";
-import "../button-group/button-group.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit/static-html.js';
+
+const { events, args, argTypes, template } = getStorybookHelpers('grantcodes-dialog');
+
+import './dialog.js';
+import '../button/button.js';
+import '../button-group/button-group.js';
 
 const meta = {
-	title: "Components/Dialog",
-	component: "grantcodes-dialog",
-	args: {
-		...args,
-		content: html`<p>This is the content of the dialog</p>`,
-		open: true,
-		dismissable: true,
-	},
-	argTypes,
-	decorators: [
-		(story) => html`<div style="min-height: 300px">${story()}</div>`,
-	],
-	render: (args) =>
-		template(
-			args,
-			html`
+  title: 'Components/Dialog',
+  component: 'grantcodes-dialog',
+  args: {
+    ...args,
+    content: html`<p>This is the content of the dialog</p>`,
+    open: true,
+    dismissible: true,
+  },
+  argTypes,
+  decorators: [(story) => html`<div style="min-height: 300px">${story()}</div>`],
+  render: (args) =>
+    template(
+      args,
+      html`
 				<h2 slot="header">Dialog Header</h2>
 				${args.content}
 				<grantcodes-button-group slot="footer">
@@ -30,14 +29,24 @@ const meta = {
 					<grantcodes-button>OK</grantcodes-button>
 				</grantcodes-button-group>
 			`,
-		),
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+    ),
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;
 
 export const Dialog = {};
+
+/**
+ * Body content only: an empty header or footer slot renders no bar at all.
+ */
+export const ContentOnly = {
+  args: {
+    content: html`<p>No header or footer content, so neither bar is drawn.</p>`,
+  },
+  render: (args) => template(args, args.content),
+};