@k2b/ui 0.33.0 → 0.34.0

package/dist/browser/layout/Settings.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/Settings.tsx"],"sourcesContent":["import { children, createMemo, createUniqueId, type JSX, Show } from \"solid-js\";\nimport { Button, type ButtonVariant } from \"../actions/Button\";\nimport { usePromptMessages } from \"../feedback/prompt-messages\";\nimport type { MaybeAccessor } from \"../inputs/field-contract\";\nimport { useSettingsMessages } from \"./settings-messages\";\n\nconst read = <T,>(value: MaybeAccessor<T>): T => (typeof value === \"function\" ? (value as () => T)() : value);\n\nexport type SettingsPageProps = {\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  children: JSX.Element;\n  footer?: JSX.Element;\n  scrollPreserveKey?: string;\n  class?: string;\n  style?: JSX.CSSProperties | string;\n};\n\nexport function SettingsPage(props: SettingsPageProps): JSX.Element {\n  return (\n    <section class={`k2b-settings-page${props.class ? ` ${props.class}` : \"\"}`} style={props.style}>\n      <header class=\"k2b-settings-page__header\">\n        <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n        <div class=\"k2b-settings-page__heading\">\n          <h1>{props.title}</h1>\n          <Show when={props.subtitle}>\n            <p>{props.subtitle}</p>\n          </Show>\n        </div>\n        <Show when={props.actions}>\n          <div class=\"k2b-settings-page__actions\">{props.actions}</div>\n        </Show>\n      </header>\n      <div class=\"k2b-settings-page__body\" data-scroll-preserve={props.scrollPreserveKey}>\n        {props.children}\n      </div>\n      <Show when={props.footer}>\n        <footer class=\"k2b-settings-page__footer\">{props.footer}</footer>\n      </Show>\n    </section>\n  );\n}\n\nexport type SettingsSectionProps = {\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  children: JSX.Element;\n  class?: string;\n};\n\n/**\n * A full-page settings group: a heading, optional actions and its fields on the\n * page surface without a card. Dialogs keep using PanelDialog.Section.\n */\nexport function SettingsSection(props: SettingsSectionProps): JSX.Element {\n  const headingId = `k2b-settings-section-${createUniqueId()}`;\n  return (\n    <section class={`k2b-settings-section${props.class ? ` ${props.class}` : \"\"}`} aria-labelledby={headingId}>\n      <header class=\"k2b-settings-section__header\">\n        <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n        <div class=\"k2b-settings-section__heading\">\n          <h2 id={headingId}>{props.title}</h2>\n          <Show when={props.subtitle}>\n            <p>{props.subtitle}</p>\n          </Show>\n        </div>\n        <Show when={props.actions}>\n          <div class=\"k2b-settings-section__actions\">{props.actions}</div>\n        </Show>\n      </header>\n      <div class=\"k2b-settings-section__body\">{props.children}</div>\n    </section>\n  );\n}\n\nconst SETTINGS_GROUP_ACTION = Symbol(\"SettingsGroup.Action\");\n\nexport type SettingsGroupProps = {\n  title: JSX.Element;\n  description?: JSX.Element;\n  children: JSX.Element;\n  class?: string;\n};\n\nexport type SettingsGroupActionProps = {\n  children: JSX.Element;\n};\n\ntype SettingsGroupActionDefinition = {\n  readonly kind: typeof SETTINGS_GROUP_ACTION;\n  readonly props: SettingsGroupActionProps;\n};\n\ntype SettingsGroupComponent = ((props: SettingsGroupProps) => JSX.Element) & {\n  Action: (props: SettingsGroupActionProps) => JSX.Element;\n};\n\nconst SettingsGroupAction = (props: SettingsGroupActionProps): JSX.Element =>\n  ({ kind: SETTINGS_GROUP_ACTION, props }) satisfies SettingsGroupActionDefinition as unknown as JSX.Element;\n\nconst collectSettingsGroupActions = (value: unknown): SettingsGroupActionDefinition[] => {\n  if (Array.isArray(value)) return value.flatMap(collectSettingsGroupActions);\n  return value && typeof value === \"object\" && (value as { kind?: unknown }).kind === SETTINGS_GROUP_ACTION\n    ? [value as SettingsGroupActionDefinition]\n    : [];\n};\n\nconst collectSettingsGroupContent = (value: unknown): JSX.Element[] => {\n  if (Array.isArray(value)) return value.flatMap(collectSettingsGroupContent);\n  return value && typeof value === \"object\" && (value as { kind?: unknown }).kind === SETTINGS_GROUP_ACTION ? [] : [value as JSX.Element];\n};\n\nexport const SettingsGroup = ((props: SettingsGroupProps): JSX.Element => {\n  const resolved = children(() => props.children);\n  const action = createMemo(() => collectSettingsGroupActions(resolved())[0]);\n  const content = createMemo(() => collectSettingsGroupContent(resolved()));\n  const headingId = `k2b-settings-group-${createUniqueId()}`;\n  return (\n    <section class={`k2b-settings-group${props.class ? ` ${props.class}` : \"\"}`} aria-labelledby={headingId}>\n      <header class=\"k2b-settings-group__header\">\n        <div class=\"k2b-settings-group__heading\">\n          <h3 id={headingId}>{props.title}</h3>\n          <Show when={props.description}>\n            <p>{props.description}</p>\n          </Show>\n        </div>\n        <Show when={action()}>{(slot) => <div class=\"k2b-settings-group__action\">{slot().props.children}</div>}</Show>\n      </header>\n      <div class=\"k2b-settings-group__body\">{content()}</div>\n    </section>\n  );\n}) as SettingsGroupComponent;\n\nSettingsGroup.Action = SettingsGroupAction;\n\nexport const sameSettingValue = (left: unknown, right: unknown): boolean => JSON.stringify(left) === JSON.stringify(right);\n\nexport const readSettingsError = async (\n  response: Pick<Response, \"json\">,\n  fallback: string,\n): Promise<{ message: string; fields: Record<string, string> }> => {\n  const data = (await response.json().catch(() => null)) as {\n    message?: string;\n    errors?: Record<string, string>;\n  } | null;\n  return { message: data?.message ?? fallback, fields: data?.errors ?? {} };\n};\n\nexport type SettingsFieldProps = {\n  label: string;\n  description: string;\n  error: MaybeAccessor<string | undefined>;\n  changed?: MaybeAccessor<boolean>;\n  children: JSX.Element | ((control: SettingsFieldControlProps) => JSX.Element);\n  class?: string;\n};\n\nexport type SettingsFieldControlProps = {\n  describedBy: () => string;\n};\n\nexport function SettingsField(props: SettingsFieldProps): JSX.Element {\n  const settingsMessages = useSettingsMessages();\n  const id = createUniqueId();\n  const descriptionId = `k2b-settings-field-${id}-description`;\n  const errorId = `k2b-settings-field-${id}-error`;\n  const describedBy = () => (read(props.error) ? `${descriptionId} ${errorId}` : descriptionId);\n  const control = () =>\n    typeof props.children === \"function\"\n      ? (props.children as (control: SettingsFieldControlProps) => JSX.Element)({ describedBy })\n      : props.children;\n  return (\n    <div class={`k2b-settings-field ${props.class ?? \"\"}`}>\n      <div class=\"k2b-settings-field__copy\">\n        <div class=\"k2b-settings-field__heading\">\n          <strong>{props.label}</strong>\n          <Show when={props.changed !== undefined && read(props.changed)}>\n            <span>{settingsMessages().unsaved}</span>\n          </Show>\n        </div>\n        <p id={descriptionId}>{props.description}</p>\n      </div>\n      {control()}\n      <Show when={read(props.error)}>\n        {(error) => (\n          <p id={errorId} class=\"k2b-settings-field__error\" role=\"alert\">\n            <i class=\"ti ti-alert-circle\" aria-hidden=\"true\" /> {error()}\n          </p>\n        )}\n      </Show>\n    </div>\n  );\n}\n\nexport type SettingsSaveBarProps = {\n  changeCount: MaybeAccessor<number>;\n  loading: MaybeAccessor<boolean>;\n  saveDisabled?: MaybeAccessor<boolean>;\n  onDiscard: () => void;\n  onSave: () => void;\n  saveLabel?: string;\n  saveVariant?: ButtonVariant;\n  class?: string;\n};\n\nconst SettingsActions = (\n  props: SettingsSaveBarProps & {\n    disableWithoutChanges?: boolean;\n  },\n): JSX.Element => {\n  const promptMessages = usePromptMessages();\n  const settingsMessages = useSettingsMessages();\n  const changeCount = () => read(props.changeCount);\n  const loading = () => read(props.loading);\n  const disabled = () => loading() || Boolean(props.disableWithoutChanges && changeCount() === 0);\n  const saveDisabled = () => disabled() || Boolean(props.saveDisabled !== undefined && read(props.saveDisabled));\n  return (\n    <div class=\"k2b-settings-actions\">\n      <Button variant=\"secondary\" disabled={disabled()} onClick={props.onDiscard}>\n        {promptMessages().discard}\n      </Button>\n      <Button\n        variant={props.saveVariant ?? \"primary\"}\n        loading={loading()}\n        loadingLabel={settingsMessages().saving}\n        disabled={saveDisabled()}\n        onClick={props.onSave}\n      >\n        <i class=\"ti ti-device-floppy\" aria-hidden=\"true\" />\n        {props.saveLabel ?? settingsMessages().saveChanges}\n      </Button>\n    </div>\n  );\n};\n\nexport function SettingsSaveBar(props: SettingsSaveBarProps): JSX.Element {\n  const settingsMessages = useSettingsMessages();\n  const changeCount = () => read(props.changeCount);\n  return (\n    <Show when={changeCount() > 0}>\n      <div class={`k2b-settings-save-bar ${props.class ?? \"\"}`}>\n        <p role=\"status\" aria-live=\"polite\">\n          <strong>{changeCount()}</strong> {settingsMessages().unsavedChangeLabel({ count: changeCount() })}\n        </p>\n        <SettingsActions {...props} />\n      </div>\n    </Show>\n  );\n}\n\nexport type SettingsPanelFooterProps = SettingsSaveBarProps;\n\nexport function SettingsPanelFooter(props: SettingsPanelFooterProps): JSX.Element {\n  const settingsMessages = useSettingsMessages();\n  const changeCount = () => read(props.changeCount);\n  return (\n    <>\n      <p class=\"k2b-settings-panel-footer__status\" role=\"status\" aria-live=\"polite\">\n        <Show when={changeCount() > 0} fallback={settingsMessages().noUnsavedChanges}>\n          <strong>{changeCount()}</strong> {settingsMessages().unsavedChangeLabel({ count: changeCount() })}\n        </Show>\n      </p>\n      <SettingsActions {...props} disableWithoutChanges />\n    </>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/Settings.tsx"],"sourcesContent":["import { children, createMemo, createUniqueId, type JSX, Show } from \"solid-js\";\nimport { Button, type ButtonVariant } from \"../actions/Button\";\nimport { usePromptMessages } from \"../feedback/prompt-messages\";\nimport type { MaybeAccessor } from \"../inputs/field-contract\";\nimport { useSettingsMessages } from \"./settings-messages\";\n\nconst read = <T,>(value: MaybeAccessor<T>): T => (typeof value === \"function\" ? (value as () => T)() : value);\n\nexport type SettingsPageProps = {\n  title: JSX.Element;\n  /** False when a surrounding head already shows the title, such as a workspace level; the actions move to the footer. */\n  header?: boolean;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  children: JSX.Element;\n  footer?: JSX.Element;\n  scrollPreserveKey?: string;\n  class?: string;\n  style?: JSX.CSSProperties | string;\n};\n\nexport function SettingsPage(props: SettingsPageProps): JSX.Element {\n  return (\n    <section\n      class={`k2b-settings-page${props.class ? ` ${props.class}` : \"\"}`}\n      style={props.style}\n      aria-label={props.header === false && typeof props.title === \"string\" ? props.title : undefined}\n    >\n      <Show when={props.header !== false}>\n        <header class=\"k2b-settings-page__header\">\n          <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n          <div class=\"k2b-settings-page__heading\">\n            <h1>{props.title}</h1>\n            <Show when={props.subtitle}>\n              <p>{props.subtitle}</p>\n            </Show>\n          </div>\n          <Show when={props.actions}>\n            <div class=\"k2b-settings-page__actions\">{props.actions}</div>\n          </Show>\n        </header>\n      </Show>\n      <div class=\"k2b-settings-page__body\" data-scroll-preserve={props.scrollPreserveKey}>\n        {props.children}\n      </div>\n      <Show when={props.footer}>\n        <footer class=\"k2b-settings-page__footer\">{props.footer}</footer>\n      </Show>\n    </section>\n  );\n}\n\nexport type SettingsSectionProps = {\n  title: JSX.Element;\n  subtitle?: JSX.Element;\n  icon?: string;\n  actions?: JSX.Element;\n  children: JSX.Element;\n  class?: string;\n};\n\n/**\n * A full-page settings group: a heading, optional actions and its fields on the\n * page surface without a card. Dialogs keep using PanelDialog.Section.\n */\nexport function SettingsSection(props: SettingsSectionProps): JSX.Element {\n  const headingId = `k2b-settings-section-${createUniqueId()}`;\n  return (\n    <section class={`k2b-settings-section${props.class ? ` ${props.class}` : \"\"}`} aria-labelledby={headingId}>\n      <header class=\"k2b-settings-section__header\">\n        <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n        <div class=\"k2b-settings-section__heading\">\n          <h2 id={headingId}>{props.title}</h2>\n          <Show when={props.subtitle}>\n            <p>{props.subtitle}</p>\n          </Show>\n        </div>\n        <Show when={props.actions}>\n          <div class=\"k2b-settings-section__actions\">{props.actions}</div>\n        </Show>\n      </header>\n      <div class=\"k2b-settings-section__body\">{props.children}</div>\n    </section>\n  );\n}\n\nconst SETTINGS_GROUP_ACTION = Symbol(\"SettingsGroup.Action\");\n\nexport type SettingsGroupProps = {\n  title: JSX.Element;\n  description?: JSX.Element;\n  children: JSX.Element;\n  class?: string;\n};\n\nexport type SettingsGroupActionProps = {\n  children: JSX.Element;\n};\n\ntype SettingsGroupActionDefinition = {\n  readonly kind: typeof SETTINGS_GROUP_ACTION;\n  readonly props: SettingsGroupActionProps;\n};\n\ntype SettingsGroupComponent = ((props: SettingsGroupProps) => JSX.Element) & {\n  Action: (props: SettingsGroupActionProps) => JSX.Element;\n};\n\nconst SettingsGroupAction = (props: SettingsGroupActionProps): JSX.Element =>\n  ({ kind: SETTINGS_GROUP_ACTION, props }) satisfies SettingsGroupActionDefinition as unknown as JSX.Element;\n\nconst collectSettingsGroupActions = (value: unknown): SettingsGroupActionDefinition[] => {\n  if (Array.isArray(value)) return value.flatMap(collectSettingsGroupActions);\n  return value && typeof value === \"object\" && (value as { kind?: unknown }).kind === SETTINGS_GROUP_ACTION\n    ? [value as SettingsGroupActionDefinition]\n    : [];\n};\n\nconst collectSettingsGroupContent = (value: unknown): JSX.Element[] => {\n  if (Array.isArray(value)) return value.flatMap(collectSettingsGroupContent);\n  return value && typeof value === \"object\" && (value as { kind?: unknown }).kind === SETTINGS_GROUP_ACTION ? [] : [value as JSX.Element];\n};\n\nexport const SettingsGroup = ((props: SettingsGroupProps): JSX.Element => {\n  const resolved = children(() => props.children);\n  const action = createMemo(() => collectSettingsGroupActions(resolved())[0]);\n  const content = createMemo(() => collectSettingsGroupContent(resolved()));\n  const headingId = `k2b-settings-group-${createUniqueId()}`;\n  return (\n    <section class={`k2b-settings-group${props.class ? ` ${props.class}` : \"\"}`} aria-labelledby={headingId}>\n      <header class=\"k2b-settings-group__header\">\n        <div class=\"k2b-settings-group__heading\">\n          <h3 id={headingId}>{props.title}</h3>\n          <Show when={props.description}>\n            <p>{props.description}</p>\n          </Show>\n        </div>\n        <Show when={action()}>{(slot) => <div class=\"k2b-settings-group__action\">{slot().props.children}</div>}</Show>\n      </header>\n      <div class=\"k2b-settings-group__body\">{content()}</div>\n    </section>\n  );\n}) as SettingsGroupComponent;\n\nSettingsGroup.Action = SettingsGroupAction;\n\nexport const sameSettingValue = (left: unknown, right: unknown): boolean => JSON.stringify(left) === JSON.stringify(right);\n\nexport const readSettingsError = async (\n  response: Pick<Response, \"json\">,\n  fallback: string,\n): Promise<{ message: string; fields: Record<string, string> }> => {\n  const data = (await response.json().catch(() => null)) as {\n    message?: string;\n    errors?: Record<string, string>;\n  } | null;\n  return { message: data?.message ?? fallback, fields: data?.errors ?? {} };\n};\n\nexport type SettingsFieldProps = {\n  label: string;\n  description: string;\n  error: MaybeAccessor<string | undefined>;\n  changed?: MaybeAccessor<boolean>;\n  children: JSX.Element | ((control: SettingsFieldControlProps) => JSX.Element);\n  class?: string;\n};\n\nexport type SettingsFieldControlProps = {\n  describedBy: () => string;\n};\n\nexport function SettingsField(props: SettingsFieldProps): JSX.Element {\n  const settingsMessages = useSettingsMessages();\n  const id = createUniqueId();\n  const descriptionId = `k2b-settings-field-${id}-description`;\n  const errorId = `k2b-settings-field-${id}-error`;\n  const describedBy = () => (read(props.error) ? `${descriptionId} ${errorId}` : descriptionId);\n  const control = () =>\n    typeof props.children === \"function\"\n      ? (props.children as (control: SettingsFieldControlProps) => JSX.Element)({ describedBy })\n      : props.children;\n  return (\n    <div class={`k2b-settings-field ${props.class ?? \"\"}`}>\n      <div class=\"k2b-settings-field__copy\">\n        <div class=\"k2b-settings-field__heading\">\n          <strong>{props.label}</strong>\n          <Show when={props.changed !== undefined && read(props.changed)}>\n            <span>{settingsMessages().unsaved}</span>\n          </Show>\n        </div>\n        <p id={descriptionId}>{props.description}</p>\n      </div>\n      {control()}\n      <Show when={read(props.error)}>\n        {(error) => (\n          <p id={errorId} class=\"k2b-settings-field__error\" role=\"alert\">\n            <i class=\"ti ti-alert-circle\" aria-hidden=\"true\" /> {error()}\n          </p>\n        )}\n      </Show>\n    </div>\n  );\n}\n\nexport type SettingsSaveBarProps = {\n  changeCount: MaybeAccessor<number>;\n  loading: MaybeAccessor<boolean>;\n  saveDisabled?: MaybeAccessor<boolean>;\n  onDiscard: () => void;\n  onSave: () => void;\n  saveLabel?: string;\n  saveVariant?: ButtonVariant;\n  class?: string;\n};\n\nconst SettingsActions = (\n  props: SettingsSaveBarProps & {\n    disableWithoutChanges?: boolean;\n  },\n): JSX.Element => {\n  const promptMessages = usePromptMessages();\n  const settingsMessages = useSettingsMessages();\n  const changeCount = () => read(props.changeCount);\n  const loading = () => read(props.loading);\n  const disabled = () => loading() || Boolean(props.disableWithoutChanges && changeCount() === 0);\n  const saveDisabled = () => disabled() || Boolean(props.saveDisabled !== undefined && read(props.saveDisabled));\n  return (\n    <div class=\"k2b-settings-actions\">\n      <Button variant=\"secondary\" disabled={disabled()} onClick={props.onDiscard}>\n        {promptMessages().discard}\n      </Button>\n      <Button\n        variant={props.saveVariant ?? \"primary\"}\n        loading={loading()}\n        loadingLabel={settingsMessages().saving}\n        disabled={saveDisabled()}\n        onClick={props.onSave}\n      >\n        <i class=\"ti ti-device-floppy\" aria-hidden=\"true\" />\n        {props.saveLabel ?? settingsMessages().saveChanges}\n      </Button>\n    </div>\n  );\n};\n\nexport function SettingsSaveBar(props: SettingsSaveBarProps): JSX.Element {\n  const settingsMessages = useSettingsMessages();\n  const changeCount = () => read(props.changeCount);\n  return (\n    <Show when={changeCount() > 0}>\n      <div class={`k2b-settings-save-bar ${props.class ?? \"\"}`}>\n        <p role=\"status\" aria-live=\"polite\">\n          <strong>{changeCount()}</strong> {settingsMessages().unsavedChangeLabel({ count: changeCount() })}\n        </p>\n        <SettingsActions {...props} />\n      </div>\n    </Show>\n  );\n}\n\nexport type SettingsPanelFooterProps = SettingsSaveBarProps;\n\nexport function SettingsPanelFooter(props: SettingsPanelFooterProps): JSX.Element {\n  const settingsMessages = useSettingsMessages();\n  const changeCount = () => read(props.changeCount);\n  return (\n    <>\n      <p class=\"k2b-settings-panel-footer__status\" role=\"status\" aria-live=\"polite\">\n        <Show when={changeCount() > 0} fallback={settingsMessages().noUnsavedChanges}>\n          <strong>{changeCount()}</strong> {settingsMessages().unsavedChangeLabel({ count: changeCount() })}\n        </Show>\n      </p>\n      <SettingsActions {...props} disableWithoutChanges />\n    </>\n  );\n}\n\nexport type SaveStatusState = \"saved\" | \"draft\" | \"saving\" | \"failed\" | \"invalid\" | \"unknown\" | \"readonly\";\n\nexport type SaveStatusProps = {\n  /** What the person's values are now: saved, a draft with changes, being saved, or a problem that kept them unsaved. */\n  state: MaybeAccessor<SaveStatusState>;\n  /** Formatted time of the last save, shown with `saved`. */\n  savedAt?: MaybeAccessor<string | undefined>;\n  /** Fields to check, shown with `invalid`. Default 1. */\n  invalidCount?: MaybeAccessor<number>;\n  /** With both handlers, Discard and Save follow the status while there is something to save. */\n  onDiscard?: () => void;\n  onSave?: () => void;\n  saveLabel?: string;\n  saveDisabled?: MaybeAccessor<boolean>;\n  class?: string;\n};\n\nconst SAVE_STATUS_ICON: Record<SaveStatusState, string> = {\n  saved: \"ti ti-check\",\n  draft: \"ti ti-pencil\",\n  saving: \"ti ti-loader-2\",\n  failed: \"ti ti-alert-triangle\",\n  invalid: \"ti ti-alert-triangle\",\n  unknown: \"ti ti-help-circle\",\n  readonly: \"ti ti-lock\",\n};\n\n/**\n * The save status of a settings form at one fixed place, usually the head of its column. It reserves its width, so\n * a change of state never moves the title or the buttons beside it. Problems with one field stay at that field.\n */\nexport function SaveStatus(props: SaveStatusProps): JSX.Element {\n  const settingsMessages = useSettingsMessages();\n  const state = () => read(props.state);\n  const text = () => {\n    const t = settingsMessages();\n    switch (state()) {\n      case \"saved\": {\n        const at = props.savedAt === undefined ? undefined : read(props.savedAt);\n        return at ? t.statusSavedAt({ time: at }) : t.statusSaved;\n      }\n      case \"draft\":\n        return t.statusDraft;\n      case \"saving\":\n        return t.saving;\n      case \"failed\":\n        return t.statusFailed;\n      case \"invalid\":\n        return t.statusInvalid({ count: props.invalidCount === undefined ? 1 : read(props.invalidCount) });\n      case \"unknown\":\n        return t.statusUnknown;\n      case \"readonly\":\n        return t.statusReadOnly;\n    }\n  };\n  const hasActions = () => Boolean(props.onSave && props.onDiscard) && state() !== \"readonly\";\n  const pending = () => state() === \"draft\" || state() === \"failed\" || state() === \"invalid\" || state() === \"saving\";\n  return (\n    <div class={`k2b-save-status ${props.class ?? \"\"}`}>\n      <span class=\"k2b-save-status__slot\">\n        <span class=\"k2b-save-status__state\" data-state={state()} role=\"status\" aria-live=\"polite\">\n          <i class={`${SAVE_STATUS_ICON[state()]}${state() === \"saving\" ? \" k2b-spin\" : \"\"}`} aria-hidden=\"true\" />\n          {text()}\n        </span>\n      </span>\n      <Show when={hasActions()}>\n        <SettingsActions\n          changeCount={() => (pending() ? 1 : 0)}\n          loading={() => state() === \"saving\"}\n          saveDisabled={() => state() === \"invalid\" || Boolean(props.saveDisabled !== undefined && read(props.saveDisabled))}\n          onDiscard={props.onDiscard!}\n          onSave={props.onSave!}\n          saveLabel={props.saveLabel ?? settingsMessages().save}\n          disableWithoutChanges\n        />\n      </Show>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/layout/SidebarRailHint.js

@@ -0,0 +1,79 @@
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createSignal, onCleanup, onMount, Show } from "solid-js";
+import { Tooltip } from "../feedback/Tooltip";
+
+/**
+ * True while `element` sits in the collapsed sidebar rail, which shows icons
+ * without labels. The stylesheet sets `--k2b-sidebar-rail` exactly where it
+ * collapses the sidebar, so this follows the same container width and state.
+ */
+export const inSidebarRail = element => element?.isConnected === true && getComputedStyle(element).getPropertyValue("--k2b-sidebar-rail").trim() === "1";
+
+/** True while a label fades out because it does not fit. */
+const clipped = element => Boolean(element && (element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth));
+
+/**
+ * A sidebar entry's name, or its `title`, in the hint the Cloud app rail uses.
+ * In the collapsed rail it names the icon beside it at once. Elsewhere it
+ * shows above the entry with the usual delay, and only when it says more than
+ * the visible label: a label cut off, or a title with details. A native
+ * `title` on `target` gives way to it, so no hint shows twice.
+ */
+export function SidebarRailHint(props) {
+  const needed = () => {
+    const target = props.target();
+    if (inSidebarRail(target)) return true;
+    const visible = target?.querySelector(props.labelSelector);
+    return clipped(visible) || (visible?.textContent?.trim() ?? "") !== props.label?.trim();
+  };
+  // A long sidebar carries no hint for entries nobody points at: the hint
+  // mounts on the first hover or focus that needs it (or that would show a
+  // native title), before the tooltip's own pointerenter and focusin
+  // listeners see that same gesture. `target` must stay the same element;
+  // key the hint to it when the element can change.
+  const [armed, setArmed] = createSignal(false);
+  onMount(() => {
+    const target = props.target();
+    const focusHost = props.focusTarget?.() ?? target;
+    if (!target || !focusHost) return;
+    const arm = event => {
+      if (armed() || event.pointerType === "touch") return;
+      if (!props.titled && !needed()) return;
+      setArmed(true);
+      props.onArm?.();
+    };
+    target.addEventListener("pointerover", arm);
+    focusHost.addEventListener("focus", arm);
+    onCleanup(() => {
+      target.removeEventListener("pointerover", arm);
+      focusHost.removeEventListener("focus", arm);
+    });
+  });
+  return _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!armed())() && props.label;
+    },
+    children: label => _$createComponent(Tooltip, {
+      get target() {
+        return props.target;
+      },
+      get focusTarget() {
+        return props.focusTarget;
+      },
+      get content() {
+        return label();
+      },
+      get placement() {
+        return inSidebarRail(props.target()) ? "right" : "top";
+      },
+      get delay() {
+        return inSidebarRail(props.target()) ? 0 : undefined;
+      },
+      get disabled() {
+        return !needed();
+      }
+    })
+  });
+}
+//# sourceMappingURL=SidebarRailHint.js.map

