@unofficialbox/box-open-elements 0.11.0 → 0.12.0

package/dist/components/feedback/alert.js

@@ -22,32 +22,27 @@ const alertStyles = `
     gap: ${boeSpace[3]};
     margin: ${boeSpace[3]} 0;
     padding: 14px 10px;
-    border: 1px solid var(--boe-token-text-text-secondary, #6f6f6f);
     border-radius: ${boeRadius.large};
     background: var(--boe-token-surface-surface-secondary, #f4f4f4);
     color: var(--boe-token-text-text, #222222);
-    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
   }
 
   [part="alert"][data-tone="info"] {
     background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, #fff);
-    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 50%, #fff);
   }
 
   [part="alert"][data-tone="success"] {
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 10%, #fff);
-    border-color: var(--boe-token-surface-status-surface-success, #26c281);
   }
 
   [part="alert"][data-tone="error"] {
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 10%, #fff);
-    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 50%, #fff);
   }
 
   [part="alert"][data-tone="warning"],
   [part="alert"][data-tone="inprogress"] {
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 10%, #fff);
-    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 50%, #fff);
   }
 
   [part="content"] {

package/dist/components/feedback/nudge.js

@@ -14,7 +14,6 @@ const nudgeStyles = `
     align-items: flex-start;
     gap: 0.55rem;
     padding: 0.55rem 0.7rem;
