@flamingo-stack/openframe-frontend-core 0.0.781 → 0.0.783

package/src/components/ui/hover-dropdown.tsx

@@ -211,7 +211,7 @@ export function HoverDropdown({
             const secondaryAction = item.secondaryAction;
             const secondary = secondaryAction ? (
               <Button
-                variant="transparent"
+                variant="bare"
                 size="icon-sm"
                 type="button"
                 onClick={e => {

package/src/components/ui/info-card.tsx

@@ -303,7 +303,7 @@ function InfoCardValueRow({
           {icon}
           {copyable && (
             <Button
-              variant="transparent"
+              variant="bare"
               size="icon-inline"
               type="button"
               onClick={() => copy(value)}

package/src/components/ui/info-section.tsx

@@ -87,6 +87,8 @@ function TextValue({ value }: { value: InfoSectionTextValue }) {
           size="compact"
           noPaddingX
           type="button"
+          // The value reads in the primary text and takes the accent on hover.
+          data-tone="primary"
           href={href}
           openInNewTab={openInNewTab}
           onClick={href ? undefined : onClick}

package/src/components/ui/loading-scope.tsx

@@ -121,12 +121,13 @@ export function AnnouncedLoadingScope({
   children: ReactNode;
 }) {
   const outer = useLoadingScope();
+  // The status follows the content, so in a `space-y-*` stack it never pushes the content down (see LoadingRegion).
   return (
     <>
-      {status && active && !outer && <LoadingStatus label={label} />}
       <LoadingScope active={active} as={as} className={className}>
         {children}
       </LoadingScope>
+      {status && active && !outer && <LoadingStatus label={label} />}
     </>
   );
 }

package/src/components/ui/modal-v2.tsx

@@ -376,7 +376,7 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(({ children, cl
       <div className="flex min-w-0 flex-1 flex-col">{children}</div>
       {onClose && (
         <Button
-          variant="transparent"
+          variant="bare"
           size="icon-sm"
           type="button"
           onClick={onClose}

package/src/components/ui/organization-card.tsx

@@ -189,7 +189,9 @@ export function OrganizationCard({
       {/* Action button (top-right) - only if no device count */}
       {!deviceCount && showActionButton && actionButton && (
         <Button
-          variant={actionButton.variant === 'primary' ? 'accent' : 'transparent'}
+          variant={actionButton.variant === 'primary' ? 'accent' : 'bare'}
+          // The secondary action is a removal: the error colour on hover.
+          data-tone={actionButton.variant === 'primary' ? undefined : 'danger'}
           size="icon-sm"
           type="button"
           className="absolute right-2 top-2 z-10"

package/src/components/ui/page-actions.tsx

@@ -18,10 +18,22 @@ export type PageActionButton = {
   /** Click handler. Optional when `href` or `submenu` is provided. */
   onClick?: () => void;
   icon?: React.ReactNode;
-  /** `overlay` and `glyph` are media chrome and `link` an inline text action; none is a page action, and SplitButton has no divider colour for them. */
+  /** `overlay` and `glyph` are media chrome, `link` an inline text action and `bare` a glyph control; none is a page action, and SplitButton has no divider colour for them. */
   variant?: Exclude<
     ButtonProps['variant'],
-    'overlay' | 'glyph' | 'link' | 'inverted' | 'field' | 'row' | 'tab' | 'chip' | 'card' | 'cell'
+    | 'overlay'
+    | 'glyph'
+    | 'link'
+    | 'bare'
+    | 'inverted'
+    | 'field'
+    | 'row'
+    | 'rail'
+    | 'tab'
+    | 'segment'
+    | 'chip'
+    | 'card'
+    | 'cell'
   >;
   disabled?: boolean;
   /**

package/src/components/ui/password-input.tsx

@@ -23,7 +23,7 @@ const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(({ disabl
       className={cn('[&_input]:text-ellipsis', className)}
       endAdornment={
         <Button
-          variant="transparent"
+          variant="bare"
           size="icon-sm"
           type="button"
           tabIndex={-1}

package/src/components/ui/service-card.tsx

@@ -187,7 +187,7 @@ function ServiceCardRowItem({ row, loading: loadingProp }: { row: ServiceCardRow
         <div className={SERVICE_CARD_ACTIONS_CLASS}>
           {actions.reveal && (
             <Button
-              variant="transparent"
+              variant="bare"
               size="icon-sm"
               type="button"
               disabled={loading}
@@ -205,7 +205,7 @@ function ServiceCardRowItem({ row, loading: loadingProp }: { row: ServiceCardRow
 
           {actions.copy && (
             <Button
-              variant="transparent"
+              variant="bare"
               size="icon-sm"
               type="button"
               disabled={loading}
@@ -219,7 +219,7 @@ function ServiceCardRowItem({ row, loading: loadingProp }: { row: ServiceCardRow
 
           {actions.open && row.href && (
             <Button
-              variant="transparent"
+              variant="bare"
               size="icon-sm"
               type="button"
               disabled={loading}

package/src/components/ui/tab-selector.tsx

@@ -88,7 +88,9 @@ export function TabSelector({
 
           return (
             <Button
-              variant="tab"
+              // A segment of the control: the selected one is filled (the accent in `primary`, the raised surface in
+              // `secondary`), from its `data-state` and `data-tone`.
+              variant="segment"
               key={item.id}
               type="button"
               disabled={isDisabled}
@@ -96,10 +98,10 @@ export function TabSelector({
               aria-label={!item.label ? item.ariaLabel : undefined}
               aria-pressed={isActive}
               data-state={isActive ? 'active' : undefined}
-              data-emphasis={variant === 'primary' ? 'fade' : undefined}
+              data-tone={variant === 'primary' ? 'accent' : undefined}
               // scrollable: intrinsic widths must sum past the container or nothing ever overflows (flex-1's basis-0
               // defeats the scroll).
-              className={cn('h-full whitespace-nowrap', scrollable ? 'flex-none' : 'flex-1')}
+              className={cn('h-full', scrollable ? 'flex-none shrink-0 basis-auto' : 'flex-1')}
             >
               {item.icon && (
                 <span className="flex size-4 shrink-0 items-center justify-center content-md:size-6">{item.icon}</span>

package/src/components/ui/test-run.tsx

@@ -164,7 +164,8 @@ export function TestRunErrorBanner({ error, className }: { error: string; classN
     >
       <p className="min-w-0 break-words text-ods-error text-h4">{error}</p>
       <Button
-        variant="transparent"
+        variant="bare"
+        data-tone="error"
         size="icon-sm"
         type="button"
         aria-label="Copy error message"

package/src/components/ui/textarea.tsx

@@ -207,7 +207,9 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((allProps, ref)
 
       {endIconAsButton ? (
         <Button
-          variant="transparent"
+          // A field adornment: lit in the accent while the field has focus, the error colour while it is invalid.
+          variant="bare"
+          data-tone="field"
           size="icon-sm"
           type="button"
           aria-label={endIconButtonProps?.['aria-label'] ?? 'Submit'}

package/src/components/ui/ticket-attachments-list.tsx

@@ -67,7 +67,8 @@ export function TicketAttachmentsList({ attachments, className, size = 'default'
           </div>
           {attachment.onDelete && (
             <Button
-              variant="transparent"
+              variant="bare"
+              data-tone="danger"
               size="icon-sm"
               type="button"
               onClick={attachment.onDelete}
@@ -79,7 +80,7 @@ export function TicketAttachmentsList({ attachments, className, size = 'default'
           )}
           {attachment.onDownload && (
             <Button
-              variant="transparent"
+              variant="bare"
               size="icon-sm"
               type="button"
               onClick={attachment.onDownload}

package/src/components/ui/ticket-info-section.tsx

@@ -109,6 +109,7 @@ function InfoCell({
               size="compact"
               noPaddingX
               type="button"
+              data-tone="primary"
               onClick={onClick}
               className="min-w-0 max-w-full justify-start"
               title={value}

package/src/components/ui/ticket-note-card.tsx

@@ -66,7 +66,8 @@ export function TicketNoteCard({ note, onEdit, onDelete, className }: TicketNote
               <Input value={editText} onChange={e => setEditText(e.target.value)} onKeyDown={handleKeyDown} autoFocus />
             </div>
             <Button
-              variant="transparent"
+              variant="bare"
+              data-tone="success"
               size="icon-sm"
               type="button"
               onClick={handleSave}
@@ -77,7 +78,7 @@ export function TicketNoteCard({ note, onEdit, onDelete, className }: TicketNote
               <CheckIcon className="text-ods-success" />
             </Button>
             <Button
-              variant="transparent"
+              variant="bare"
               size="icon-sm"
               type="button"
               onClick={handleCancel}
@@ -100,7 +101,8 @@ export function TicketNoteCard({ note, onEdit, onDelete, className }: TicketNote
         <div className="flex shrink-0 items-center gap-4">
           {onDelete && (
             <Button
-              variant="transparent"
+              variant="bare"
+              data-tone="danger"
               size="icon-sm"
               type="button"
               onClick={() => onDelete(note.id)}
@@ -111,7 +113,7 @@ export function TicketNoteCard({ note, onEdit, onDelete, className }: TicketNote
           )}
           {onEdit && (
             <Button
-              variant="transparent"
+              variant="bare"
               size="icon-sm"
               type="button"
               onClick={() => setIsEditing(true)}

package/src/components/ui/ticket-status-config-row.tsx

@@ -246,12 +246,7 @@ export function TicketStatusConfigRow({
           {isSystem ? (
             <div className="flex w-11 justify-center content-md:w-12">
               <TouchFriendlyTooltip content={systemTooltip}>
-                <Button
-                  variant="transparent"
-                  size="icon-sm"
-                  type="button"
-                  aria-label={systemTooltip ?? 'System status'}
-                >
+                <Button variant="bare" size="icon-sm" type="button" aria-label={systemTooltip ?? 'System status'}>
                   <InfoCircleIcon size={24} />
                 </Button>
               </TouchFriendlyTooltip>

package/src/components/ui/toaster.tsx

@@ -76,7 +76,7 @@ function ToastHeader({
 
       {dismissible ? (
         <Button
-          variant="transparent"
+          variant="bare"
           size="icon-sm"
           type="button"
           aria-label="Close"

package/src/components/vendor-display-button.tsx

@@ -66,7 +66,7 @@ export function VendorDisplayButton({ vendor, onClick, variant = 'default', exte
 
   // Default variant
   return (
-    <Button variant="chip" onClick={handleClick} className={VENDOR_DISPLAY_BUTTON_LAYOUT_CLASS}>
+    <Button variant="chip" data-tone="accent" onClick={handleClick} className={VENDOR_DISPLAY_BUTTON_LAYOUT_CLASS}>
       {logoUrl ? (
         <div className={cn(VENDOR_DISPLAY_BUTTON_LOGO_CLASS, 'border border-ods-border bg-ods-card')}>
           <Image src={logoSrc} alt={`${vendor.title} logo`} width={20} height={20} className="rounded object-cover" />

package/dist/case-study-card-CYJ3JXU6.cjs

@@ -1,23 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
-"use client";
-
-
-var _chunkJQWYXC2Ecjs = require('./chunk-JQWYXC2E.cjs');
-require('./chunk-Q7HXTF2C.cjs');
-require('./chunk-HTSRCFXP.cjs');
-require('./chunk-S5C3OZCO.cjs');
-require('./chunk-4IYNDV3G.cjs');
-require('./chunk-DJTPDK3W.cjs');
-require('./chunk-7PNRXJX2.cjs');
-require('./chunk-NTPX5GXI.cjs');
-require('./chunk-IYU2ZH2J.cjs');
-require('./chunk-5GJM7VRR.cjs');
-require('./chunk-3VINTJPE.cjs');
-require('./chunk-UJ7AXHRZ.cjs');
-require('./chunk-YNDH72VU.cjs');
-require('./chunk-CDBFQVPA.cjs');
-require('./chunk-N6YCOBLK.cjs');
-require('./chunk-V45KLJQP.cjs');
-
-
-exports.CaseStudyCard = _chunkJQWYXC2Ecjs.CaseStudyCard;