package/dist/browser/layout/SidebarRailHint.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["layout/SidebarRailHint.tsx"],"sourcesContent":["import { createSignal, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { Tooltip } from \"../feedback/Tooltip\";\n\n/**\n * True while `element` sits in the collapsed sidebar rail, which shows icons\n * without labels. The stylesheet sets `--k2b-sidebar-rail` exactly where it\n * collapses the sidebar, so this follows the same container width and state.\n */\nexport const inSidebarRail = (element: Element | undefined): boolean =>\n  element?.isConnected === true && getComputedStyle(element).getPropertyValue(\"--k2b-sidebar-rail\").trim() === \"1\";\n\n/** True while a label fades out because it does not fit. */\nconst clipped = (element: Element | null | undefined): boolean =>\n  Boolean(element && (element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth));\n\n/**\n * A sidebar entry's name, or its `title`, in the hint the Cloud app rail uses.\n * In the collapsed rail it names the icon beside it at once. Elsewhere it\n * shows above the entry with the usual delay, and only when it says more than\n * the visible label: a label cut off, or a title with details. A native\n * `title` on `target` gives way to it, so no hint shows twice.\n */\nexport function SidebarRailHint(props: {\n  target: () => HTMLElement | undefined;\n  label: string | undefined;\n  /** The element that holds keyboard focus for the entry, when that is not `target`. */\n  focusTarget?: () => HTMLElement | undefined;\n  /** The visible label text inside `target`. */\n  labelSelector: string;\n  /** The entry renders a native `title`, which the hint replaces from the first hover or focus. */\n  titled?: boolean;\n  /** Called once the hint takes over; the entry stops rendering its native `title`. */\n  onArm?: () => void;\n}): JSX.Element {\n  const needed = () => {\n    const target = props.target();\n    if (inSidebarRail(target)) return true;\n    const visible = target?.querySelector(props.labelSelector);\n    return clipped(visible) || (visible?.textContent?.trim() ?? \"\") !== props.label?.trim();\n  };\n  // A long sidebar carries no hint for entries nobody points at: the hint\n  // mounts on the first hover or focus that needs it (or that would show a\n  // native title), before the tooltip's own pointerenter and focusin\n  // listeners see that same gesture. `target` must stay the same element;\n  // key the hint to it when the element can change.\n  const [armed, setArmed] = createSignal(false);\n  onMount(() => {\n    const target = props.target();\n    const focusHost = props.focusTarget?.() ?? target;\n    if (!target || !focusHost) return;\n    const arm = (event: Event) => {\n      if (armed() || (event as PointerEvent).pointerType === \"touch\") return;\n      if (!props.titled && !needed()) return;\n      setArmed(true);\n      props.onArm?.();\n    };\n    target.addEventListener(\"pointerover\", arm);\n    focusHost.addEventListener(\"focus\", arm);\n    onCleanup(() => {\n      target.removeEventListener(\"pointerover\", arm);\n      focusHost.removeEventListener(\"focus\", arm);\n    });\n  });\n  return (\n    <Show when={armed() && props.label}>\n      {(label) => (\n        <Tooltip\n          target={props.target}\n          focusTarget={props.focusTarget}\n          content={label()}\n          placement={inSidebarRail(props.target()) ? \"right\" : \"top\"}\n          delay={inSidebarRail(props.target()) ? 0 : undefined}\n          disabled={!needed()}\n        />\n      )}\n    </Show>\n  );\n}\n"],"mappings":";;AAAA,SAAS,YAAY,EAAY,SAAS,EAAE,OAAO,EAAE,IAAI,QAAQ,UAAU;AAC3E,SAAS,OAAO,QAAQ,qBAAqB;;AAE7C;AACA;AACA;AACA;AACA;AACA,OAAO,MAAM,aAAa,GAAI,OAA4B,IACxD,OAAO,EAAE,WAAW,KAAK,IAAI,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,GAAG;;AAElH;AACA,MAAM,OAAO,GAAI,OAAmC,IAClD,OAAO,CAAC,OAAO,KAAK,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;;AAEhH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAAS,eAAe,CAAC,KAW/B,EAAe;EACd,MAAM,MAAM,GAAG,MAAM;IACnB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,IAAI,aAAa,CAAC,MAAM,CAAC,EAAE,OAAO,IAAI;IACtC,MAAM,OAAO,GAAG,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC;IAC1D,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;EACzF,CAAC;EACD;EACA;EACA;EACA;EACA;EACA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC;EAC7C,OAAO,CAAC,MAAM;IACZ,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,GAAG,CAAC,IAAI,MAAM;IACjD,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE;IAC3B,MAAM,GAAG,GAAI,KAAY,IAAK;MAC5B,IAAI,KAAK,CAAC,CAAC,IAAK,KAAK,CAAkB,WAAW,KAAK,OAAO,EAAE;MAChE,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE;MAChC,QAAQ,CAAC,IAAI,CAAC;MACd,KAAK,CAAC,KAAK,GAAG,CAAC;IACjB,CAAC;IACD,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,GAAG,CAAC;IAC3C,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,CAAC;IACxC,SAAS,CAAC,MAAM;MACd,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,GAAG,CAAC;MAC9C,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,GAAG,CAAC;IAC7C,CAAC,CAAC;EACJ,CAAC,CAAC;EACF,yBACG,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,oBAAK,CAAC,CAAC,OAAI,KAAK,CAAC,KAAK;IAAA;IAAA,UAC9B,KAAK,sBACJ,OAAO;MAAA,IACN,MAAM;QAAA,OAAE,KAAK,CAAC,MAAM;MAAA;MAAA,IACpB,WAAW;QAAA,OAAE,KAAK,CAAC,WAAW;MAAA;MAAA,IAC9B,OAAO;QAAA,OAAE,KAAK,CAAC,CAAC;MAAA;MAAA,IAChB,SAAS;QAAA,OAAE,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,KAAK;MAAA;MAAA,IAC1D,KAAK;QAAA,OAAE,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS;MAAA;MAAA,IACpD,QAAQ;QAAA,OAAE,CAAC,MAAM,CAAC,CAAC;MAAA;IAAA;EAEtB;AAGP","ignoreList":[]}