-    border: 1px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 24%, var(--boe-token-surface-surface, #ffffff));
     border-radius: ${boeRadius.large};
     background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #ffffff));
     color: var(--boe-token-text-text, #222222);

package/dist/components/feedback/toast.d.ts

@@ -38,12 +38,11 @@ export declare class Toast extends BaseElement {
     get heading(): string;
     set heading(value: string);
     /**
-     * Drop the outline for a softer, fill-only toast.
+     * @deprecated Every toast is borderless now, so this does nothing.
      *
-     * Purely presentational and handled entirely in CSS, so it is deliberately
-     * not an observed attribute — there is nothing to re-render. The default
-     * stays bordered: that outline tracks box-ui-elements' `.notification` and
-     * is pinned by the colour conformance manifest.
+     * Kept because it shipped in 0.11.0 and removing it would break hosts that
+     * set it for no benefit — what they asked for is what they already get. The
+     * attribute is still reflected so those hosts read back what they wrote.
      */
     get borderless(): boolean;
     set borderless(value: boolean);

package/dist/components/feedback/toast.js

@@ -37,11 +37,18 @@ const toastStyles = `
     display: none;
   }
 
-  /* Fill, border, text colour and shadow all track box-ui-elements'
-     .notification and are pinned by the colour conformance manifest — they are
-     deliberately not derived from the tone accent. The --toast-accent property
-     exists only to colour the status glyph, which upstream has no equivalent
-     for, so adding it costs no conformance. */
+  /* Fill, text colour and shadow track box-ui-elements' .notification and are
+     pinned by the colour conformance manifest — they are deliberately not
+     derived from the tone accent. The --toast-accent property exists only to
+     colour the status glyph, which upstream has no equivalent for, so adding it
+     costs no conformance.
+
+     There is no border. Upstream .notification has one, and box-open-elements
+     matched it until the outline was judged too heavy; the claim that pinned it
+     was retired rather than left describing something no longer painted. Tone
+     survives that in three places — the tinted fill, the full-strength glyph,
+     and the visually-hidden tone label — so it was never carried by the border
+     alone. */
   [part="toast"] {
     --toast-accent: var(--boe-token-text-text, #222222);
 
@@ -53,28 +60,14 @@ const toastStyles = `
     min-height: 48px;
     max-inline-size: min(100%, 572px);
     padding: 10px 10px 10px 20px;
-    border: 2px solid var(--boe-token-text-text, #222222);
     border-radius: ${boeRadius.large};
     background: var(--boe-token-surface-surface-secondary, #f4f4f4);
     color: var(--boe-token-text-text, #222222);
     box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
   }
 
-  /* Opt-in softer treatment: the outline goes, the geometry does not. Setting
-     the colour to transparent rather than the width to 0 keeps the 2px in the
-     box model, so a borderless toast is exactly the size of a bordered one and
-     the two can sit in the same stack without jumping. The background paints
-     under the border by default, so the fill simply extends into it.
-
-     The bordered default stays: the 2px solid text-colour rule below is pinned
-     by the colour conformance manifest against upstream's .notification, and
-     strict mode fails if that declaration goes. */
-  :host([borderless]) [part="toast"] {
-    border-color: transparent;
-  }
-
-  /* The neutral toast keeps upstream's grey fill and near-black border, so the
-     glyph is the only place the "this is information" signal can live. */
+  /* The neutral toast keeps upstream's grey fill, so the glyph is the only
+     place the "this is information" signal can live. */
   [part="toast"][data-tone="info"] {
     --toast-accent: var(--boe-token-surface-surface-brand, #0061d5);
   }
@@ -82,20 +75,17 @@ const toastStyles = `
   [part="toast"][data-tone="success"] {
     --toast-accent: var(--boe-token-surface-status-surface-success, #26c281);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 20%, #fff);
-    border-color: var(--boe-token-surface-status-surface-success, #26c281);
   }
 
   [part="toast"][data-tone="error"] {
     --toast-accent: var(--boe-token-surface-status-surface-error, #ed3757);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 20%, #fff);
-    border-color: var(--boe-token-surface-status-surface-error, #ed3757);
   }
 
   [part="toast"][data-tone="warning"],
   [part="toast"][data-tone="inprogress"] {
     --toast-accent: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 20%, #fff);
-    border-color: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
   }
 
   .sr-only {
@@ -304,12 +294,11 @@ export class Toast extends BaseElement {
         this.setAttribute("heading", value);
     }
     /**
-     * Drop the outline for a softer, fill-only toast.
+     * @deprecated Every toast is borderless now, so this does nothing.
      *
-     * Purely presentational and handled entirely in CSS, so it is deliberately
-     * not an observed attribute — there is nothing to re-render. The default
-     * stays bordered: that outline tracks box-ui-elements' `.notification` and
-     * is pinned by the colour conformance manifest.
+     * Kept because it shipped in 0.11.0 and removing it would break hosts that
+     * set it for no benefit — what they asked for is what they already get. The
+     * attribute is still reflected so those hosts read back what they wrote.
      */
     get borderless() {
         return this.hasAttribute("borderless");

package/dist/element-maps.d.ts

@@ -36,6 +36,7 @@ import type { CollaboratorAvatars } from "./patterns/share/collaborator-avatars.
 import type { ColorPicker } from "./components/forms/color-picker.js";
 import type { Combobox } from "./components/forms/combobox.js";
 import type { CommandPalette } from "./components/overlays/command-palette.js";
+import type { CommentThread } from "./patterns/comments/comment-thread.js";
 import type { CompareView } from "./patterns/diff/compare-view.js";
 import type { ContactDatalistItem } from "./components/identity/contact-datalist-item.js";
 import type { ContentExplorer } from "./patterns/content-explorer/content-explorer.js";
@@ -178,6 +179,7 @@ declare global {
         "box-color-picker": ColorPicker;
         "box-combobox": Combobox;
         "box-command-palette": CommandPalette;
+        "box-comment-thread": CommentThread;
         "box-compare-view": CompareView;
         "box-contact-datalist-item": ContactDatalistItem;
         "box-content-explorer": ContentExplorer;
@@ -291,4 +293,4 @@ declare global {
     }
 }
 /** Every element tag the library registers, for host-side narrowing. */
-export type BoxElementTagName = "box-access-stats" | "box-accordion" | "box-activity-density" | "box-agent-chat" | "box-alert" | "box-annotation-inspector" | "box-annotation-thread" | "box-annotation-toolbar" | "box-app-shell" | "box-audit-log" | "box-avatar" | "box-badge" | "box-badgeable" | "box-bar-chart" | "box-breadcrumb" | "box-bulk-action-bar" | "box-button" | "box-button-group" | "box-calendar" | "box-card" | "box-carousel" | "box-category-selector" | "box-chart-panel" | "box-checkbox" | "box-checkbox-group" | "box-chip" | "box-collaborator-avatars" | "box-color-picker" | "box-combobox" | "box-command-palette" | "box-compare-view" | "box-contact-datalist-item" | "box-content-explorer" | "box-content-picker" | "box-content-sidebar" | "box-content-uploader" | "box-context-menu" | "box-datalist-item" | "box-date-field" | "box-dialog" | "box-diff-viewer" | "box-divider" | "box-grid" | "box-donut-chart" | "box-draggable-list" | "box-drawer" | "box-drop-zone" | "box-dropdown" | "box-dual-listbox" | "box-due-badge" | "box-empty-state" | "box-error-mask" | "box-explorer-action-menu" | "box-explorer-breadcrumbs" | "box-explorer-items" | "box-explorer-list" | "box-explorer-table" | "box-explorer-toolbar" | "box-fieldset" | "box-file-request-builder" | "box-filter-bar" | "box-form-wizard" | "box-governance-panel" | "box-grid-view" | "box-guide-tooltip" | "box-help-text" | "box-icon-button" | "box-illustration" | "box-invite-collaborators-modal" | "box-item-details-panel" | "box-item-form" | "box-line-chart" | "box-lineage-graph" | "box-link-button" | "box-menu" | "box-menu-item" | "box-metadata-filter-builder" | "box-metadata-inspector" | "box-metric-card" | "box-multi-select" | "box-nav-sidebar" | "box-notification-bell" | "box-notification-inbox" | "box-nudge" | "box-number-input" | "box-pagination" | "box-permission-matrix" | "box-persona" | "box-pill-cloud" | "box-pill-selector-dropdown" | "box-popover" | "box-presence" | "box-preview-element" | "box-preview-header" | "box-progress-bar" | "box-progress-ring" | "box-progress-steps" | "box-provenance-strip" | "box-radio-group" | "box-range-slider" | "box-rating" | "box-review-queue-item" | "box-rich-text-input" | "box-run-trace" | "box-saved-view-picker" | "box-search-field" | "box-search-results-header" | "box-section" | "box-segmented-control" | "box-select" | "box-share-panel" | "box-shortcuts-overlay" | "box-sidebar-toggle-button" | "box-signature-ceremony" | "box-skeleton" | "box-slider" | "box-spin-button" | "box-spinner" | "box-split-view" | "box-path" | "box-switch" | "box-table" | "box-tabs" | "box-tag-input" | "box-task-assignment-panel" | "box-text-area" | "box-text-field" | "box-thumbnail-card" | "box-time-field" | "box-timeline" | "box-toast" | "box-tooltip" | "box-tree" | "box-tree-grid" | "box-unified-share-modal" | "box-version-graph" | "box-version-list" | "box-wizard-summary" | "box-work-queue" | "box-workload-board";
+export type BoxElementTagName = "box-access-stats" | "box-accordion" | "box-activity-density" | "box-agent-chat" | "box-alert" | "box-annotation-inspector" | "box-annotation-thread" | "box-annotation-toolbar" | "box-app-shell" | "box-audit-log" | "box-avatar" | "box-badge" | "box-badgeable" | "box-bar-chart" | "box-breadcrumb" | "box-bulk-action-bar" | "box-button" | "box-button-group" | "box-calendar" | "box-card" | "box-carousel" | "box-category-selector" | "box-chart-panel" | "box-checkbox" | "box-checkbox-group" | "box-chip" | "box-collaborator-avatars" | "box-color-picker" | "box-combobox" | "box-command-palette" | "box-comment-thread" | "box-compare-view" | "box-contact-datalist-item" | "box-content-explorer" | "box-content-picker" | "box-content-sidebar" | "box-content-uploader" | "box-context-menu" | "box-datalist-item" | "box-date-field" | "box-dialog" | "box-diff-viewer" | "box-divider" | "box-grid" | "box-donut-chart" | "box-draggable-list" | "box-drawer" | "box-drop-zone" | "box-dropdown" | "box-dual-listbox" | "box-due-badge" | "box-empty-state" | "box-error-mask" | "box-explorer-action-menu" | "box-explorer-breadcrumbs" | "box-explorer-items" | "box-explorer-list" | "box-explorer-table" | "box-explorer-toolbar" | "box-fieldset" | "box-file-request-builder" | "box-filter-bar" | "box-form-wizard" | "box-governance-panel" | "box-grid-view" | "box-guide-tooltip" | "box-help-text" | "box-icon-button" | "box-illustration" | "box-invite-collaborators-modal" | "box-item-details-panel" | "box-item-form" | "box-line-chart" | "box-lineage-graph" | "box-link-button" | "box-menu" | "box-menu-item" | "box-metadata-filter-builder" | "box-metadata-inspector" | "box-metric-card" | "box-multi-select" | "box-nav-sidebar" | "box-notification-bell" | "box-notification-inbox" | "box-nudge" | "box-number-input" | "box-pagination" | "box-permission-matrix" | "box-persona" | "box-pill-cloud" | "box-pill-selector-dropdown" | "box-popover" | "box-presence" | "box-preview-element" | "box-preview-header" | "box-progress-bar" | "box-progress-ring" | "box-progress-steps" | "box-provenance-strip" | "box-radio-group" | "box-range-slider" | "box-rating" | "box-review-queue-item" | "box-rich-text-input" | "box-run-trace" | "box-saved-view-picker" | "box-search-field" | "box-search-results-header" | "box-section" | "box-segmented-control" | "box-select" | "box-share-panel" | "box-shortcuts-overlay" | "box-sidebar-toggle-button" | "box-signature-ceremony" | "box-skeleton" | "box-slider" | "box-spin-button" | "box-spinner" | "box-split-view" | "box-path" | "box-switch" | "box-table" | "box-tabs" | "box-tag-input" | "box-task-assignment-panel" | "box-text-area" | "box-text-field" | "box-thumbnail-card" | "box-time-field" | "box-timeline" | "box-toast" | "box-tooltip" | "box-tree" | "box-tree-grid" | "box-unified-share-modal" | "box-version-graph" | "box-version-list" | "box-wizard-summary" | "box-work-queue" | "box-workload-board";

package/dist/entries/comment-thread.d.ts

@@ -0,0 +1 @@
+export * from "../patterns/comments/index.js";

package/dist/entries/comment-thread.js

@@ -0,0 +1 @@
+export * from "../patterns/comments/index.js";

package/dist/index.d.ts

@@ -110,6 +110,7 @@ export * from "./patterns/versions/index.js";
 export * from "./patterns/lineage/index.js";
 export * from "./patterns/agent-chat/index.js";
 export * from "./patterns/audit/index.js";
+export * from "./patterns/comments/index.js";
 export * from "./patterns/notifications/index.js";
 export * from "./patterns/search/index.js";
 export * from "./patterns/item/index.js";

package/dist/index.js

@@ -119,6 +119,7 @@ export * from "./patterns/versions/index.js";
 export * from "./patterns/lineage/index.js";
 export * from "./patterns/agent-chat/index.js";
 export * from "./patterns/audit/index.js";
+export * from "./patterns/comments/index.js";
 export * from "./patterns/notifications/index.js";
 // Patterns: compositions and workflow areas
 export * from "./patterns/search/index.js";

package/dist/patterns/comments/comment-thread.d.ts

@@ -0,0 +1,79 @@
+import { BaseElement } from "../../core/index.js";
+import type { CommentAction, CommentEntry } from "./types.js";
+/**
+ * A comment thread: authored entries, selection, actions, and a composer.
+ *
+ * Comments are a standalone concept. They hang off a file, a folder, a task or
+ * a contract clause just as readily as off a region of a document, so the
+ * thread does not know what it is attached to — a host that needs an anchor
+ * composes one on top. `box-annotation-thread` is exactly that: this component
+ * plus the document anchor, which is the only thing that makes an annotation an
+ * annotation.
+ *
+ * The extension points below (`threadStyles`, `headerExtras`, `defaultHeading`,
+ * `emptyText`, `entryBadge`, and the composer copy) exist so a subclass can
+ * specialise the chrome without reimplementing entry rendering, selection
+ * patching, or the composer.
+ */
+export declare class CommentThread extends BaseElement {
+    static readonly tagName: string;
+    static get observedAttributes(): string[];
+    protected titleEl: HTMLElement;
+    protected messageEl: HTMLElement;
+    protected entriesEl: HTMLElement;
+    protected emptyEl: HTMLElement;
+    protected actionsEl: HTMLElement;
+    protected composerEl: HTMLElement;
+    protected composerLabelEl: HTMLElement;
+    protected composerSubmitEl: HTMLElement;
+    protected composerInputEl: HTMLTextAreaElement;
+    private entriesSignature;
+    private actionsSignature;
+    /** Styles for the thread. Subclasses append rather than replace. */
+    protected threadStyles(): string;
+    /** Extra markup inside the header, after the message. Empty by default. */
+    protected headerExtras(): string;
+    /** Heading when the host sets none. */
+    protected defaultHeading(): string;
+    /** Text shown when there are no entries. */
+    protected emptyText(): string;
+    /** Label on the composer, and on its submit button. */
+    protected defaultComposerLabel(): string;
+    /** Placeholder in the composer input. */
+    protected defaultPlaceholder(): string;
+    /**
+     * The pill beside the author. Reads the generic `badge`; a subclass with its
+     * own vocabulary overrides this rather than forcing hosts to rename fields.
+     */
+    protected entryBadge(entry: CommentEntry): string | undefined;
+    get actions(): CommentAction[];
+    set actions(value: CommentAction[]);
+    get composable(): boolean;
+    set composable(value: boolean);
+    get entries(): CommentEntry[];
+    set entries(value: CommentEntry[]);
+    get message(): string;
+    set message(value: string);
+    get selectedEntryId(): string;
+    set selectedEntryId(value: string);
+    get heading(): string;
+    set heading(value: string);
+    /** Composer label and submit-button text. */
+    get composerLabel(): string;
+    set composerLabel(value: string);
+    get placeholder(): string;
+    set placeholder(value: string);
+    protected parseJsonAttribute<T>(name: string, fallback: T): T;
+    private emitAction;
+    private emitEntrySelected;
+    private submitComposer;
+    private entriesKey;
+    private actionsKey;
+    private rebuildEntries;
+    private patchEntrySelection;
+    private rebuildActions;
+    private patchActionLabels;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}