@aortl/admin-react 0.4.0 → 0.5.1

package/dist/AdminRoot.d.ts

@@ -1,5 +1,16 @@
 import { ComponentProps } from 'react';
 export interface AdminRootProps extends ComponentProps<"div"> {
+    /**
+     * Force a color scheme for this subtree. Sets `data-theme`, which flips the
+     * semantic tokens and `color-scheme`. Omit to follow the OS preference.
+     */
+    theme?: "light" | "dark";
+    /**
+     * CSS color (e.g. `var(--color-purple-600)`) applied as `--color-system-accent`
+     * to brand-shift the navbar + footer stripes and `<BrandTile>`. See
+     * [Customize › System accent](https://digital-udvikling.github.io/admin-design-system/basics/customize/#system-accent).
+     */
+    systemAccent?: string;
 }
-export declare function AdminRoot({ className, ...rest }: AdminRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminRoot({ className, theme, systemAccent, style, ...rest }: AdminRootProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AdminRoot.d.ts.map

package/dist/AdminRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminRoot.d.ts","sourceRoot":"","sources":["../src/AdminRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEhE,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAE/D"}
+{"version":3,"file":"AdminRoot.d.ts","sourceRoot":"","sources":["../src/AdminRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAC;AAG3D,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3D;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAc3F"}

package/dist/admin.scoped.css

@@ -178,7 +178,7 @@
 }
 @scope (._ao-admin-root) {
 @layer theme {
-  :scope, :host {
+  :scope, :scope:host, :scope :host {
     --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
     monospace;
@@ -383,13 +383,13 @@
   }
 }
 @layer base {
-  *, ::after, ::before, ::backdrop, ::file-selector-button {
+  :scope, :scope *, :scope::after, :scope ::after, :scope::before, :scope ::before, :scope::backdrop, :scope ::backdrop, :scope::file-selector-button, :scope ::file-selector-button {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     border: 0 solid;
   }
-  :scope, :host {
+  :scope, :scope:host, :scope :host {
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
@@ -398,74 +398,74 @@
     font-variation-settings: var(--default-font-variation-settings, normal);
     -webkit-tap-highlight-color: transparent;
   }
-  hr {
+  :scope hr {
     height: 0;
     color: inherit;
     border-top-width: 1px;
   }
-  abbr:where([title]) {
+  :scope abbr:where([title]) {
     -webkit-text-decoration: underline dotted;
     text-decoration: underline dotted;
   }
-  h1, h2, h3, h4, h5, h6 {
+  :scope h1, :scope h2, :scope h3, :scope h4, :scope h5, :scope h6 {
     font-size: inherit;
     font-weight: inherit;
   }
-  a {
+  :scope a {
     color: inherit;
     -webkit-text-decoration: inherit;
     text-decoration: inherit;
   }
-  b, strong {
+  :scope b, :scope strong {
     font-weight: bolder;
   }
-  code, kbd, samp, pre {
+  :scope code, :scope kbd, :scope samp, :scope pre {
     font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
     font-feature-settings: var(--default-mono-font-feature-settings, normal);
     font-variation-settings: var(--default-mono-font-variation-settings, normal);
     font-size: 1em;
   }
-  small {
+  :scope small {
     font-size: 80%;
   }
-  sub, sup {
+  :scope sub, :scope sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
   }
-  sub {
+  :scope sub {
     bottom: -0.25em;
   }
-  sup {
+  :scope sup {
     top: -0.5em;
   }
-  table {
+  :scope table {
     text-indent: 0;
     border-color: inherit;
     border-collapse: collapse;
   }
-  :-moz-focusring {
+  :scope:-moz-focusring, :scope :-moz-focusring {
     outline: auto;
   }
-  progress {
+  :scope progress {
     vertical-align: baseline;
   }
-  summary {
+  :scope summary {
     display: list-item;
   }
-  ol, ul, menu {
+  :scope ol, :scope ul, :scope menu {
     list-style: none;
   }
-  img, svg, video, canvas, audio, iframe, embed, object {
+  :scope img, :scope svg, :scope video, :scope canvas, :scope audio, :scope iframe, :scope embed, :scope object {
     display: block;
     vertical-align: middle;
   }
-  img, video {
+  :scope img, :scope video {
     max-width: 100%;
     height: auto;
   }
-  button, input, select, optgroup, textarea, ::file-selector-button {
+  :scope button, :scope input, :scope select, :scope optgroup, :scope textarea, :scope::file-selector-button, :scope ::file-selector-button {
     font: inherit;
     font-feature-settings: inherit;
     font-variation-settings: inherit;
@@ -475,58 +475,58 @@
     background-color: transparent;
     opacity: 1;
   }
-  :where(select:is([multiple], [size])) optgroup {
+  :scope:where(select:is([multiple], [size])) optgroup, :scope :where(select:is([multiple], [size])) optgroup {
     font-weight: bolder;
   }
-  :where(select:is([multiple], [size])) optgroup option {
+  :scope:where(select:is([multiple], [size])) optgroup option, :scope :where(select:is([multiple], [size])) optgroup option {
     padding-inline-start: 20px;
   }
-  ::file-selector-button {
+  :scope::file-selector-button, :scope ::file-selector-button {
     margin-inline-end: 4px;
   }
-  ::placeholder {
+  :scope::placeholder, :scope ::placeholder {
     opacity: 1;
   }
   @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
-    ::placeholder {
+    :scope::placeholder, :scope ::placeholder {
       color: currentcolor;
       @supports (color: color-mix(in lab, red, red)) {
         color: color-mix(in oklab, currentcolor 50%, transparent);
       }
     }
   }
-  textarea {
+  :scope textarea {
     resize: vertical;
   }
-  ::-webkit-search-decoration {
+  :scope::-webkit-search-decoration, :scope ::-webkit-search-decoration {
     -webkit-appearance: none;
   }
-  ::-webkit-date-and-time-value {
+  :scope::-webkit-date-and-time-value, :scope ::-webkit-date-and-time-value {
     min-height: 1lh;
     text-align: inherit;
   }
-  ::-webkit-datetime-edit {
+  :scope::-webkit-datetime-edit, :scope ::-webkit-datetime-edit {
     display: inline-flex;
   }
-  ::-webkit-datetime-edit-fields-wrapper {
+  :scope::-webkit-datetime-edit-fields-wrapper, :scope ::-webkit-datetime-edit-fields-wrapper {
     padding: 0;
   }
-  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+  :scope::-webkit-datetime-edit, :scope ::-webkit-datetime-edit, :scope::-webkit-datetime-edit-year-field, :scope ::-webkit-datetime-edit-year-field, :scope::-webkit-datetime-edit-month-field, :scope ::-webkit-datetime-edit-month-field, :scope::-webkit-datetime-edit-day-field, :scope ::-webkit-datetime-edit-day-field, :scope::-webkit-datetime-edit-hour-field, :scope ::-webkit-datetime-edit-hour-field, :scope::-webkit-datetime-edit-minute-field, :scope ::-webkit-datetime-edit-minute-field, :scope::-webkit-datetime-edit-second-field, :scope ::-webkit-datetime-edit-second-field, :scope::-webkit-datetime-edit-millisecond-field, :scope ::-webkit-datetime-edit-millisecond-field, :scope::-webkit-datetime-edit-meridiem-field, :scope ::-webkit-datetime-edit-meridiem-field {
     padding-block: 0;
   }
-  ::-webkit-calendar-picker-indicator {
+  :scope::-webkit-calendar-picker-indicator, :scope ::-webkit-calendar-picker-indicator {
     line-height: 1;
   }
-  :-moz-ui-invalid {
+  :scope:-moz-ui-invalid, :scope :-moz-ui-invalid {
     box-shadow: none;
   }
-  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+  :scope button, :scope input:where([type="button"], [type="reset"], [type="submit"]), :scope::file-selector-button, :scope ::file-selector-button {
     appearance: button;
   }
-  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+  :scope::-webkit-inner-spin-button, :scope ::-webkit-inner-spin-button, :scope::-webkit-outer-spin-button, :scope ::-webkit-outer-spin-button {
     height: auto;
   }
-  [hidden]:where(:not([hidden="until-found"])) {
+  :scope[hidden]:where(:not([hidden="until-found"])), :scope [hidden]:where(:not([hidden="until-found"])) {
     display: none !important;
   }
 }
@@ -606,10 +606,10 @@
 :scope {
   color-scheme: light dark;
 }
-[data-theme="dark"] {
+:scope[data-theme="dark"], :scope [data-theme="dark"] {
   color-scheme: dark;
 }
-[data-theme="light"] {
+:scope[data-theme="light"], :scope [data-theme="light"] {
   color-scheme: light;
 }
 @layer base {
@@ -624,7 +624,7 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
     line-height: 1.5;
   }
-  h1 {
+  :scope h1 {
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
     --tw-leading: var(--leading-tight);
@@ -632,7 +632,7 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  h2 {
+  :scope h2 {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
     --tw-leading: var(--leading-tight);
@@ -640,7 +640,7 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  h3 {
+  :scope h3 {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     --tw-leading: var(--leading-snug);
@@ -3512,7 +3512,7 @@
 }
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-    *, ::before, ::after, ::backdrop {
+    :scope, :scope *, :scope::before, :scope ::before, :scope::after, :scope ::after, :scope::backdrop, :scope ::backdrop {
       --tw-ordinal: initial;
       --tw-slashed-zero: initial;
       --tw-numeric-figure: initial;

package/dist/index.cjs

@@ -66,10 +66,16 @@ var Accordion = Object.assign(AccordionRoot, {
 });
 //#endregion
 //#region src/AdminRoot.tsx
-function AdminRoot({ className, ...rest }) {
+function AdminRoot({ className, theme, systemAccent, style, ...rest }) {
+	const rootStyle = systemAccent !== void 0 ? {
+		...style,
+		"--color-system-accent": systemAccent
+	} : style;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: cn("admin-root", className),
-		...rest
+		style: rootStyle,
+		...rest,
+		...theme !== void 0 && { "data-theme": theme }
 	});
 }
 //#endregion