package/dist/browser/layout/SidebarSwitcher.js

@@ -13,7 +13,7 @@ import { setAttribute as _$setAttribute } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<div class="k2b-choice-search k2b-sidebar-switcher__search"><i class="ti ti-search"aria-hidden=true></i><input type=search data-switcher-row>`),
   _tmpl$2 = /*#__PURE__*/_$template(`<ul class=k2b-sidebar-switcher__actions>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<div><button type=button class=k2b-sidebar-switcher__trigger aria-haspopup=dialog><span class=k2b-sidebar-switcher__icon aria-hidden=true><i></i></span><span class=k2b-sidebar-switcher__copy aria-hidden=true><span class=k2b-truncate-fade-lines></span><!$><!/></span><i class="ti ti-selector k2b-sidebar-switcher__chevron"aria-hidden=true></i><span class=k2b-sr-only></span></button><div popover=auto tabindex=-1 role=dialog class=k2b-sidebar-switcher__panel><!$><!/><ul class=k2b-sidebar-switcher__options></ul><!$><!/>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div><button type=button class=k2b-sidebar-switcher__trigger aria-haspopup=dialog><span class=k2b-sidebar-switcher__icon aria-hidden=true><i></i></span><span class=k2b-sidebar-switcher__copy aria-hidden=true><span class=k2b-truncate-fade-lines></span><!$><!/></span><i class="ti ti-selector k2b-sidebar-switcher__chevron"aria-hidden=true></i><span class=k2b-sr-only></span></button><!$><!/><div popover=auto tabindex=-1 role=dialog class=k2b-sidebar-switcher__panel><!$><!/><ul class=k2b-sidebar-switcher__options></ul><!$><!/>`),
   _tmpl$4 = /*#__PURE__*/_$template(`<small class=k2b-truncate-fade>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<li class=k2b-choice-status role=status>`),
   _tmpl$6 = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
@@ -30,6 +30,7 @@ import { isServer } from "solid-js/web";
 import { dropdownPosition } from "../actions/Dropdown";
 import { returnFocus, ringOnReturn } from "../internal/focus-return";
 import { useUiMessages } from "../intl/messages";
+import { SidebarRailHint } from "./SidebarRailHint";
 
 /** One container a person can switch to, such as a notebook, a space, or a mailbox. */
 
@@ -58,6 +59,7 @@ export function AppWorkspaceSidebarSwitcher(props) {
   const [open, setOpen] = createSignal(false);
   const [query, setQuery] = createSignal("");
   let trigger;
+  const [hinted, setHinted] = createSignal(false);
   let panel;
   let search;
   let keyboardOpened = true;
@@ -226,7 +228,9 @@ export function AppWorkspaceSidebarSwitcher(props) {
       [_el$8, _co$] = _$getNextMarker(_el$7.nextSibling),
       _el$9 = _el$5.nextSibling,
       _el$0 = _el$9.nextSibling,
-      _el$1 = _el$2.nextSibling,
+      _el$19 = _el$2.nextSibling,
+      [_el$20, _co$4] = _$getNextMarker(_el$19.nextSibling),
+      _el$1 = _el$20.nextSibling,
       _el$15 = _el$1.firstChild,
       [_el$16, _co$2] = _$getNextMarker(_el$15.nextSibling),
       _el$13 = _el$16.nextSibling,
@@ -255,13 +259,22 @@ export function AppWorkspaceSidebarSwitcher(props) {
         return props.description;
       },
       children: description => (() => {
-        var _el$19 = _$getNextElement(_tmpl$4);
-        _$insert(_el$19, description);
-        return _el$19;
+        var _el$21 = _$getNextElement(_tmpl$4);
+        _$insert(_el$21, description);
+        return _el$21;
       })()
     }), _el$8, _co$);
     _$setAttribute(_el$0, "id", `${id}-purpose`);
     _$insert(_el$0, () => [props.description, props.switchLabel].filter(Boolean).join(", "));
+    _$insert(_el$, _$createComponent(SidebarRailHint, {
+      target: () => trigger,
+      get label() {
+        return props.label;
+      },
+      labelSelector: ".k2b-sidebar-switcher__copy > span",
+      titled: true,
+      onArm: () => setHinted(true)
+    }), _el$20, _co$4);
     _el$1.addEventListener("toggle", event => {
       if (event.newState === "open") return;
       setOpen(false);
@@ -310,32 +323,32 @@ export function AppWorkspaceSidebarSwitcher(props) {
       },
       get fallback() {
         return (() => {
-          var _el$20 = _$getNextElement(_tmpl$5);
-          _$insert(_el$20, _$createComponent(Show, {
+          var _el$22 = _$getNextElement(_tmpl$5);
+          _$insert(_el$22, _$createComponent(Show, {
             get when() {
               return props.error;
             },
             get fallback() {
               return [_$getNextElement(_tmpl$6), (() => {
-                var _el$22 = _$getNextElement(_tmpl$7);
-                _$insert(_el$22, () => messages().loading);
-                return _el$22;
+                var _el$24 = _$getNextElement(_tmpl$7);
+                _$insert(_el$24, () => messages().loading);
+                return _el$24;
               })()];
             },
             children: error => [(() => {
-              var _el$23 = _$getNextElement(_tmpl$7);
-              _$insert(_el$23, error);
-              return _el$23;
+              var _el$25 = _$getNextElement(_tmpl$7);
+              _$insert(_el$25, error);
+              return _el$25;
             })(), (() => {
-              var _el$24 = _$getNextElement(_tmpl$8);
-              _el$24.$$click = () => props.onLoad?.();
-              _$insert(_el$24, () => messages().retry);
+              var _el$26 = _$getNextElement(_tmpl$8);
+              _el$26.$$click = () => props.onLoad?.();
+              _$insert(_el$26, () => messages().retry);
               _$runHydrationEvents();
-              return _el$24;
+              return _el$26;
             })()]
           }));
-          _$effect(() => _$setAttribute(_el$20, "data-tone", props.error ? "danger" : undefined));
-          return _el$20;
+          _$effect(() => _$setAttribute(_el$22, "data-tone", props.error ? "danger" : undefined));
+          return _el$22;
         })();
       },
       get children() {
@@ -345,52 +358,52 @@ export function AppWorkspaceSidebarSwitcher(props) {
           },
           get fallback() {
             return (() => {
-              var _el$25 = _$getNextElement(_tmpl$5);
-              _$insert(_el$25, () => messages().noResults);
-              return _el$25;
+              var _el$27 = _$getNextElement(_tmpl$5);
+              _$insert(_el$27, () => messages().noResults);
+              return _el$27;
             })();
           },
           children: option => {
             const current = () => option.id === props.currentId;
             return (() => {
-              var _el$26 = _$getNextElement(_tmpl$9),
-                _el$27 = _el$26.firstChild,
-                _el$28 = _el$27.firstChild,
+              var _el$28 = _$getNextElement(_tmpl$9),
                 _el$29 = _el$28.firstChild,
-                _el$30 = _el$28.nextSibling,
+                _el$30 = _el$29.firstChild,
                 _el$31 = _el$30.firstChild,
-                _el$32 = _el$31.nextSibling,
-                [_el$33, _co$4] = _$getNextMarker(_el$32.nextSibling),
-                _el$34 = _el$30.nextSibling;
-              _el$27.$$click = event => {
+                _el$32 = _el$30.nextSibling,
+                _el$33 = _el$32.firstChild,
+                _el$34 = _el$33.nextSibling,
+                [_el$35, _co$5] = _$getNextMarker(_el$34.nextSibling),
+                _el$36 = _el$32.nextSibling;
+              _el$29.$$click = event => {
                 // The open container is already here: choosing it only closes the panel.
                 if (current() && plainClick(event)) {
                   event.preventDefault();
                   hide(true);
                 } else follow(event);
               };
-              _$insert(_el$31, () => option.label);
-              _$insert(_el$30, _$createComponent(Show, {
+              _$insert(_el$33, () => option.label);
+              _$insert(_el$32, _$createComponent(Show, {
                 get when() {
                   return option.description;
                 },
                 children: description => (() => {
-                  var _el$35 = _$getNextElement(_tmpl$0);
-                  _$insert(_el$35, description);
-                  return _el$35;
+                  var _el$37 = _$getNextElement(_tmpl$0);
+                  _$insert(_el$37, description);
+                  return _el$37;
                 })()
-              }), _el$33, _co$4);
+              }), _el$35, _co$5);
               _$effect(_p$ => {
                 var _v$1 = option.href,
                   _v$10 = current() ? "true" : undefined,
                   _v$11 = tint(option.color ?? props.color),
                   _v$12 = iconClass(option.icon ?? props.icon),
                   _v$13 = current() ? undefined : "true";
-                _v$1 !== _p$.e && _$setAttribute(_el$27, "href", _p$.e = _v$1);
-                _v$10 !== _p$.t && _$setAttribute(_el$27, "aria-current", _p$.t = _v$10);
-                _p$.a = _$style(_el$28, _v$11, _p$.a);
-                _v$12 !== _p$.o && _$className(_el$29, _p$.o = _v$12);
-                _v$13 !== _p$.i && _$setAttribute(_el$34, "data-hidden", _p$.i = _v$13);
+                _v$1 !== _p$.e && _$setAttribute(_el$29, "href", _p$.e = _v$1);
+                _v$10 !== _p$.t && _$setAttribute(_el$29, "aria-current", _p$.t = _v$10);
+                _p$.a = _$style(_el$30, _v$11, _p$.a);
+                _v$12 !== _p$.o && _$className(_el$31, _p$.o = _v$12);
+                _v$13 !== _p$.i && _$setAttribute(_el$36, "data-hidden", _p$.i = _v$13);
                 return _p$;
               }, {
                 e: undefined,
@@ -400,7 +413,7 @@ export function AppWorkspaceSidebarSwitcher(props) {
                 i: undefined
               });
               _$runHydrationEvents();
-              return _el$26;
+              return _el$28;
             })();
           }
         });
@@ -417,26 +430,26 @@ export function AppWorkspaceSidebarSwitcher(props) {
             return props.actions;
           },
           children: item => (() => {
-            var _el$36 = _$getNextElement(_tmpl$1);
-            _$insert(_el$36, _$createComponent(Show, {
+            var _el$38 = _$getNextElement(_tmpl$1);
+            _$insert(_el$38, _$createComponent(Show, {
               get when() {
                 return item.href;
               },
               get fallback() {
                 return (() => {
-                  var _el$37 = _$getNextElement(_tmpl$10),
-                    _el$38 = _el$37.firstChild,
-                    _el$39 = _el$38.nextSibling,
-                    _el$40 = _el$39.firstChild;
-                  _el$37.$$click = () => choose(() => item.action?.());
-                  _$insert(_el$40, () => item.label);
+                  var _el$39 = _$getNextElement(_tmpl$10),
+                    _el$40 = _el$39.firstChild,
+                    _el$41 = _el$40.nextSibling,
+                    _el$42 = _el$41.firstChild;
+                  _el$39.$$click = () => choose(() => item.action?.());
+                  _$insert(_el$42, () => item.label);
                   _$effect(_p$ => {
                     var _v$14 = item.disabled,
                       _v$15 = item.disabled ? "true" : undefined,
                       _v$16 = iconClass(item.icon);
-                    _v$14 !== _p$.e && _$setProperty(_el$37, "disabled", _p$.e = _v$14);
-                    _v$15 !== _p$.t && _$setAttribute(_el$37, "aria-disabled", _p$.t = _v$15);
-                    _v$16 !== _p$.a && _$className(_el$38, _p$.a = _v$16);
+                    _v$14 !== _p$.e && _$setProperty(_el$39, "disabled", _p$.e = _v$14);
+                    _v$15 !== _p$.t && _$setAttribute(_el$39, "aria-disabled", _p$.t = _v$15);
+                    _v$16 !== _p$.a && _$className(_el$40, _p$.a = _v$16);
                     return _p$;
                   }, {
                     e: undefined,
@@ -444,23 +457,23 @@ export function AppWorkspaceSidebarSwitcher(props) {
                     a: undefined
                   });
                   _$runHydrationEvents();
-                  return _el$37;
+                  return _el$39;
                 })();
               },
               children: href => (() => {
-                var _el$41 = _$getNextElement(_tmpl$11),
-                  _el$42 = _el$41.firstChild,
-                  _el$43 = _el$42.nextSibling,
-                  _el$44 = _el$43.firstChild;
-                _el$41.$$click = event => item.disabled || follow(event);
-                _$insert(_el$44, () => item.label);
+                var _el$43 = _$getNextElement(_tmpl$11),
+                  _el$44 = _el$43.firstChild,
+                  _el$45 = _el$44.nextSibling,
+                  _el$46 = _el$45.firstChild;
+                _el$43.$$click = event => item.disabled || follow(event);
+                _$insert(_el$46, () => item.label);
                 _$effect(_p$ => {
                   var _v$17 = item.disabled ? undefined : href(),
                     _v$18 = item.disabled ? "true" : undefined,
                     _v$19 = iconClass(item.icon);
-                  _v$17 !== _p$.e && _$setAttribute(_el$41, "href", _p$.e = _v$17);
-                  _v$18 !== _p$.t && _$setAttribute(_el$41, "aria-disabled", _p$.t = _v$18);
-                  _v$19 !== _p$.a && _$className(_el$42, _p$.a = _v$19);
+                  _v$17 !== _p$.e && _$setAttribute(_el$43, "href", _p$.e = _v$17);
+                  _v$18 !== _p$.t && _$setAttribute(_el$43, "aria-disabled", _p$.t = _v$18);
+                  _v$19 !== _p$.a && _$className(_el$44, _p$.a = _v$19);
                   return _p$;
                 }, {
                   e: undefined,
@@ -468,10 +481,10 @@ export function AppWorkspaceSidebarSwitcher(props) {
                   a: undefined
                 });
                 _$runHydrationEvents();
-                return _el$41;
+                return _el$43;
               })()
             }));
-            return _el$36;
+            return _el$38;
           })()
         }));
         return _el$14;
@@ -482,7 +495,7 @@ export function AppWorkspaceSidebarSwitcher(props) {
         _v$4 = props.description ? "" : undefined,
         _v$5 = props.label,
         _v$6 = open(),
-        _v$7 = props.label,
+        _v$7 = hinted() ? undefined : props.label,
         _v$8 = tint(props.color),
         _v$9 = iconClass(props.icon),
         _v$0 = props.switchLabel;