@swiftwc/ui 0.0.0-dev.91 → 0.0.0-dev.93

package/generated/components/tool-bar.js

@@ -5,16 +5,16 @@ const observers = new ResizeObserverSingleton();
 /**
  * @summary Populates the toolbar or navigation bar with the specified items.
  *
- * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
- * @slot primary-action - The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
- * @slot confirmation-action - The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
- * @slot destructive-action - The item represents a destructive action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
- * @slot top-bar-leading - Places the item in the leading edge of the top bar
- * @slot top-bar-principal - Places the item in the middle of the top bar
- * @slot top-bar-trailing - Places the item in the trailing edge of the top bar
- * @slot bottom-bar-leading - Places the item in the leading edge of the bottom bar
- * @slot bottom-bar-principal - Places the item in the middle of the bottom bar
- * @slot bottom-bar-trailing - Places the item in the trailing edge of the bottom bar
+ * @slot cancellation-action — The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot primary-action — The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot confirmation-action — The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot destructive-action — The item represents a destructive action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
+ * @slot top-bar-leading — Places the item in the leading edge of the top bar
+ * @slot top-bar-principal — Places the item in the middle of the top bar
+ * @slot top-bar-trailing — Places the item in the trailing edge of the top bar
+ * @slot bottom-bar-leading — Places the item in the leading edge of the bottom bar
+ * @slot bottom-bar-principal — Places the item in the middle of the bottom bar
+ * @slot bottom-bar-trailing — Places the item in the trailing edge of the bottom bar
  */
 export class ToolBar extends HTMLElement {
     static #template;

package/generated/components/v-keyboard.d.ts

@@ -4,7 +4,7 @@
  *
  * @summary Required component, used to handle the virtual keyboard on touch devices.
  *
- * @attr {Inter} system-font - Prefers the "Inter" font family, if loaded.
+ * @attr {Inter} system-font — Prefers the "Inter" font family, if loaded.
  */
 export declare class VKeyboard extends HTMLElement {
     #private;

package/generated/components/v-keyboard.js

@@ -8,7 +8,7 @@ import { Snapshot } from '../snapshot';
  *
  * @summary Required component, used to handle the virtual keyboard on touch devices.
  *
- * @attr {Inter} system-font - Prefers the "Inter" font family, if loaded.
+ * @attr {Inter} system-font — Prefers the "Inter" font family, if loaded.
  */
 export class VKeyboard extends HTMLElement {
     /**

package/generated/components/v-stack.d.ts

@@ -1,15 +1,15 @@
 /**
- * @summary A view that arranges its subviews in a vertical line.
+ * @summary A view that arranges its children one on top of the other.
  *
- * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution - The distribution of cols
+ * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
  *
- * @attr {@templateSet} template - The main-axis grid template
+ * @attr {@templateSet} template — The main-axis grid template
  *
- * @attr {@spacingSet} spacing - The gap between the primary axis
+ * @attr {@spacingSet} spacing — The gap between the primary axis
  *
- * @attr {@inlineSet} alignment - The cross-axis alignment
- * @attr {@blockSet} distribution - The main-axis alignment
- * @attr {@blockPlacementSet} placement - The main-axis alignment
+ * @attr {@inlineSet} alignment — The cross-axis alignment
+ * @attr {@blockSet} distribution — The main-axis alignment
+ * @attr {@blockPlacementSet} placement — The main-axis alignment
  *
  */
 export declare class VStack extends HTMLElement {

package/generated/components/v-stack.js

@@ -1,16 +1,16 @@
 import { devFlags } from '../internal/utils';
 /**
- * @summary A view that arranges its subviews in a vertical line.
+ * @summary A view that arranges its children one on top of the other.
  *
- * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution - The distribution of cols
+ * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
  *
- * @attr {@templateSet} template - The main-axis grid template
+ * @attr {@templateSet} template — The main-axis grid template
  *
- * @attr {@spacingSet} spacing - The gap between the primary axis
+ * @attr {@spacingSet} spacing — The gap between the primary axis
  *
- * @attr {@inlineSet} alignment - The cross-axis alignment
- * @attr {@blockSet} distribution - The main-axis alignment
- * @attr {@blockPlacementSet} placement - The main-axis alignment
+ * @attr {@inlineSet} alignment — The cross-axis alignment
+ * @attr {@blockSet} distribution — The main-axis alignment
+ * @attr {@blockPlacementSet} placement — The main-axis alignment
  *
  */
 export class VStack extends HTMLElement {

package/generated/css/index.css

@@ -1070,6 +1070,7 @@
   :where(navigation-stack:not([hidden]),
   navigation-split-view:not([hidden]),
   navigation-large-title:not([hidden]),
+  navigation-title:not([hidden]),
   scroll-view:not([hidden]),
   body-view:not([hidden]),
   tab-view:not([hidden]),
@@ -1093,7 +1094,7 @@
   [is=glass-prominent-button]:not([hidden]),
   list-view:not([hidden]),
   table-view:not([hidden]),
-  content-unavailable-view:not([hidden]),
+  content-unavailable:not([hidden]),
   progress-view:not([hidden]),
   tool-bar-item:not([hidden]),
   tool-bar-item-group:not([hidden]),
@@ -1119,9 +1120,9 @@
   :where(labeled-content)::part(labeled-content-label-stack),
   :where(labeled-content)::part(labeled-content-value-stack),
   :where(progress-view)::part(progress-control),
-  :where(content-unavailable-view)::part(content-unavailable-title-stack),
-  :where(content-unavailable-view)::part(content-unavailable-description-stack),
-  :where(content-unavailable-view)::part(content-unavailable-actions-stack),
+  :where(content-unavailable)::part(content-unavailable-title-stack),
+  :where(content-unavailable)::part(content-unavailable-description-stack),
+  :where(content-unavailable)::part(content-unavailable-actions-stack),
   :where(table-view)::part(table-container),
   :where(table-view)::part(table-column-stack),
   :where(table-view)::part(table-header-stack),
@@ -1745,7 +1746,7 @@
   }
 }
 @layer sw-components {
-  :where(content-unavailable-view) {
+  :where(content-unavailable) {
     place-content: center;
     place-items: center;
     text-align: center;
@@ -1753,24 +1754,24 @@
     padding-inline: 1rem;
     padding-block: 1rem;
   }
-  :where(content-unavailable-view)::part(content-unavailable-actions-stack), :where(content-unavailable-view)::part(content-unavailable-title-stack), :where(content-unavailable-view)::part(content-unavailable-description-stack) {
+  :where(content-unavailable)::part(content-unavailable-actions-stack), :where(content-unavailable)::part(content-unavailable-title-stack), :where(content-unavailable)::part(content-unavailable-description-stack) {
     max-inline-size: 20rem;
   }
-  :where(content-unavailable-view)::part(content-unavailable-actions-stack) {
+  :where(content-unavailable)::part(content-unavailable-actions-stack) {
     row-gap: 0.2rem;
   }
-  :where(content-unavailable-view)::part(content-unavailable-title-stack) {
+  :where(content-unavailable)::part(content-unavailable-title-stack) {
     --label-flow: vertical;
     --label-font: title3;
   }
-  :where(content-unavailable-view > :not([slot])) {
+  :where(content-unavailable > :not([slot])) {
     --label-image-size: 5;
     --label-gap: 1;
   }
-  :where(content-unavailable-view:not(:has(> [slot=description])))::part(content-unavailable-description-stack) {
+  :where(content-unavailable:not(:has(> [slot=description])))::part(content-unavailable-description-stack) {
     display: none;
   }
-  :where(content-unavailable-view:not(:has(> [slot=actions])))::part(content-unavailable-actions-stack) {
+  :where(content-unavailable:not(:has(> [slot=actions])))::part(content-unavailable-actions-stack) {
     display: none;
   }
 }
@@ -3395,7 +3396,7 @@
     --toggle--trigger-bg: lightgray;
   }
   :where(toggle-view)::part(toggle-stack) {
-    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr) auto;
     grid-template-rows: minmax(0, 1fr);
     column-gap: var(--labeled-content-column-gap);
   }
@@ -3490,6 +3491,16 @@
   labeled-content > [slot=header],
   labeled-content > [slot=footer]) {
     color: var(--secondary);
+    --label-font: callout;
+  }
+  @supports not (x: if(else:red)) {
+    :where(labeled-content > :nth-child(n+2 of [slot=label]),
+    labeled-content > [slot=header],
+    labeled-content > [slot=footer]) {
+      --label--titlestack-font-size: var(--label-callout-font-size);
+      --label--titlestack-line-height: var(--label-callout-line-height);
+      --label--titlestack-font-weight: var(--label-callout-font-weight);
+    }
   }
 }
 @layer sw-components {}
@@ -3512,11 +3523,7 @@
     padding-block: 1rem;
   }
 }
-@layer sw-components {
-  :where(navigation-title) {
-    display: grid;
-  }
-}
+@layer sw-components {}
 @layer sw-components {
   :where(tab-view:not([tab-view-style=tab-bar-only]) > sidebar-toggle, navigation-split-view > sidebar-toggle) {
     position: fixed;

package/generated/events/scroll-view.js

@@ -1,5 +1 @@
 export {};
-// export interface ScrollViewEventMap {
-//   pagereveal: CustomEvent<PageRevealSwapDetail>
-//   pageswap: CustomEvent<PageRevealSwapDetail>
-// }

package/generated/events/text-field.js

@@ -1,4 +1 @@
 export {};
-// export interface TextFieldEventMap {
-//   commit: CustomEvent<TextFieldCommitDetail>
-// }

package/generated/events/toggle-view.js

@@ -1,4 +1 @@
 export {};
-// export interface ToggleViewEventMap {
-//   'toggle:change': CustomEvent<ToggleChangeDetail>
-// }

package/generated/internal/utils/ensure-placeholder.js

@@ -1,63 +1,10 @@
 import { I18n } from '../../i18n';
 import { html, queryMorph } from '../../morphdom';
-// type ButtonRole = keyof ReturnType<typeof I18n.t<'ButtonRole'>>
-// function renderPlaceholder(el: HTMLElement, role: string | null, titleKey?: ButtonRole, config?: Record<string, string>) {
-//   // if (!el.isConnected) return
-//   // self.requestAnimationFrame(() => {
-//   //   if (!el.isConnected) return
-//   let title: string | undefined, systemImage: string | undefined
-//   // const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view slot="placeholder"></label-view>`, '>1'))
-//   switch (role) {
-//     case 'cancel':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel)
-//       systemImage = config?.['cancel-button-icon'] ?? '' //label.setAttribute('system-image', config?.['cancel-button-icon'] ?? '')
-//       break
-//     case 'close':
-//       if (el.closest('[is=alert-dialog]')) {
-//         title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').OK //.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').OK)
-//       } else {
-//         title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Close //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Close)
-//         systemImage = config?.['close-button-icon'] ?? '' //label.setAttribute('system-image', config?.['close-button-icon'] ?? '')
-//       }
-//       break
-//     case 'confirm':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm)
-//       systemImage = config?.['confirm-button-icon'] ?? '' //label.setAttribute('system-image', config?.['confirm-button-icon'] ?? '')
-//       break
-//     case 'confirmation-action':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Confirm)
-//       systemImage = config?.['confirm-button-icon'] ?? '' //label.setAttribute('system-image', config?.['confirm-button-icon'] ?? '')
-//       break
-//     case 'cancellation-action':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel //label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Cancel)
-//       systemImage = config?.['cancel-button-icon'] ?? '' //label.setAttribute('system-image', config?.['cancel-button-icon'] ?? '')
-//       break
-//     case 'destructive':
-//       title = titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Destructive // label.setAttribute('title', titleKey && titleKey in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[titleKey] : I18n.t('ButtonRole').Destructive)
-//       systemImage = config?.['delete-button-icon'] ?? '' // label.setAttribute('system-image', config?.['delete-button-icon'] ?? '')
-//       break
-//     // default:
-//     //   label?.remove()
-//     //   break
-//   }
-//   queryMorph(
-//     '[slot=placeholder]',
-//     html`<label-view slot="placeholder">${systemImage ? html`<image-view slot="icon" system-name="${systemImage}"></image-view>` : null}${title ? html`<span>${title}</span>` : null}</label-view>`,
-//     el,
-//     { removeIf: !title }
-//   )
-//   // if (role) {
-//   //   label.setAttribute('title', I18n.t('ButtonRole').Default.Destructive)
-//   // } else label?.remove()
-//   // })
-// }
 export default function (target, role, titleKey, config) {
     if (!target)
         return;
     const overiderTitle = typeof titleKey === 'string' && titleKey in I18n.t('ButtonRole') ? titleKey : undefined;
-    // renderPlaceholder(target, role, overiderTitle, config)
     let title, systemImage;
-    // const label = el.querySelector(':scope>[slot=placeholder]') ?? el.appendChild($(`<label-view slot="placeholder"></label-view>`, '>1'))
     switch (role) {
         case 'cancel':
             title = overiderTitle && overiderTitle in I18n.t('ButtonRole') ? I18n.t('ButtonRole')[overiderTitle] : I18n.t('ButtonRole').Cancel;
@@ -90,6 +37,4 @@ export default function (target, role, titleKey, config) {
             break;
     }
     queryMorph('[slot=placeholder]', html `<label-view slot="placeholder">${systemImage ? html `<image-view slot="icon" system-name="${systemImage}"></image-view>` : null}${title ? html `<span>${title}</span>` : null}</label-view>`, target, { removeIf: !title });
-    // CleanupRegistry.unregister(target, 'i18n')
-    // CleanupRegistry.register(target, onoff('localechange', () => renderPlaceholder(target, role, overiderTitle), I18n.on).on(), 'i18n')
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.91",
+  "version": "0.0.0-dev.93",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -50,7 +50,8 @@
     "./css": "./generated/css/index.css",
     "./scss": "./scss/index.scss",
     "./scss/*": "./scss/*.scss",
-    "./customElements/en": "./custom-elements/en.json"
+    "./customElements/en": "./custom-elements/en.json",
+    "./webComponentsHTMLData/en": "./web-components.html-data/en.json"
   },
   "bin": {
     "swiftwc": "./generated/index.js"

package/scss/_components.scss

@@ -21,7 +21,7 @@
 
 @forward 'components/sheet-view';
 
-@forward 'components/content-unavailable-view';
+@forward 'components/content-unavailable';
 
 @forward 'components/confirmation-dialog';
 @forward 'components/alert-dialog';

package/scss/components/{_content-unavailable-view.scss → _content-unavailable.scss}

@@ -3,7 +3,7 @@
 @use '../placeholders';
 
 @layer #{vars.$components-layer} {
-  content-unavailable-view {
+  content-unavailable {
     :where(&) {
       place-content: center;
       place-items: center;

package/scss/components/_index.scss

@@ -7,6 +7,7 @@
   navigation-stack,
   navigation-split-view,
   navigation-large-title,
+  navigation-title,
   scroll-view,
   body-view,
   tab-view,
@@ -30,7 +31,7 @@
   [is='glass-prominent-button'],
   list-view,
   table-view,
-  content-unavailable-view,
+  content-unavailable,
   progress-view,
   tool-bar-item,
   tool-bar-item-group,
@@ -59,9 +60,9 @@
   :where(labeled-content)::part(labeled-content-label-stack),
   :where(labeled-content)::part(labeled-content-value-stack),
   :where(progress-view)::part(progress-control),
-  :where(content-unavailable-view)::part(content-unavailable-title-stack),
-  :where(content-unavailable-view)::part(content-unavailable-description-stack),
-  :where(content-unavailable-view)::part(content-unavailable-actions-stack),
+  :where(content-unavailable)::part(content-unavailable-title-stack),
+  :where(content-unavailable)::part(content-unavailable-description-stack),
+  :where(content-unavailable)::part(content-unavailable-actions-stack),
   :where(table-view)::part(table-container),
   :where(table-view)::part(table-column-stack),
   :where(table-view)::part(table-header-stack),

package/scss/components/_labeled-content.scss

@@ -1,4 +1,6 @@
+@use 'sass:string';
 @use '../vars';
+@use '../mixins';
 
 @layer #{vars.$components-layer} {
   labeled-content {
@@ -61,6 +63,12 @@
     > [slot='footer'] {
       :where(&) {
         color: var(--secondary);
+
+        --label-font: callout;
+
+        @supports not (x: #{string.unquote('if(else:red)')}) {
+          @include mixins.set-label-font(callout);
+        }
       }
     }
   }

package/scss/components/_navigation-title.scss

@@ -4,7 +4,7 @@
 @layer #{vars.$components-layer} {
   navigation-title {
     :where(&) {
-      display: grid; //contents;
+      // display: grid; //contents;
     }
   }
 }

package/scss/components/_toggle-view.scss

@@ -12,7 +12,7 @@
       --toggle--trigger-bg: lightgray;
 
       &::part(toggle-stack) {
-        grid-template-columns: auto minmax(0, 1fr);
+        grid-template-columns: minmax(0, 1fr) auto;
 
         grid-template-rows: minmax(0, 1fr);