@ghub/identity-chrome 0.3.0 → 0.4.0

package/README.md

@@ -104,7 +104,13 @@ Every word can be replaced through `labels`; the rest stay English.
 
 ```html
 <div style="display: flex; align-items: center">
-  <gp-account layout="row" placement="top" align="start" style="flex: 1"></gp-account>
+  <gp-account
+    layout="row"
+    density="compact"
+    placement="top"
+    align="start"
+    style="flex: 1"
+  ></gp-account>
   <gp-apps placement="top" align="start"></gp-apps>
 </div>
 ```
@@ -114,13 +120,14 @@ account.labels = { organisations: "Groups" };
 account.items = [
   { id: "profile", label: "Profile", href: "/settings/profile", icon: userSvg },
   { id: "account", label: "Account", href: "/settings/account", icon: settingsSvg },
-  { id: "replay", label: "Session recording", onSelect: () => openReplayChoice(), icon: videoSvg },
+  { id: "shortcuts", label: "Keyboard shortcuts", onSelect: () => openShortcuts(), icon: keysSvg },
 ];
 ```
 
 `layout="row"` draws the trigger as a full width row, the picture with the name over the
-address; `placement="top"` opens both popups upward. Your items follow the organisations
-under your product's name, as links or as buttons; on a link, `onSelect` may call
+address; `density="compact"` draws the account popup a step smaller (320 wide, tighter rows),
+so it does not cover the rail and half the page; `placement="top"` opens both popups upward.
+Your items follow the organisations under your product's name, as links or as buttons; on a link, `onSelect` may call
 `preventDefault()` and navigate with your own router. An icon is SVG markup on a 24 grid and
 is kept to its shapes. Until you sign in through Identity, Sign out is the last row of your
 items' group; with `viaIdentity` it ends both sessions and stands on its own.

package/dist/elements/account.d.ts

@@ -35,6 +35,8 @@
  * **In a sidebar** (`layout="row"`, `placement="top"`): the trigger is a full
  * width row, the picture with the name over the address, and the popup opens
  * upward from it. A product with a sidebar puts `<gp-apps>` at the row's end.
+ * `density="compact"` draws the popup a step smaller (320 wide, tighter rows),
+ * so it does not cover the rail and half the page.
  *
  * **The product's own items** (`items`) sit after the organisations, as a group
  * headed with the product's name. Until the product signs in through Identity,

package/dist/elements/account.js

@@ -36,6 +36,8 @@
  * **In a sidebar** (`layout="row"`, `placement="top"`): the trigger is a full
  * width row, the picture with the name over the address, and the popup opens
  * upward from it. A product with a sidebar puts `<gp-apps>` at the row's end.
+ * `density="compact"` draws the popup a step smaller (320 wide, tighter rows),
+ * so it does not cover the rail and half the page.
  *
  * **The product's own items** (`items`) sit after the organisations, as a group
  * headed with the product's name. Until the product signs in through Identity,
@@ -258,6 +260,40 @@ exports.ACCOUNT_CSS = `${contract_js_1.CONTRACT_CSS}
   .legal a:hover { text-decoration: underline; }
   .legal a:focus-visible { outline: 2px solid var(--_ring); outline-offset: 2px; }
 
