@stridge/noctis-design-tokens 1.0.0-beta.5 → 1.0.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/graph/components.js +299 -0
- package/dist/tokens.css +95 -0
- package/dist/tokens.json +680 -0
- package/package.json +2 -2
package/dist/graph/components.js
CHANGED
|
@@ -597,6 +597,152 @@ const autocomplete = {
|
|
|
597
597
|
}, "0.625rem", "Leading inset of a group label.", "The start inset that lines a group heading up with the option row's content edge (the same inline padding the rows use). Keep it in step with the item inline padding.")
|
|
598
598
|
]
|
|
599
599
|
};
|
|
600
|
+
const command = {
|
|
601
|
+
component: "command",
|
|
602
|
+
category: "overlays",
|
|
603
|
+
slotPrefix: "noctis",
|
|
604
|
+
anatomy: [
|
|
605
|
+
"command",
|
|
606
|
+
"command-input",
|
|
607
|
+
"command-list",
|
|
608
|
+
"command-item",
|
|
609
|
+
"command-empty",
|
|
610
|
+
"command-group-label"
|
|
611
|
+
],
|
|
612
|
+
options: {},
|
|
613
|
+
states: [
|
|
614
|
+
"highlighted",
|
|
615
|
+
"disabled",
|
|
616
|
+
"active"
|
|
617
|
+
],
|
|
618
|
+
consumes: [],
|
|
619
|
+
mints: [
|
|
620
|
+
raw("964c156e-493a-40af-bf7f-e8f918cbe1e3", {
|
|
621
|
+
kind: "component",
|
|
622
|
+
component: "command",
|
|
623
|
+
property: "inset-block-start"
|
|
624
|
+
}, "12vh", "Distance from the top of the viewport to the modal palette.", "How far down the palette floats in its modal form; smaller values raise it toward the top."),
|
|
625
|
+
raw("6ea3439e-6935-46ec-ac98-f5235643ed2d", {
|
|
626
|
+
kind: "component",
|
|
627
|
+
component: "command",
|
|
628
|
+
property: "height"
|
|
629
|
+
}, "min(60vh, 460px)", "Fixed height of the modal palette so it never jumps as results stream in.", "The modal palette's locked height; capped at 460px on tall viewports."),
|
|
630
|
+
raw("723a3bbd-cdad-40c7-bf00-8292c524b076", {
|
|
631
|
+
kind: "component",
|
|
632
|
+
component: "command",
|
|
633
|
+
property: "width"
|
|
634
|
+
}, "min(40rem, 92vw)", "Width of the modal palette.", "The modal palette's width; shrinks to 92vw on narrow viewports."),
|
|
635
|
+
raw("3ff47eea-2f40-4c74-bafe-ad12aae8db43", {
|
|
636
|
+
kind: "component",
|
|
637
|
+
component: "command",
|
|
638
|
+
property: "border-radius"
|
|
639
|
+
}, "var(--noctis-radius-md)", "Corner radius of the palette panel.", "The rounding of the panel's outer corners — a tight popover radius, not a soft card."),
|
|
640
|
+
aliased("f9443395-0ea6-4ec4-8c95-535f5c0acd61", {
|
|
641
|
+
kind: "component",
|
|
642
|
+
component: "command",
|
|
643
|
+
property: "transition-duration"
|
|
644
|
+
}, { raw: "var(--noctis-duration-overlay)" }, "Duration of the modal palette's scale-fade enter/exit.", "How long the modal palette takes to scale and fade in and out."),
|
|
645
|
+
raw("e7f3b78b-2c73-45af-b182-c50b53f6452c", {
|
|
646
|
+
kind: "component",
|
|
647
|
+
component: "command",
|
|
648
|
+
anatomy: "input",
|
|
649
|
+
property: "height"
|
|
650
|
+
}, "3rem", "Height of the query input row.", "The tap target of the query input; taller than a standard control for a command-bar feel."),
|
|
651
|
+
raw("2c7c1c86-ec81-432e-a194-2dc1a784e747", {
|
|
652
|
+
kind: "component",
|
|
653
|
+
component: "command",
|
|
654
|
+
anatomy: "list",
|
|
655
|
+
property: "padding"
|
|
656
|
+
}, "0.375rem", "Padding around the scrollable command list.", "The inset between the panel edge and its rows (the row highlight's gutter)."),
|
|
657
|
+
raw("a9f7ec66-8a03-4c53-9d97-2c8d21e8151f", {
|
|
658
|
+
kind: "component",
|
|
659
|
+
component: "command",
|
|
660
|
+
anatomy: "list",
|
|
661
|
+
property: "height"
|
|
662
|
+
}, "auto", "Measured height of the scrollable list (runtime-driven; the resting default is content height).", "The list's own height. A ResizeObserver writes the current content height to this var as the rows change, so the panel can animate between sizes instead of jumping; until then it falls back to fitting its content."),
|
|
663
|
+
aliased("08697fcf-2ec0-4ab4-931e-72229f37ee80", {
|
|
664
|
+
kind: "component",
|
|
665
|
+
component: "command",
|
|
666
|
+
anatomy: "list",
|
|
667
|
+
property: "transition-duration"
|
|
668
|
+
}, { raw: "var(--noctis-duration-regular)" }, "Duration of the list's height animation as the rows change.", "How long the palette takes to grow or shrink to fit a new set of rows."),
|
|
669
|
+
raw("580f7118-6742-4b78-9d18-6bc64bdd8fec", {
|
|
670
|
+
kind: "component",
|
|
671
|
+
component: "command",
|
|
672
|
+
anatomy: "item",
|
|
673
|
+
property: "height"
|
|
674
|
+
}, "2.5rem", "Minimum height of a command row.", "The row's min-height; the inline padding rhythm fills any extra space."),
|
|
675
|
+
raw("9cbb6199-6558-4212-ad3d-218d4023251d", {
|
|
676
|
+
kind: "component",
|
|
677
|
+
component: "command",
|
|
678
|
+
anatomy: "item",
|
|
679
|
+
property: "padding-inline"
|
|
680
|
+
}, "0.375rem", "Inline padding of a command row.", "The horizontal inset of a row's content inside its highlight."),
|
|
681
|
+
raw("4fa3d1bf-7c5b-46dc-b126-0e309e641dd4", {
|
|
682
|
+
kind: "component",
|
|
683
|
+
component: "command",
|
|
684
|
+
anatomy: "item",
|
|
685
|
+
property: "padding-block"
|
|
686
|
+
}, "0.25rem", "Block padding of a command row.", "The vertical inset of a row's content, so multi-line rows breathe; single-line rows keep their min-height."),
|
|
687
|
+
raw("02f374e1-7d62-48b1-9cae-e50e8a22a9fe", {
|
|
688
|
+
kind: "component",
|
|
689
|
+
component: "command",
|
|
690
|
+
anatomy: "item",
|
|
691
|
+
property: "gap"
|
|
692
|
+
}, "0.5rem", "Gap between a command's leading glyph and its label.", "The spacing between a row's optional icon column and its label."),
|
|
693
|
+
raw("6c79bb24-9347-458a-8ff5-270f3d892217", {
|
|
694
|
+
kind: "component",
|
|
695
|
+
component: "command",
|
|
696
|
+
anatomy: "item",
|
|
697
|
+
property: "border-radius"
|
|
698
|
+
}, "var(--noctis-radius-sm)", "Corner radius of a command row's highlight.", "The radius of the row's highlight fill — a tight rounding so the highlighted row reads as a crisp bar, not a pill."),
|
|
699
|
+
aliased("718e3a0a-2357-41c1-b023-a275a8a69110", {
|
|
700
|
+
kind: "component",
|
|
701
|
+
component: "command",
|
|
702
|
+
anatomy: "item",
|
|
703
|
+
property: "color"
|
|
704
|
+
}, { role: "secondary" }, "Command row label colour at rest.", "The resting text colour of a row."),
|
|
705
|
+
aliased("85bd4c15-9ffa-46f6-97fc-4ea45136ba2d", {
|
|
706
|
+
kind: "component",
|
|
707
|
+
component: "command",
|
|
708
|
+
anatomy: "item",
|
|
709
|
+
property: "color",
|
|
710
|
+
state: "highlighted"
|
|
711
|
+
}, { role: "foreground" }, "Command row label colour while highlighted.", "The text colour of the keyboard- or pointer-highlighted row."),
|
|
712
|
+
aliased("7bc8fa50-3db9-4758-9771-6bd5013fe999", {
|
|
713
|
+
kind: "component",
|
|
714
|
+
component: "command",
|
|
715
|
+
anatomy: "item",
|
|
716
|
+
property: "background-color",
|
|
717
|
+
state: "highlighted"
|
|
718
|
+
}, { role: "control-ghost-hover" }, "Command row highlight fill.", "The neutral fill behind the highlighted row; the accent stays a signal, not a hover."),
|
|
719
|
+
aliased("27205743-dee6-49de-931a-4d13e510d9bc", {
|
|
720
|
+
kind: "component",
|
|
721
|
+
component: "command",
|
|
722
|
+
anatomy: "item",
|
|
723
|
+
property: "background-color",
|
|
724
|
+
state: "active"
|
|
725
|
+
}, { role: "control-ghost-selected" }, "Command row pressed fill.", "The firmer neutral fill while a row is pressed, as tactile feedback before it commits."),
|
|
726
|
+
raw("48640222-69af-4b5f-800d-8e1261403438", {
|
|
727
|
+
kind: "component",
|
|
728
|
+
component: "command",
|
|
729
|
+
anatomy: "empty",
|
|
730
|
+
property: "padding-block"
|
|
731
|
+
}, "var(--noctis-space-6)", "Block padding of the empty / no-results message.", "The vertical breathing room around the centred no-results copy."),
|
|
732
|
+
raw("1f519fba-56e9-42ea-8316-462624c96dcd", {
|
|
733
|
+
kind: "component",
|
|
734
|
+
component: "command",
|
|
735
|
+
anatomy: "group-label",
|
|
736
|
+
property: "padding-inline"
|
|
737
|
+
}, "var(--noctis-space-2\\.5)", "Trailing inline padding of a group label.", "The end inset of a section heading."),
|
|
738
|
+
raw("a1280649-2d3d-41ed-a363-c793ec6aac83", {
|
|
739
|
+
kind: "component",
|
|
740
|
+
component: "command",
|
|
741
|
+
anatomy: "group-label",
|
|
742
|
+
property: "padding-inline-start"
|
|
743
|
+
}, "0.375rem", "Leading inset of a group label.", "The start inset that lines a section heading up with the row's content edge (the same inline padding the rows use). Keep it in step with the item inline padding.")
|
|
744
|
+
]
|
|
745
|
+
};
|
|
600
746
|
const input = {
|
|
601
747
|
component: "input",
|
|
602
748
|
category: "fields",
|
|
@@ -3499,6 +3645,156 @@ const badge = {
|
|
|
3499
3645
|
}, { raw: "0.875rem" }, "Edge length of a leading icon glyph.", "The width and height the chip clamps a leading icon to, per size, so the glyph tracks the label.", { size: { sm: { raw: "0.75rem" } } })
|
|
3500
3646
|
]
|
|
3501
3647
|
};
|
|
3648
|
+
const skeleton = {
|
|
3649
|
+
component: "skeleton",
|
|
3650
|
+
category: "data",
|
|
3651
|
+
slotPrefix: "noctis",
|
|
3652
|
+
anatomy: [
|
|
3653
|
+
"skeleton",
|
|
3654
|
+
"skeleton-box",
|
|
3655
|
+
"skeleton-circle",
|
|
3656
|
+
"skeleton-text",
|
|
3657
|
+
"skeleton-line"
|
|
3658
|
+
],
|
|
3659
|
+
options: { variant: [
|
|
3660
|
+
"shimmer",
|
|
3661
|
+
"pulse",
|
|
3662
|
+
"none"
|
|
3663
|
+
] },
|
|
3664
|
+
states: [],
|
|
3665
|
+
consumes: [],
|
|
3666
|
+
optionSlots: { variant: "skeleton" },
|
|
3667
|
+
slotGroups: {
|
|
3668
|
+
root: ["skeleton"],
|
|
3669
|
+
fill: [
|
|
3670
|
+
"skeleton-box",
|
|
3671
|
+
"skeleton-circle",
|
|
3672
|
+
"skeleton-line"
|
|
3673
|
+
],
|
|
3674
|
+
shimmer: [
|
|
3675
|
+
"skeleton-box",
|
|
3676
|
+
"skeleton-circle",
|
|
3677
|
+
"skeleton-line"
|
|
3678
|
+
]
|
|
3679
|
+
},
|
|
3680
|
+
mints: [
|
|
3681
|
+
raw("e698ed6f-926b-4795-9c8b-b5b389c170c6", {
|
|
3682
|
+
kind: "component",
|
|
3683
|
+
component: "skeleton",
|
|
3684
|
+
anatomy: "root",
|
|
3685
|
+
property: "gap"
|
|
3686
|
+
}, "var(--noctis-space-3)", "Gap between stacked placeholders in a group.", "The spacing the `Skeleton.Root` column holds between its child placeholders."),
|
|
3687
|
+
aliased("2ecab953-f65f-4c6c-8527-289a44b4b2b7", {
|
|
3688
|
+
kind: "component",
|
|
3689
|
+
component: "skeleton",
|
|
3690
|
+
anatomy: "fill",
|
|
3691
|
+
property: "background-color"
|
|
3692
|
+
}, { role: "well" }, "Placeholder fill colour shared by every shape.", "The base colour of a box/circle/line placeholder; the surface-adaptive `well` overlay, so a placeholder stays visible on any surface (canvas, card, or sunken panel)."),
|
|
3693
|
+
aliased("d63ff16e-b1cf-4c96-9474-d8965343c8c7", {
|
|
3694
|
+
kind: "component",
|
|
3695
|
+
component: "skeleton",
|
|
3696
|
+
anatomy: "shimmer",
|
|
3697
|
+
property: "background-color"
|
|
3698
|
+
}, { role: "surface-raised" }, "Colour of the moving shimmer band.", "The brighter neutral the `shimmer` variant sweeps across the placeholder; a raised surface, so the sweep reads as a light highlight in both light and dark mode."),
|
|
3699
|
+
raw("d00c5ade-6bf1-4771-8563-eb2af18551c3", {
|
|
3700
|
+
kind: "component",
|
|
3701
|
+
component: "skeleton",
|
|
3702
|
+
anatomy: "shimmer",
|
|
3703
|
+
property: "animation-duration"
|
|
3704
|
+
}, "calc(var(--noctis-duration-slow) * 4)", "Duration of one shimmer sweep / pulse cycle.", "How long the `shimmer` sweep takes to cross a placeholder (and the half-cycle of the `pulse` fade); a multiple of the slow motion stop so it stays calm."),
|
|
3705
|
+
raw("c1409cc8-3865-4487-b1a0-09ef7612bee4", {
|
|
3706
|
+
kind: "component",
|
|
3707
|
+
component: "skeleton",
|
|
3708
|
+
anatomy: "box",
|
|
3709
|
+
property: "block-size"
|
|
3710
|
+
}, "1.25rem", "Default height of a box placeholder.", "The block size of `Skeleton.Box` before any override; box fills its inline space, so only the height has a default — set the `style`/`className` height to match the content it stands in for."),
|
|
3711
|
+
raw("61e6be3d-db11-463b-bbf0-da36c32bc923", {
|
|
3712
|
+
kind: "component",
|
|
3713
|
+
component: "skeleton",
|
|
3714
|
+
anatomy: "box",
|
|
3715
|
+
property: "border-radius"
|
|
3716
|
+
}, "var(--noctis-radius-md)", "Corner radius of a box placeholder.", "The rounding of `Skeleton.Box`; follows the radius knob on the capped md step."),
|
|
3717
|
+
raw("76001ed2-a124-487f-b6cb-f87c7454c324", {
|
|
3718
|
+
kind: "component",
|
|
3719
|
+
component: "skeleton",
|
|
3720
|
+
anatomy: "circle",
|
|
3721
|
+
property: "size"
|
|
3722
|
+
}, "2.5rem", "Default diameter of a circle placeholder.", "The width and height of `Skeleton.Circle` before any override; size it to match the avatar or icon it stands in for."),
|
|
3723
|
+
raw("f1beb79a-1de6-4d9f-81fc-9a22e37384a1", {
|
|
3724
|
+
kind: "component",
|
|
3725
|
+
component: "skeleton",
|
|
3726
|
+
anatomy: "line",
|
|
3727
|
+
property: "block-size"
|
|
3728
|
+
}, "0.7em", "Height of a single text line placeholder.", "The block size of one `Skeleton.Line`, in `em` so it tracks the surrounding text size — the cap height a real line of text would occupy."),
|
|
3729
|
+
raw("9cc376d7-90b0-4ece-8c21-7542c8059a47", {
|
|
3730
|
+
kind: "component",
|
|
3731
|
+
component: "skeleton",
|
|
3732
|
+
anatomy: "line",
|
|
3733
|
+
property: "border-radius"
|
|
3734
|
+
}, "var(--noctis-radius-sm)", "Corner radius of a text line placeholder.", "The rounding of a `Skeleton.Line`; a small radius so a thin line reads as a soft bar."),
|
|
3735
|
+
raw("0e8f7d2c-1b3a-4c5e-9f6d-7a8b9c0d1e2f", {
|
|
3736
|
+
kind: "component",
|
|
3737
|
+
component: "skeleton",
|
|
3738
|
+
anatomy: "text",
|
|
3739
|
+
property: "gap"
|
|
3740
|
+
}, "var(--noctis-space-2)", "Gap between lines in a text placeholder.", "The spacing `Skeleton.Text` holds between its stacked `Skeleton.Line`s.")
|
|
3741
|
+
]
|
|
3742
|
+
};
|
|
3743
|
+
const breadcrumb = {
|
|
3744
|
+
component: "breadcrumb",
|
|
3745
|
+
category: "navigation",
|
|
3746
|
+
slotPrefix: "noctis",
|
|
3747
|
+
anatomy: [
|
|
3748
|
+
"breadcrumb",
|
|
3749
|
+
"breadcrumb-list",
|
|
3750
|
+
"breadcrumb-item",
|
|
3751
|
+
"breadcrumb-link",
|
|
3752
|
+
"breadcrumb-page",
|
|
3753
|
+
"breadcrumb-separator",
|
|
3754
|
+
"breadcrumb-ellipsis",
|
|
3755
|
+
"breadcrumb-icon"
|
|
3756
|
+
],
|
|
3757
|
+
options: { size: ["sm", "md"] },
|
|
3758
|
+
states: [],
|
|
3759
|
+
consumes: [],
|
|
3760
|
+
optionSlots: { size: "breadcrumb" },
|
|
3761
|
+
mints: [
|
|
3762
|
+
aliased("5ac8741d-5850-46fa-8258-80067e1bf193", {
|
|
3763
|
+
kind: "component",
|
|
3764
|
+
component: "breadcrumb",
|
|
3765
|
+
property: "gap"
|
|
3766
|
+
}, { raw: "0.375rem" }, "Gap between a crumb's leading icon and its label.", "The spacing a `link` or `page` holds between a leading icon and the label text, per size; declared on the root and inherited by both crumb kinds.", { size: { sm: { raw: "0.25rem" } } }),
|
|
3767
|
+
aliased("34e53704-fe40-4c9d-bc61-ca7d81786eeb", {
|
|
3768
|
+
kind: "component",
|
|
3769
|
+
component: "breadcrumb",
|
|
3770
|
+
property: "font-size"
|
|
3771
|
+
}, { raw: "var(--noctis-text-small)" }, "Trail type size.", "The font size of every crumb and separator, per size; the 14px `small` step at `md`, the 13px `mini` step at `sm`.", { size: { sm: { raw: "var(--noctis-text-mini)" } } }),
|
|
3772
|
+
aliased("fe63d830-e58e-4bc9-b4c0-dd5b9fee1540", {
|
|
3773
|
+
kind: "component",
|
|
3774
|
+
component: "breadcrumb",
|
|
3775
|
+
anatomy: "list",
|
|
3776
|
+
property: "gap"
|
|
3777
|
+
}, { raw: "0.375rem" }, "Gap between crumbs and separators in the trail.", "The spacing the ordered list holds between adjacent crumbs and the separators between them, per size.", { size: { sm: { raw: "0.25rem" } } }),
|
|
3778
|
+
aliased("219dcd50-453f-4094-aa5b-aeeacfceef18", {
|
|
3779
|
+
kind: "component",
|
|
3780
|
+
component: "breadcrumb",
|
|
3781
|
+
anatomy: "icon",
|
|
3782
|
+
property: "size"
|
|
3783
|
+
}, { raw: "1rem" }, "Edge length of a crumb's leading icon.", "The width and height a crumb clamps a leading icon to, per size, so the glyph tracks the label.", { size: { sm: { raw: "0.875rem" } } }),
|
|
3784
|
+
aliased("416cd517-ae0b-46e7-b62c-34c2614bf928", {
|
|
3785
|
+
kind: "component",
|
|
3786
|
+
component: "breadcrumb",
|
|
3787
|
+
anatomy: "separator",
|
|
3788
|
+
property: "size"
|
|
3789
|
+
}, { raw: "1rem" }, "Edge length of the separator glyph.", "The width and height of the chevron (or custom) glyph between crumbs, per size.", { size: { sm: { raw: "0.875rem" } } }),
|
|
3790
|
+
raw("9082c151-ac80-451f-a0bd-f5a9becfb7e5", {
|
|
3791
|
+
kind: "component",
|
|
3792
|
+
component: "breadcrumb",
|
|
3793
|
+
anatomy: "link",
|
|
3794
|
+
property: "border-radius"
|
|
3795
|
+
}, "var(--noctis-radius-sm)", "Corner radius of a link's focus ring.", "The rounding of the focus-visible outline drawn around an interactive crumb, so the ring hugs the link's hit area.")
|
|
3796
|
+
]
|
|
3797
|
+
};
|
|
3502
3798
|
const colorSwatch = {
|
|
3503
3799
|
component: "color-swatch",
|
|
3504
3800
|
category: "fields",
|
|
@@ -4412,6 +4708,7 @@ const COMPONENT_DECLARATIONS = [
|
|
|
4412
4708
|
alertDialog,
|
|
4413
4709
|
rail,
|
|
4414
4710
|
combobox,
|
|
4711
|
+
command,
|
|
4415
4712
|
searchDialog,
|
|
4416
4713
|
dialog,
|
|
4417
4714
|
colorPicker,
|
|
@@ -4421,6 +4718,8 @@ const COMPONENT_DECLARATIONS = [
|
|
|
4421
4718
|
checkbox,
|
|
4422
4719
|
avatar,
|
|
4423
4720
|
badge,
|
|
4721
|
+
skeleton,
|
|
4722
|
+
breadcrumb,
|
|
4424
4723
|
otpField,
|
|
4425
4724
|
switchControl,
|
|
4426
4725
|
progress,
|
package/dist/tokens.css
CHANGED
|
@@ -2127,6 +2127,45 @@
|
|
|
2127
2127
|
--_combobox-input-height: var(--noctis-combobox-input-height, var(--noctis-size-control-lg));
|
|
2128
2128
|
--_combobox-input-padding-inline: var(--noctis-combobox-input-padding-inline, 0.875rem);
|
|
2129
2129
|
}
|
|
2130
|
+
[data-slot="noctis-command"] {
|
|
2131
|
+
--_command-inset-block-start: var(--noctis-command-inset-block-start, 12vh);
|
|
2132
|
+
--_command-height: var(--noctis-command-height, min(60vh, 460px));
|
|
2133
|
+
--_command-width: var(--noctis-command-width, min(40rem, 92vw));
|
|
2134
|
+
--_command-border-radius: var(--noctis-command-border-radius, var(--noctis-radius-md));
|
|
2135
|
+
--_command-transition-duration: var(--noctis-command-transition-duration, var(--noctis-duration-overlay));
|
|
2136
|
+
}
|
|
2137
|
+
[data-slot="noctis-command-input"] {
|
|
2138
|
+
--_command-input-height: var(--noctis-command-input-height, 3rem);
|
|
2139
|
+
}
|
|
2140
|
+
[data-slot="noctis-command-list"] {
|
|
2141
|
+
--_command-list-padding: var(--noctis-command-list-padding, 0.375rem);
|
|
2142
|
+
--_command-list-height: var(--noctis-command-list-height, auto);
|
|
2143
|
+
--_command-list-transition-duration: var(--noctis-command-list-transition-duration, var(--noctis-duration-regular));
|
|
2144
|
+
}
|
|
2145
|
+
[data-slot="noctis-command-item"] {
|
|
2146
|
+
--_command-item-height: var(--noctis-command-item-height, 2.5rem);
|
|
2147
|
+
--_command-item-padding-inline: var(--noctis-command-item-padding-inline, 0.375rem);
|
|
2148
|
+
--_command-item-padding-block: var(--noctis-command-item-padding-block, 0.25rem);
|
|
2149
|
+
--_command-item-gap: var(--noctis-command-item-gap, 0.5rem);
|
|
2150
|
+
--_command-item-border-radius: var(--noctis-command-item-border-radius, var(--noctis-radius-sm));
|
|
2151
|
+
--_command-item-color: var(--noctis-command-item-color, var(--noctis-color-secondary));
|
|
2152
|
+
--_command-item-color-highlighted: var(--noctis-command-item-color-highlighted, var(--noctis-color-foreground));
|
|
2153
|
+
--_command-item-background-color-highlighted: var(
|
|
2154
|
+
--noctis-command-item-background-color-highlighted,
|
|
2155
|
+
var(--noctis-color-control-ghost-hover)
|
|
2156
|
+
);
|
|
2157
|
+
--_command-item-background-color-active: var(
|
|
2158
|
+
--noctis-command-item-background-color-active,
|
|
2159
|
+
var(--noctis-color-control-ghost-selected)
|
|
2160
|
+
);
|
|
2161
|
+
}
|
|
2162
|
+
[data-slot="noctis-command-empty"] {
|
|
2163
|
+
--_command-empty-padding-block: var(--noctis-command-empty-padding-block, var(--noctis-space-6));
|
|
2164
|
+
}
|
|
2165
|
+
[data-slot="noctis-command-group-label"] {
|
|
2166
|
+
--_command-group-label-padding-inline: var(--noctis-command-group-label-padding-inline, var(--noctis-space-2\.5));
|
|
2167
|
+
--_command-group-label-padding-inline-start: var(--noctis-command-group-label-padding-inline-start, 0.375rem);
|
|
2168
|
+
}
|
|
2130
2169
|
[data-slot="noctis-search-dialog"] {
|
|
2131
2170
|
--_search-dialog-inset-block-start: var(--noctis-search-dialog-inset-block-start, 12vh);
|
|
2132
2171
|
--_search-dialog-height: var(--noctis-search-dialog-height, min(56vh, 420px));
|
|
@@ -2485,6 +2524,62 @@
|
|
|
2485
2524
|
[data-slot="noctis-badge"][data-size="sm"] [data-slot="noctis-badge-icon"] {
|
|
2486
2525
|
--_badge-icon-size: var(--noctis-badge-icon-size, 0.75rem);
|
|
2487
2526
|
}
|
|
2527
|
+
[data-slot="noctis-skeleton"] {
|
|
2528
|
+
--_skeleton-root-gap: var(--noctis-skeleton-root-gap, var(--noctis-space-3));
|
|
2529
|
+
}
|
|
2530
|
+
[data-slot="noctis-skeleton-box"],
|
|
2531
|
+
[data-slot="noctis-skeleton-circle"],
|
|
2532
|
+
[data-slot="noctis-skeleton-line"] {
|
|
2533
|
+
--_skeleton-fill-background-color: var(--noctis-skeleton-fill-background-color, var(--noctis-color-well));
|
|
2534
|
+
--_skeleton-shimmer-background-color: var(--noctis-skeleton-shimmer-background-color, var(--noctis-color-surface-raised));
|
|
2535
|
+
--_skeleton-shimmer-animation-duration: var(
|
|
2536
|
+
--noctis-skeleton-shimmer-animation-duration,
|
|
2537
|
+
calc(var(--noctis-duration-slow) * 4)
|
|
2538
|
+
);
|
|
2539
|
+
}
|
|
2540
|
+
[data-slot="noctis-skeleton-box"] {
|
|
2541
|
+
--_skeleton-box-block-size: var(--noctis-skeleton-box-block-size, 1.25rem);
|
|
2542
|
+
--_skeleton-box-border-radius: var(--noctis-skeleton-box-border-radius, var(--noctis-radius-md));
|
|
2543
|
+
}
|
|
2544
|
+
[data-slot="noctis-skeleton-circle"] {
|
|
2545
|
+
--_skeleton-circle-size: var(--noctis-skeleton-circle-size, 2.5rem);
|
|
2546
|
+
}
|
|
2547
|
+
[data-slot="noctis-skeleton-line"] {
|
|
2548
|
+
--_skeleton-line-block-size: var(--noctis-skeleton-line-block-size, 0.7em);
|
|
2549
|
+
--_skeleton-line-border-radius: var(--noctis-skeleton-line-border-radius, var(--noctis-radius-sm));
|
|
2550
|
+
}
|
|
2551
|
+
[data-slot="noctis-skeleton-text"] {
|
|
2552
|
+
--_skeleton-text-gap: var(--noctis-skeleton-text-gap, var(--noctis-space-2));
|
|
2553
|
+
}
|
|
2554
|
+
[data-slot="noctis-breadcrumb"] {
|
|
2555
|
+
--_breadcrumb-gap: var(--noctis-breadcrumb-gap, 0.375rem);
|
|
2556
|
+
--_breadcrumb-font-size: var(--noctis-breadcrumb-font-size, var(--noctis-text-small));
|
|
2557
|
+
}
|
|
2558
|
+
[data-slot="noctis-breadcrumb-list"] {
|
|
2559
|
+
--_breadcrumb-list-gap: var(--noctis-breadcrumb-list-gap, 0.375rem);
|
|
2560
|
+
}
|
|
2561
|
+
[data-slot="noctis-breadcrumb-icon"] {
|
|
2562
|
+
--_breadcrumb-icon-size: var(--noctis-breadcrumb-icon-size, 1rem);
|
|
2563
|
+
}
|
|
2564
|
+
[data-slot="noctis-breadcrumb-separator"] {
|
|
2565
|
+
--_breadcrumb-separator-size: var(--noctis-breadcrumb-separator-size, 1rem);
|
|
2566
|
+
}
|
|
2567
|
+
[data-slot="noctis-breadcrumb-link"] {
|
|
2568
|
+
--_breadcrumb-link-border-radius: var(--noctis-breadcrumb-link-border-radius, var(--noctis-radius-sm));
|
|
2569
|
+
}
|
|
2570
|
+
[data-slot="noctis-breadcrumb"][data-size="sm"] {
|
|
2571
|
+
--_breadcrumb-gap: var(--noctis-breadcrumb-gap, 0.25rem);
|
|
2572
|
+
--_breadcrumb-font-size: var(--noctis-breadcrumb-font-size, var(--noctis-text-mini));
|
|
2573
|
+
}
|
|
2574
|
+
[data-slot="noctis-breadcrumb"][data-size="sm"] [data-slot="noctis-breadcrumb-list"] {
|
|
2575
|
+
--_breadcrumb-list-gap: var(--noctis-breadcrumb-list-gap, 0.25rem);
|
|
2576
|
+
}
|
|
2577
|
+
[data-slot="noctis-breadcrumb"][data-size="sm"] [data-slot="noctis-breadcrumb-icon"] {
|
|
2578
|
+
--_breadcrumb-icon-size: var(--noctis-breadcrumb-icon-size, 0.875rem);
|
|
2579
|
+
}
|
|
2580
|
+
[data-slot="noctis-breadcrumb"][data-size="sm"] [data-slot="noctis-breadcrumb-separator"] {
|
|
2581
|
+
--_breadcrumb-separator-size: var(--noctis-breadcrumb-separator-size, 0.875rem);
|
|
2582
|
+
}
|
|
2488
2583
|
[data-slot="noctis-otp-field"] {
|
|
2489
2584
|
--_otp-field-gap: var(--noctis-otp-field-gap, 0.5rem);
|
|
2490
2585
|
}
|
package/dist/tokens.json
CHANGED
|
@@ -11451,6 +11451,351 @@
|
|
|
11451
11451
|
}
|
|
11452
11452
|
]
|
|
11453
11453
|
},
|
|
11454
|
+
{
|
|
11455
|
+
"component": "command",
|
|
11456
|
+
"category": "overlays",
|
|
11457
|
+
"slotPrefix": "noctis",
|
|
11458
|
+
"anatomy": ["command", "command-input", "command-list", "command-item", "command-empty", "command-group-label"],
|
|
11459
|
+
"options": {},
|
|
11460
|
+
"states": ["highlighted", "disabled", "active"],
|
|
11461
|
+
"consumes": [],
|
|
11462
|
+
"mints": [
|
|
11463
|
+
{
|
|
11464
|
+
"uuid": "964c156e-493a-40af-bf7f-e8f918cbe1e3",
|
|
11465
|
+
"tier": "component",
|
|
11466
|
+
"name": {
|
|
11467
|
+
"kind": "component",
|
|
11468
|
+
"component": "command",
|
|
11469
|
+
"property": "inset-block-start"
|
|
11470
|
+
},
|
|
11471
|
+
"value": {
|
|
11472
|
+
"raw": "12vh"
|
|
11473
|
+
},
|
|
11474
|
+
"description": "Distance from the top of the viewport to the modal palette.",
|
|
11475
|
+
"usage": "How far down the palette floats in its modal form; smaller values raise it toward the top.",
|
|
11476
|
+
"introduced": "0.0.0"
|
|
11477
|
+
},
|
|
11478
|
+
{
|
|
11479
|
+
"uuid": "6ea3439e-6935-46ec-ac98-f5235643ed2d",
|
|
11480
|
+
"tier": "component",
|
|
11481
|
+
"name": {
|
|
11482
|
+
"kind": "component",
|
|
11483
|
+
"component": "command",
|
|
11484
|
+
"property": "height"
|
|
11485
|
+
},
|
|
11486
|
+
"value": {
|
|
11487
|
+
"raw": "min(60vh, 460px)"
|
|
11488
|
+
},
|
|
11489
|
+
"description": "Fixed height of the modal palette so it never jumps as results stream in.",
|
|
11490
|
+
"usage": "The modal palette's locked height; capped at 460px on tall viewports.",
|
|
11491
|
+
"introduced": "0.0.0"
|
|
11492
|
+
},
|
|
11493
|
+
{
|
|
11494
|
+
"uuid": "723a3bbd-cdad-40c7-bf00-8292c524b076",
|
|
11495
|
+
"tier": "component",
|
|
11496
|
+
"name": {
|
|
11497
|
+
"kind": "component",
|
|
11498
|
+
"component": "command",
|
|
11499
|
+
"property": "width"
|
|
11500
|
+
},
|
|
11501
|
+
"value": {
|
|
11502
|
+
"raw": "min(40rem, 92vw)"
|
|
11503
|
+
},
|
|
11504
|
+
"description": "Width of the modal palette.",
|
|
11505
|
+
"usage": "The modal palette's width; shrinks to 92vw on narrow viewports.",
|
|
11506
|
+
"introduced": "0.0.0"
|
|
11507
|
+
},
|
|
11508
|
+
{
|
|
11509
|
+
"uuid": "3ff47eea-2f40-4c74-bafe-ad12aae8db43",
|
|
11510
|
+
"tier": "component",
|
|
11511
|
+
"name": {
|
|
11512
|
+
"kind": "component",
|
|
11513
|
+
"component": "command",
|
|
11514
|
+
"property": "border-radius"
|
|
11515
|
+
},
|
|
11516
|
+
"value": {
|
|
11517
|
+
"raw": "var(--noctis-radius-md)"
|
|
11518
|
+
},
|
|
11519
|
+
"description": "Corner radius of the palette panel.",
|
|
11520
|
+
"usage": "The rounding of the panel's outer corners — a tight popover radius, not a soft card.",
|
|
11521
|
+
"introduced": "0.0.0"
|
|
11522
|
+
},
|
|
11523
|
+
{
|
|
11524
|
+
"uuid": "f9443395-0ea6-4ec4-8c95-535f5c0acd61",
|
|
11525
|
+
"tier": "component",
|
|
11526
|
+
"name": {
|
|
11527
|
+
"kind": "component",
|
|
11528
|
+
"component": "command",
|
|
11529
|
+
"property": "transition-duration"
|
|
11530
|
+
},
|
|
11531
|
+
"value": {
|
|
11532
|
+
"raw": "var(--noctis-duration-overlay)"
|
|
11533
|
+
},
|
|
11534
|
+
"description": "Duration of the modal palette's scale-fade enter/exit.",
|
|
11535
|
+
"usage": "How long the modal palette takes to scale and fade in and out.",
|
|
11536
|
+
"introduced": "0.0.0"
|
|
11537
|
+
},
|
|
11538
|
+
{
|
|
11539
|
+
"uuid": "e7f3b78b-2c73-45af-b182-c50b53f6452c",
|
|
11540
|
+
"tier": "component",
|
|
11541
|
+
"name": {
|
|
11542
|
+
"kind": "component",
|
|
11543
|
+
"component": "command",
|
|
11544
|
+
"anatomy": "input",
|
|
11545
|
+
"property": "height"
|
|
11546
|
+
},
|
|
11547
|
+
"value": {
|
|
11548
|
+
"raw": "3rem"
|
|
11549
|
+
},
|
|
11550
|
+
"description": "Height of the query input row.",
|
|
11551
|
+
"usage": "The tap target of the query input; taller than a standard control for a command-bar feel.",
|
|
11552
|
+
"introduced": "0.0.0"
|
|
11553
|
+
},
|
|
11554
|
+
{
|
|
11555
|
+
"uuid": "2c7c1c86-ec81-432e-a194-2dc1a784e747",
|
|
11556
|
+
"tier": "component",
|
|
11557
|
+
"name": {
|
|
11558
|
+
"kind": "component",
|
|
11559
|
+
"component": "command",
|
|
11560
|
+
"anatomy": "list",
|
|
11561
|
+
"property": "padding"
|
|
11562
|
+
},
|
|
11563
|
+
"value": {
|
|
11564
|
+
"raw": "0.375rem"
|
|
11565
|
+
},
|
|
11566
|
+
"description": "Padding around the scrollable command list.",
|
|
11567
|
+
"usage": "The inset between the panel edge and its rows (the row highlight's gutter).",
|
|
11568
|
+
"introduced": "0.0.0"
|
|
11569
|
+
},
|
|
11570
|
+
{
|
|
11571
|
+
"uuid": "a9f7ec66-8a03-4c53-9d97-2c8d21e8151f",
|
|
11572
|
+
"tier": "component",
|
|
11573
|
+
"name": {
|
|
11574
|
+
"kind": "component",
|
|
11575
|
+
"component": "command",
|
|
11576
|
+
"anatomy": "list",
|
|
11577
|
+
"property": "height"
|
|
11578
|
+
},
|
|
11579
|
+
"value": {
|
|
11580
|
+
"raw": "auto"
|
|
11581
|
+
},
|
|
11582
|
+
"description": "Measured height of the scrollable list (runtime-driven; the resting default is content height).",
|
|
11583
|
+
"usage": "The list's own height. A ResizeObserver writes the current content height to this var as the rows change, so the panel can animate between sizes instead of jumping; until then it falls back to fitting its content.",
|
|
11584
|
+
"introduced": "0.0.0"
|
|
11585
|
+
},
|
|
11586
|
+
{
|
|
11587
|
+
"uuid": "08697fcf-2ec0-4ab4-931e-72229f37ee80",
|
|
11588
|
+
"tier": "component",
|
|
11589
|
+
"name": {
|
|
11590
|
+
"kind": "component",
|
|
11591
|
+
"component": "command",
|
|
11592
|
+
"anatomy": "list",
|
|
11593
|
+
"property": "transition-duration"
|
|
11594
|
+
},
|
|
11595
|
+
"value": {
|
|
11596
|
+
"raw": "var(--noctis-duration-regular)"
|
|
11597
|
+
},
|
|
11598
|
+
"description": "Duration of the list's height animation as the rows change.",
|
|
11599
|
+
"usage": "How long the palette takes to grow or shrink to fit a new set of rows.",
|
|
11600
|
+
"introduced": "0.0.0"
|
|
11601
|
+
},
|
|
11602
|
+
{
|
|
11603
|
+
"uuid": "580f7118-6742-4b78-9d18-6bc64bdd8fec",
|
|
11604
|
+
"tier": "component",
|
|
11605
|
+
"name": {
|
|
11606
|
+
"kind": "component",
|
|
11607
|
+
"component": "command",
|
|
11608
|
+
"anatomy": "item",
|
|
11609
|
+
"property": "height"
|
|
11610
|
+
},
|
|
11611
|
+
"value": {
|
|
11612
|
+
"raw": "2.5rem"
|
|
11613
|
+
},
|
|
11614
|
+
"description": "Minimum height of a command row.",
|
|
11615
|
+
"usage": "The row's min-height; the inline padding rhythm fills any extra space.",
|
|
11616
|
+
"introduced": "0.0.0"
|
|
11617
|
+
},
|
|
11618
|
+
{
|
|
11619
|
+
"uuid": "9cbb6199-6558-4212-ad3d-218d4023251d",
|
|
11620
|
+
"tier": "component",
|
|
11621
|
+
"name": {
|
|
11622
|
+
"kind": "component",
|
|
11623
|
+
"component": "command",
|
|
11624
|
+
"anatomy": "item",
|
|
11625
|
+
"property": "padding-inline"
|
|
11626
|
+
},
|
|
11627
|
+
"value": {
|
|
11628
|
+
"raw": "0.375rem"
|
|
11629
|
+
},
|
|
11630
|
+
"description": "Inline padding of a command row.",
|
|
11631
|
+
"usage": "The horizontal inset of a row's content inside its highlight.",
|
|
11632
|
+
"introduced": "0.0.0"
|
|
11633
|
+
},
|
|
11634
|
+
{
|
|
11635
|
+
"uuid": "4fa3d1bf-7c5b-46dc-b126-0e309e641dd4",
|
|
11636
|
+
"tier": "component",
|
|
11637
|
+
"name": {
|
|
11638
|
+
"kind": "component",
|
|
11639
|
+
"component": "command",
|
|
11640
|
+
"anatomy": "item",
|
|
11641
|
+
"property": "padding-block"
|
|
11642
|
+
},
|
|
11643
|
+
"value": {
|
|
11644
|
+
"raw": "0.25rem"
|
|
11645
|
+
},
|
|
11646
|
+
"description": "Block padding of a command row.",
|
|
11647
|
+
"usage": "The vertical inset of a row's content, so multi-line rows breathe; single-line rows keep their min-height.",
|
|
11648
|
+
"introduced": "0.0.0"
|
|
11649
|
+
},
|
|
11650
|
+
{
|
|
11651
|
+
"uuid": "02f374e1-7d62-48b1-9cae-e50e8a22a9fe",
|
|
11652
|
+
"tier": "component",
|
|
11653
|
+
"name": {
|
|
11654
|
+
"kind": "component",
|
|
11655
|
+
"component": "command",
|
|
11656
|
+
"anatomy": "item",
|
|
11657
|
+
"property": "gap"
|
|
11658
|
+
},
|
|
11659
|
+
"value": {
|
|
11660
|
+
"raw": "0.5rem"
|
|
11661
|
+
},
|
|
11662
|
+
"description": "Gap between a command's leading glyph and its label.",
|
|
11663
|
+
"usage": "The spacing between a row's optional icon column and its label.",
|
|
11664
|
+
"introduced": "0.0.0"
|
|
11665
|
+
},
|
|
11666
|
+
{
|
|
11667
|
+
"uuid": "6c79bb24-9347-458a-8ff5-270f3d892217",
|
|
11668
|
+
"tier": "component",
|
|
11669
|
+
"name": {
|
|
11670
|
+
"kind": "component",
|
|
11671
|
+
"component": "command",
|
|
11672
|
+
"anatomy": "item",
|
|
11673
|
+
"property": "border-radius"
|
|
11674
|
+
},
|
|
11675
|
+
"value": {
|
|
11676
|
+
"raw": "var(--noctis-radius-sm)"
|
|
11677
|
+
},
|
|
11678
|
+
"description": "Corner radius of a command row's highlight.",
|
|
11679
|
+
"usage": "The radius of the row's highlight fill — a tight rounding so the highlighted row reads as a crisp bar, not a pill.",
|
|
11680
|
+
"introduced": "0.0.0"
|
|
11681
|
+
},
|
|
11682
|
+
{
|
|
11683
|
+
"uuid": "718e3a0a-2357-41c1-b023-a275a8a69110",
|
|
11684
|
+
"tier": "component",
|
|
11685
|
+
"name": {
|
|
11686
|
+
"kind": "component",
|
|
11687
|
+
"component": "command",
|
|
11688
|
+
"anatomy": "item",
|
|
11689
|
+
"property": "color"
|
|
11690
|
+
},
|
|
11691
|
+
"value": {
|
|
11692
|
+
"role": "secondary"
|
|
11693
|
+
},
|
|
11694
|
+
"description": "Command row label colour at rest.",
|
|
11695
|
+
"usage": "The resting text colour of a row.",
|
|
11696
|
+
"introduced": "0.0.0"
|
|
11697
|
+
},
|
|
11698
|
+
{
|
|
11699
|
+
"uuid": "85bd4c15-9ffa-46f6-97fc-4ea45136ba2d",
|
|
11700
|
+
"tier": "component",
|
|
11701
|
+
"name": {
|
|
11702
|
+
"kind": "component",
|
|
11703
|
+
"component": "command",
|
|
11704
|
+
"anatomy": "item",
|
|
11705
|
+
"property": "color",
|
|
11706
|
+
"state": "highlighted"
|
|
11707
|
+
},
|
|
11708
|
+
"value": {
|
|
11709
|
+
"role": "foreground"
|
|
11710
|
+
},
|
|
11711
|
+
"description": "Command row label colour while highlighted.",
|
|
11712
|
+
"usage": "The text colour of the keyboard- or pointer-highlighted row.",
|
|
11713
|
+
"introduced": "0.0.0"
|
|
11714
|
+
},
|
|
11715
|
+
{
|
|
11716
|
+
"uuid": "7bc8fa50-3db9-4758-9771-6bd5013fe999",
|
|
11717
|
+
"tier": "component",
|
|
11718
|
+
"name": {
|
|
11719
|
+
"kind": "component",
|
|
11720
|
+
"component": "command",
|
|
11721
|
+
"anatomy": "item",
|
|
11722
|
+
"property": "background-color",
|
|
11723
|
+
"state": "highlighted"
|
|
11724
|
+
},
|
|
11725
|
+
"value": {
|
|
11726
|
+
"role": "control-ghost-hover"
|
|
11727
|
+
},
|
|
11728
|
+
"description": "Command row highlight fill.",
|
|
11729
|
+
"usage": "The neutral fill behind the highlighted row; the accent stays a signal, not a hover.",
|
|
11730
|
+
"introduced": "0.0.0"
|
|
11731
|
+
},
|
|
11732
|
+
{
|
|
11733
|
+
"uuid": "27205743-dee6-49de-931a-4d13e510d9bc",
|
|
11734
|
+
"tier": "component",
|
|
11735
|
+
"name": {
|
|
11736
|
+
"kind": "component",
|
|
11737
|
+
"component": "command",
|
|
11738
|
+
"anatomy": "item",
|
|
11739
|
+
"property": "background-color",
|
|
11740
|
+
"state": "active"
|
|
11741
|
+
},
|
|
11742
|
+
"value": {
|
|
11743
|
+
"role": "control-ghost-selected"
|
|
11744
|
+
},
|
|
11745
|
+
"description": "Command row pressed fill.",
|
|
11746
|
+
"usage": "The firmer neutral fill while a row is pressed, as tactile feedback before it commits.",
|
|
11747
|
+
"introduced": "0.0.0"
|
|
11748
|
+
},
|
|
11749
|
+
{
|
|
11750
|
+
"uuid": "48640222-69af-4b5f-800d-8e1261403438",
|
|
11751
|
+
"tier": "component",
|
|
11752
|
+
"name": {
|
|
11753
|
+
"kind": "component",
|
|
11754
|
+
"component": "command",
|
|
11755
|
+
"anatomy": "empty",
|
|
11756
|
+
"property": "padding-block"
|
|
11757
|
+
},
|
|
11758
|
+
"value": {
|
|
11759
|
+
"raw": "var(--noctis-space-6)"
|
|
11760
|
+
},
|
|
11761
|
+
"description": "Block padding of the empty / no-results message.",
|
|
11762
|
+
"usage": "The vertical breathing room around the centred no-results copy.",
|
|
11763
|
+
"introduced": "0.0.0"
|
|
11764
|
+
},
|
|
11765
|
+
{
|
|
11766
|
+
"uuid": "1f519fba-56e9-42ea-8316-462624c96dcd",
|
|
11767
|
+
"tier": "component",
|
|
11768
|
+
"name": {
|
|
11769
|
+
"kind": "component",
|
|
11770
|
+
"component": "command",
|
|
11771
|
+
"anatomy": "group-label",
|
|
11772
|
+
"property": "padding-inline"
|
|
11773
|
+
},
|
|
11774
|
+
"value": {
|
|
11775
|
+
"raw": "var(--noctis-space-2\\.5)"
|
|
11776
|
+
},
|
|
11777
|
+
"description": "Trailing inline padding of a group label.",
|
|
11778
|
+
"usage": "The end inset of a section heading.",
|
|
11779
|
+
"introduced": "0.0.0"
|
|
11780
|
+
},
|
|
11781
|
+
{
|
|
11782
|
+
"uuid": "a1280649-2d3d-41ed-a363-c793ec6aac83",
|
|
11783
|
+
"tier": "component",
|
|
11784
|
+
"name": {
|
|
11785
|
+
"kind": "component",
|
|
11786
|
+
"component": "command",
|
|
11787
|
+
"anatomy": "group-label",
|
|
11788
|
+
"property": "padding-inline-start"
|
|
11789
|
+
},
|
|
11790
|
+
"value": {
|
|
11791
|
+
"raw": "0.375rem"
|
|
11792
|
+
},
|
|
11793
|
+
"description": "Leading inset of a group label.",
|
|
11794
|
+
"usage": "The start inset that lines a section heading up with the row's content edge (the same inline padding the rows use). Keep it in step with the item inline padding.",
|
|
11795
|
+
"introduced": "0.0.0"
|
|
11796
|
+
}
|
|
11797
|
+
]
|
|
11798
|
+
},
|
|
11454
11799
|
{
|
|
11455
11800
|
"component": "search-dialog",
|
|
11456
11801
|
"category": "overlays",
|
|
@@ -13772,6 +14117,341 @@
|
|
|
13772
14117
|
}
|
|
13773
14118
|
]
|
|
13774
14119
|
},
|
|
14120
|
+
{
|
|
14121
|
+
"component": "skeleton",
|
|
14122
|
+
"category": "data",
|
|
14123
|
+
"slotPrefix": "noctis",
|
|
14124
|
+
"anatomy": ["skeleton", "skeleton-box", "skeleton-circle", "skeleton-text", "skeleton-line"],
|
|
14125
|
+
"options": {
|
|
14126
|
+
"variant": ["shimmer", "pulse", "none"]
|
|
14127
|
+
},
|
|
14128
|
+
"states": [],
|
|
14129
|
+
"consumes": [],
|
|
14130
|
+
"optionSlots": {
|
|
14131
|
+
"variant": "skeleton"
|
|
14132
|
+
},
|
|
14133
|
+
"slotGroups": {
|
|
14134
|
+
"root": ["skeleton"],
|
|
14135
|
+
"fill": ["skeleton-box", "skeleton-circle", "skeleton-line"],
|
|
14136
|
+
"shimmer": ["skeleton-box", "skeleton-circle", "skeleton-line"]
|
|
14137
|
+
},
|
|
14138
|
+
"mints": [
|
|
14139
|
+
{
|
|
14140
|
+
"uuid": "e698ed6f-926b-4795-9c8b-b5b389c170c6",
|
|
14141
|
+
"tier": "component",
|
|
14142
|
+
"name": {
|
|
14143
|
+
"kind": "component",
|
|
14144
|
+
"component": "skeleton",
|
|
14145
|
+
"anatomy": "root",
|
|
14146
|
+
"property": "gap"
|
|
14147
|
+
},
|
|
14148
|
+
"value": {
|
|
14149
|
+
"raw": "var(--noctis-space-3)"
|
|
14150
|
+
},
|
|
14151
|
+
"description": "Gap between stacked placeholders in a group.",
|
|
14152
|
+
"usage": "The spacing the `Skeleton.Root` column holds between its child placeholders.",
|
|
14153
|
+
"introduced": "0.0.0"
|
|
14154
|
+
},
|
|
14155
|
+
{
|
|
14156
|
+
"uuid": "2ecab953-f65f-4c6c-8527-289a44b4b2b7",
|
|
14157
|
+
"tier": "component",
|
|
14158
|
+
"name": {
|
|
14159
|
+
"kind": "component",
|
|
14160
|
+
"component": "skeleton",
|
|
14161
|
+
"anatomy": "fill",
|
|
14162
|
+
"property": "background-color"
|
|
14163
|
+
},
|
|
14164
|
+
"value": {
|
|
14165
|
+
"role": "well"
|
|
14166
|
+
},
|
|
14167
|
+
"description": "Placeholder fill colour shared by every shape.",
|
|
14168
|
+
"usage": "The base colour of a box/circle/line placeholder; the surface-adaptive `well` overlay, so a placeholder stays visible on any surface (canvas, card, or sunken panel).",
|
|
14169
|
+
"introduced": "0.0.0"
|
|
14170
|
+
},
|
|
14171
|
+
{
|
|
14172
|
+
"uuid": "d63ff16e-b1cf-4c96-9474-d8965343c8c7",
|
|
14173
|
+
"tier": "component",
|
|
14174
|
+
"name": {
|
|
14175
|
+
"kind": "component",
|
|
14176
|
+
"component": "skeleton",
|
|
14177
|
+
"anatomy": "shimmer",
|
|
14178
|
+
"property": "background-color"
|
|
14179
|
+
},
|
|
14180
|
+
"value": {
|
|
14181
|
+
"role": "surface-raised"
|
|
14182
|
+
},
|
|
14183
|
+
"description": "Colour of the moving shimmer band.",
|
|
14184
|
+
"usage": "The brighter neutral the `shimmer` variant sweeps across the placeholder; a raised surface, so the sweep reads as a light highlight in both light and dark mode.",
|
|
14185
|
+
"introduced": "0.0.0"
|
|
14186
|
+
},
|
|
14187
|
+
{
|
|
14188
|
+
"uuid": "d00c5ade-6bf1-4771-8563-eb2af18551c3",
|
|
14189
|
+
"tier": "component",
|
|
14190
|
+
"name": {
|
|
14191
|
+
"kind": "component",
|
|
14192
|
+
"component": "skeleton",
|
|
14193
|
+
"anatomy": "shimmer",
|
|
14194
|
+
"property": "animation-duration"
|
|
14195
|
+
},
|
|
14196
|
+
"value": {
|
|
14197
|
+
"raw": "calc(var(--noctis-duration-slow) * 4)"
|
|
14198
|
+
},
|
|
14199
|
+
"description": "Duration of one shimmer sweep / pulse cycle.",
|
|
14200
|
+
"usage": "How long the `shimmer` sweep takes to cross a placeholder (and the half-cycle of the `pulse` fade); a multiple of the slow motion stop so it stays calm.",
|
|
14201
|
+
"introduced": "0.0.0"
|
|
14202
|
+
},
|
|
14203
|
+
{
|
|
14204
|
+
"uuid": "c1409cc8-3865-4487-b1a0-09ef7612bee4",
|
|
14205
|
+
"tier": "component",
|
|
14206
|
+
"name": {
|
|
14207
|
+
"kind": "component",
|
|
14208
|
+
"component": "skeleton",
|
|
14209
|
+
"anatomy": "box",
|
|
14210
|
+
"property": "block-size"
|
|
14211
|
+
},
|
|
14212
|
+
"value": {
|
|
14213
|
+
"raw": "1.25rem"
|
|
14214
|
+
},
|
|
14215
|
+
"description": "Default height of a box placeholder.",
|
|
14216
|
+
"usage": "The block size of `Skeleton.Box` before any override; box fills its inline space, so only the height has a default — set the `style`/`className` height to match the content it stands in for.",
|
|
14217
|
+
"introduced": "0.0.0"
|
|
14218
|
+
},
|
|
14219
|
+
{
|
|
14220
|
+
"uuid": "61e6be3d-db11-463b-bbf0-da36c32bc923",
|
|
14221
|
+
"tier": "component",
|
|
14222
|
+
"name": {
|
|
14223
|
+
"kind": "component",
|
|
14224
|
+
"component": "skeleton",
|
|
14225
|
+
"anatomy": "box",
|
|
14226
|
+
"property": "border-radius"
|
|
14227
|
+
},
|
|
14228
|
+
"value": {
|
|
14229
|
+
"raw": "var(--noctis-radius-md)"
|
|
14230
|
+
},
|
|
14231
|
+
"description": "Corner radius of a box placeholder.",
|
|
14232
|
+
"usage": "The rounding of `Skeleton.Box`; follows the radius knob on the capped md step.",
|
|
14233
|
+
"introduced": "0.0.0"
|
|
14234
|
+
},
|
|
14235
|
+
{
|
|
14236
|
+
"uuid": "76001ed2-a124-487f-b6cb-f87c7454c324",
|
|
14237
|
+
"tier": "component",
|
|
14238
|
+
"name": {
|
|
14239
|
+
"kind": "component",
|
|
14240
|
+
"component": "skeleton",
|
|
14241
|
+
"anatomy": "circle",
|
|
14242
|
+
"property": "size"
|
|
14243
|
+
},
|
|
14244
|
+
"value": {
|
|
14245
|
+
"raw": "2.5rem"
|
|
14246
|
+
},
|
|
14247
|
+
"description": "Default diameter of a circle placeholder.",
|
|
14248
|
+
"usage": "The width and height of `Skeleton.Circle` before any override; size it to match the avatar or icon it stands in for.",
|
|
14249
|
+
"introduced": "0.0.0"
|
|
14250
|
+
},
|
|
14251
|
+
{
|
|
14252
|
+
"uuid": "f1beb79a-1de6-4d9f-81fc-9a22e37384a1",
|
|
14253
|
+
"tier": "component",
|
|
14254
|
+
"name": {
|
|
14255
|
+
"kind": "component",
|
|
14256
|
+
"component": "skeleton",
|
|
14257
|
+
"anatomy": "line",
|
|
14258
|
+
"property": "block-size"
|
|
14259
|
+
},
|
|
14260
|
+
"value": {
|
|
14261
|
+
"raw": "0.7em"
|
|
14262
|
+
},
|
|
14263
|
+
"description": "Height of a single text line placeholder.",
|
|
14264
|
+
"usage": "The block size of one `Skeleton.Line`, in `em` so it tracks the surrounding text size — the cap height a real line of text would occupy.",
|
|
14265
|
+
"introduced": "0.0.0"
|
|
14266
|
+
},
|
|
14267
|
+
{
|
|
14268
|
+
"uuid": "9cc376d7-90b0-4ece-8c21-7542c8059a47",
|
|
14269
|
+
"tier": "component",
|
|
14270
|
+
"name": {
|
|
14271
|
+
"kind": "component",
|
|
14272
|
+
"component": "skeleton",
|
|
14273
|
+
"anatomy": "line",
|
|
14274
|
+
"property": "border-radius"
|
|
14275
|
+
},
|
|
14276
|
+
"value": {
|
|
14277
|
+
"raw": "var(--noctis-radius-sm)"
|
|
14278
|
+
},
|
|
14279
|
+
"description": "Corner radius of a text line placeholder.",
|
|
14280
|
+
"usage": "The rounding of a `Skeleton.Line`; a small radius so a thin line reads as a soft bar.",
|
|
14281
|
+
"introduced": "0.0.0"
|
|
14282
|
+
},
|
|
14283
|
+
{
|
|
14284
|
+
"uuid": "0e8f7d2c-1b3a-4c5e-9f6d-7a8b9c0d1e2f",
|
|
14285
|
+
"tier": "component",
|
|
14286
|
+
"name": {
|
|
14287
|
+
"kind": "component",
|
|
14288
|
+
"component": "skeleton",
|
|
14289
|
+
"anatomy": "text",
|
|
14290
|
+
"property": "gap"
|
|
14291
|
+
},
|
|
14292
|
+
"value": {
|
|
14293
|
+
"raw": "var(--noctis-space-2)"
|
|
14294
|
+
},
|
|
14295
|
+
"description": "Gap between lines in a text placeholder.",
|
|
14296
|
+
"usage": "The spacing `Skeleton.Text` holds between its stacked `Skeleton.Line`s.",
|
|
14297
|
+
"introduced": "0.0.0"
|
|
14298
|
+
}
|
|
14299
|
+
]
|
|
14300
|
+
},
|
|
14301
|
+
{
|
|
14302
|
+
"component": "breadcrumb",
|
|
14303
|
+
"category": "navigation",
|
|
14304
|
+
"slotPrefix": "noctis",
|
|
14305
|
+
"anatomy": [
|
|
14306
|
+
"breadcrumb",
|
|
14307
|
+
"breadcrumb-list",
|
|
14308
|
+
"breadcrumb-item",
|
|
14309
|
+
"breadcrumb-link",
|
|
14310
|
+
"breadcrumb-page",
|
|
14311
|
+
"breadcrumb-separator",
|
|
14312
|
+
"breadcrumb-ellipsis",
|
|
14313
|
+
"breadcrumb-icon"
|
|
14314
|
+
],
|
|
14315
|
+
"options": {
|
|
14316
|
+
"size": ["sm", "md"]
|
|
14317
|
+
},
|
|
14318
|
+
"states": [],
|
|
14319
|
+
"consumes": [],
|
|
14320
|
+
"optionSlots": {
|
|
14321
|
+
"size": "breadcrumb"
|
|
14322
|
+
},
|
|
14323
|
+
"mints": [
|
|
14324
|
+
{
|
|
14325
|
+
"uuid": "5ac8741d-5850-46fa-8258-80067e1bf193",
|
|
14326
|
+
"tier": "component",
|
|
14327
|
+
"name": {
|
|
14328
|
+
"kind": "component",
|
|
14329
|
+
"component": "breadcrumb",
|
|
14330
|
+
"property": "gap"
|
|
14331
|
+
},
|
|
14332
|
+
"value": {
|
|
14333
|
+
"raw": "0.375rem"
|
|
14334
|
+
},
|
|
14335
|
+
"description": "Gap between a crumb's leading icon and its label.",
|
|
14336
|
+
"usage": "The spacing a `link` or `page` holds between a leading icon and the label text, per size; declared on the root and inherited by both crumb kinds.",
|
|
14337
|
+
"introduced": "0.0.0",
|
|
14338
|
+
"variants": {
|
|
14339
|
+
"size": {
|
|
14340
|
+
"sm": {
|
|
14341
|
+
"raw": "0.25rem"
|
|
14342
|
+
}
|
|
14343
|
+
}
|
|
14344
|
+
}
|
|
14345
|
+
},
|
|
14346
|
+
{
|
|
14347
|
+
"uuid": "34e53704-fe40-4c9d-bc61-ca7d81786eeb",
|
|
14348
|
+
"tier": "component",
|
|
14349
|
+
"name": {
|
|
14350
|
+
"kind": "component",
|
|
14351
|
+
"component": "breadcrumb",
|
|
14352
|
+
"property": "font-size"
|
|
14353
|
+
},
|
|
14354
|
+
"value": {
|
|
14355
|
+
"raw": "var(--noctis-text-small)"
|
|
14356
|
+
},
|
|
14357
|
+
"description": "Trail type size.",
|
|
14358
|
+
"usage": "The font size of every crumb and separator, per size; the 14px `small` step at `md`, the 13px `mini` step at `sm`.",
|
|
14359
|
+
"introduced": "0.0.0",
|
|
14360
|
+
"variants": {
|
|
14361
|
+
"size": {
|
|
14362
|
+
"sm": {
|
|
14363
|
+
"raw": "var(--noctis-text-mini)"
|
|
14364
|
+
}
|
|
14365
|
+
}
|
|
14366
|
+
}
|
|
14367
|
+
},
|
|
14368
|
+
{
|
|
14369
|
+
"uuid": "fe63d830-e58e-4bc9-b4c0-dd5b9fee1540",
|
|
14370
|
+
"tier": "component",
|
|
14371
|
+
"name": {
|
|
14372
|
+
"kind": "component",
|
|
14373
|
+
"component": "breadcrumb",
|
|
14374
|
+
"anatomy": "list",
|
|
14375
|
+
"property": "gap"
|
|
14376
|
+
},
|
|
14377
|
+
"value": {
|
|
14378
|
+
"raw": "0.375rem"
|
|
14379
|
+
},
|
|
14380
|
+
"description": "Gap between crumbs and separators in the trail.",
|
|
14381
|
+
"usage": "The spacing the ordered list holds between adjacent crumbs and the separators between them, per size.",
|
|
14382
|
+
"introduced": "0.0.0",
|
|
14383
|
+
"variants": {
|
|
14384
|
+
"size": {
|
|
14385
|
+
"sm": {
|
|
14386
|
+
"raw": "0.25rem"
|
|
14387
|
+
}
|
|
14388
|
+
}
|
|
14389
|
+
}
|
|
14390
|
+
},
|
|
14391
|
+
{
|
|
14392
|
+
"uuid": "219dcd50-453f-4094-aa5b-aeeacfceef18",
|
|
14393
|
+
"tier": "component",
|
|
14394
|
+
"name": {
|
|
14395
|
+
"kind": "component",
|
|
14396
|
+
"component": "breadcrumb",
|
|
14397
|
+
"anatomy": "icon",
|
|
14398
|
+
"property": "size"
|
|
14399
|
+
},
|
|
14400
|
+
"value": {
|
|
14401
|
+
"raw": "1rem"
|
|
14402
|
+
},
|
|
14403
|
+
"description": "Edge length of a crumb's leading icon.",
|
|
14404
|
+
"usage": "The width and height a crumb clamps a leading icon to, per size, so the glyph tracks the label.",
|
|
14405
|
+
"introduced": "0.0.0",
|
|
14406
|
+
"variants": {
|
|
14407
|
+
"size": {
|
|
14408
|
+
"sm": {
|
|
14409
|
+
"raw": "0.875rem"
|
|
14410
|
+
}
|
|
14411
|
+
}
|
|
14412
|
+
}
|
|
14413
|
+
},
|
|
14414
|
+
{
|
|
14415
|
+
"uuid": "416cd517-ae0b-46e7-b62c-34c2614bf928",
|
|
14416
|
+
"tier": "component",
|
|
14417
|
+
"name": {
|
|
14418
|
+
"kind": "component",
|
|
14419
|
+
"component": "breadcrumb",
|
|
14420
|
+
"anatomy": "separator",
|
|
14421
|
+
"property": "size"
|
|
14422
|
+
},
|
|
14423
|
+
"value": {
|
|
14424
|
+
"raw": "1rem"
|
|
14425
|
+
},
|
|
14426
|
+
"description": "Edge length of the separator glyph.",
|
|
14427
|
+
"usage": "The width and height of the chevron (or custom) glyph between crumbs, per size.",
|
|
14428
|
+
"introduced": "0.0.0",
|
|
14429
|
+
"variants": {
|
|
14430
|
+
"size": {
|
|
14431
|
+
"sm": {
|
|
14432
|
+
"raw": "0.875rem"
|
|
14433
|
+
}
|
|
14434
|
+
}
|
|
14435
|
+
}
|
|
14436
|
+
},
|
|
14437
|
+
{
|
|
14438
|
+
"uuid": "9082c151-ac80-451f-a0bd-f5a9becfb7e5",
|
|
14439
|
+
"tier": "component",
|
|
14440
|
+
"name": {
|
|
14441
|
+
"kind": "component",
|
|
14442
|
+
"component": "breadcrumb",
|
|
14443
|
+
"anatomy": "link",
|
|
14444
|
+
"property": "border-radius"
|
|
14445
|
+
},
|
|
14446
|
+
"value": {
|
|
14447
|
+
"raw": "var(--noctis-radius-sm)"
|
|
14448
|
+
},
|
|
14449
|
+
"description": "Corner radius of a link's focus ring.",
|
|
14450
|
+
"usage": "The rounding of the focus-visible outline drawn around an interactive crumb, so the ring hugs the link's hit area.",
|
|
14451
|
+
"introduced": "0.0.0"
|
|
14452
|
+
}
|
|
14453
|
+
]
|
|
14454
|
+
},
|
|
13775
14455
|
{
|
|
13776
14456
|
"component": "otp-field",
|
|
13777
14457
|
"category": "fields",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stridge/noctis-design-tokens",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"zod": "4.4.3",
|
|
31
|
-
"@stridge/noctis-theme-engine": "1.0.0-beta.
|
|
31
|
+
"@stridge/noctis-theme-engine": "1.0.0-beta.6"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": "19.2.7"
|