+  /* density="compact": the same popup a step smaller, for a sidebar, where the
+     full one covers the rail and half the page. Below 600 it is the same sheet. */
+  :host([density="compact"]) .popup:not(.sheet) { width: 320px; padding: 6px 6px 8px; border-radius: 22px; }
+  :host([density="compact"]) .top { min-height: 32px; padding-left: 36px; }
+  :host([density="compact"]) .context { font-size: 12px; line-height: 16px; }
+  :host([density="compact"]) .close { width: 32px; height: 32px; }
+  :host([density="compact"]) .card { padding: 14px 14px 14px; border-radius: 18px; gap: 1px; }
+  :host([density="compact"]) .portrait { width: 52px; height: 52px; margin-bottom: 8px; }
+  :host([density="compact"]) .s72 { width: 52px; height: 52px; font-size: 22px; }
+  :host([density="compact"]) .pencil { width: 24px; height: 24px; right: -5px; bottom: -3px; }
+  :host([density="compact"]) .name { font-size: 16px; line-height: 21px; }
+  :host([density="compact"]) .email { font-size: 13px; line-height: 18px; }
+  :host([density="compact"]) .pill {
+    min-height: 34px; margin-top: 10px; padding: 0 14px 0 10px; gap: 8px; font-size: 13px; line-height: 18px;
+  }
+  :host([density="compact"]) .pill img { width: 18px; height: 18px; }
+  :host([density="compact"]) .section { margin-top: 4px; }
+  :host([density="compact"]) .heading { padding: 6px 12px 2px; font-size: 12px; line-height: 16px; }
+  :host([density="compact"]) .heading img { width: 14px; height: 14px; }
+  :host([density="compact"]) .stack > :first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; }
+  :host([density="compact"]) .stack > :last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
+  :host([density="compact"]) .item { min-height: 38px; padding: 0 12px; gap: 10px; font-size: 13px; line-height: 18px; }
+  :host([density="compact"]) .item svg, :host([density="compact"]) .signout svg { width: 16px; height: 16px; }
+  :host([density="compact"]) .org { min-height: 44px; padding: 5px 12px; gap: 10px; }
+  :host([density="compact"]) .wrap > .radios:last-child > .org:last-child { border-radius: 4px 4px 14px 14px; }
+  :host([density="compact"]) .org-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 12.5px; }
+  :host([density="compact"]) .org-name { font-size: 13px; line-height: 18px; }
+  :host([density="compact"]) .org-role { font-size: 11.5px; line-height: 15px; }
+  :host([density="compact"]) .active { font-size: 12px; gap: 5px; }
+  :host([density="compact"]) .more { min-height: 38px; padding: 0 12px; font-size: 13px; border-radius: 4px 4px 14px 14px; }
+  :host([density="compact"]) .signout { min-height: 40px; padding: 0 12px; gap: 10px; font-size: 13px; }
+  :host([density="compact"]) .error { padding: 4px 12px 2px; font-size: 12px; line-height: 17px; }
+  :host([density="compact"]) .legal { padding: 8px 0 2px; font-size: 11.5px; line-height: 16px; }
+
   @media (prefers-reduced-motion: reduce) {
     .popup, .popup.sheet { animation: none; }
     .spinner { animation-duration: 2400ms; }

package/dist/react.d.ts

@@ -39,11 +39,13 @@ export interface GpAccountProps {
     labels?: Partial<AccountLabels>;
     /** `row` for the bottom of a sidebar: the picture with the name over the address, full width. */
     layout?: "button" | "row";
+    /** `compact` for a sidebar: the popup a step smaller. */
+    density?: "regular" | "compact";
     align?: Align;
     placement?: Placement;
     className?: string;
 }
 /** `<gp-account>`, the account popup. */
-export declare function GpAccount({ core, person, organisations, product, viaIdentity, onSignOut, onSwitch, items, labels, layout, align, placement, className, }: GpAccountProps): ReactElement;
+export declare function GpAccount({ core, person, organisations, product, viaIdentity, onSignOut, onSwitch, items, labels, layout, density, align, placement, className, }: GpAccountProps): ReactElement;
 export {};
 //# sourceMappingURL=react.d.ts.map

package/dist/react.js

@@ -31,7 +31,7 @@ function GpApps({ core, labels, align, placement, className }) {
     return (0, react_1.createElement)("gp-apps", { ref, className, align, placement });
 }
 /** `<gp-account>`, the account popup. */
-function GpAccount({ core, person, organisations = null, product = null, viaIdentity = false, onSignOut = null, onSwitch = null, items = null, labels, layout, align, placement, className, }) {
+function GpAccount({ core, person, organisations = null, product = null, viaIdentity = false, onSignOut = null, onSwitch = null, items = null, labels, layout, density, align, placement, className, }) {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         (0, index_js_1.defineChromeElements)();
@@ -72,6 +72,6 @@ function GpAccount({ core, person, organisations = null, product = null, viaIden
         if (ref.current !== null && labels !== undefined)
             ref.current.labels = labels;
     }, [labels]);
-    return (0, react_1.createElement)("gp-account", { ref, className, layout, align, placement });
+    return (0, react_1.createElement)("gp-account", { ref, className, layout, density, align, placement });
 }
 //# sourceMappingURL=react.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ghub/identity-chrome",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "The shared header controls of the Gelhaus Solutions products: the apps picker and the account popup, as custom elements with shadow DOM and as React wrappers. The browser half (state, cache, the last list held for an outage) and the server half (the token calls and a route handler). No dependencies.",
   "author": "Gelhaus Solutions (Enno Gelhaus) <egelhaus@ennogelhaus.de> (https://ennogelhaus.de)",
   "homepage": "https://ennogelhaus.de",