@redseed/redseed-ui-tailwindcss 7.68.0 → 7.70.0

package/components/modal.css

@@ -61,8 +61,29 @@
     @apply sticky top-0 z-1 p-0 bg-background-secondary shrink-0 text-lg font-semibold;
 }
 
+/* ---------------------------------------------------------------------------
+   Padding, and why it is written as three shorthands rather than @apply p-*
+
+   Each region used to pay for all four of its own sides — `p-space-md` on all
+   three — so the 16px below the header met the 16px above the body: 32px
+   between a dialog's title and its first line, 32px again before the buttons,
+   against 16px at the edges. The seams ended up twice the margin, which is
+   what you get when neighbours both pay for the gap between them.
+
+   So the two INNER edges are zeroed and the body carries them. Each region
+   still behaves when one of the others is absent, which matters because all
+   three modifiers are independent props a consumer can turn off.
+
+   The values are Material's dialog: 24 at every edge, 16 from the headline to
+   the supporting text, 24 from the supporting text to the buttons.
+
+   Longhand rather than Tailwind's `p-*` utilities on purpose — these are
+   three-value shorthands with a different value per edge, and `@apply
+   pt-space-lg px-space-lg pb-0` is four utilities to say what one declaration
+   says, with the seam buried in the last one.
+   --------------------------------------------------------------------------- */
 .rsui-modal__header--padded {
-    @apply p-space-md;
+    padding: 1.5rem 1.5rem 0;
 }
 
 .rsui-modal__body {
@@ -71,8 +92,11 @@
     scrollbar-width: none;
 }
 
+/* Carries both seams — 16px up to the header, 24px down to the footer — as well
+   as its own side edges. With no footer the 24px is simply the bottom of the
+   dialog, which is the same number, so nothing special is needed for that case. */
 .rsui-modal__body--padded {
-    @apply p-space-md;
+    padding: 1rem 1.5rem 1.5rem;
 }
 
 .rsui-modal__body::-webkit-scrollbar {
@@ -85,9 +109,31 @@
     padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
 }
 
+/* The footer pays for ALL FOUR of its own sides, unlike the header above.
+
+   That asymmetry is deliberate and it is about the banding. The header and body
+   share no visible boundary in the places it matters, so zeroing the header's
+   bottom edge and letting the body carry it reads as one gap. The footer does
+   not: it has its own background (background-secondary against the body's
+   primary), so the boundary is a visible edge and the buttons sit INSIDE a band
+   of their own. Borrowing the space above them from the body left them jammed
+   against the top of that band with 24px below — measured at 0 above, 24 below.
+
+   So the seam here is the body's 24px bottom plus the footer's 24px top. That is
+   more than the 24px between the title and the body, which is the right way
+   round: a button row is a different kind of thing from a paragraph, and the
+   band is already announcing that.
+
+   If the banding ever goes (the other half of #373), this should drop back to
+   `0 1.5rem 1.5rem` and let the body carry the seam, the way the header does.
+
+   The bottom keeps its safe-area floor — a footer is the last thing above the
+   home indicator on a phone, so the value is a minimum rather than a fixed
+   amount, and it rises with the padding (1rem -> 1.5rem) or a footer would sit
+   closer to the bottom edge than to its own buttons. */
 .rsui-modal__footer--padded {
-    @apply p-space-md;
-    padding-bottom: max(1rem, env(safe-area-inset-bottom));
+    padding: 1.5rem;
+    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
 }
 
 .rsui-modal__footer--start {

package/components/page_header.css

@@ -208,26 +208,181 @@
     @apply flex-1 flex flex-wrap gap-space-xs items-center justify-end;
 }
 
-.rsui-page-header__meta-action {
-    @apply flex lg:hidden;
-}
-
 .rsui-page-header__search {
     @apply w-full pt-space-xs lg:pt-0 lg:w-auto;
 }
 
-.rsui-page-header__meta-modal {
-    @apply lg:hidden;
+/* ---------------------------------------------------------------------------
+   A WIDE SUBTITLE MUST NOT PUSH THE ACTIONS ONTO THEIR OWN LINE (#386)
+   ---------------------------------------------------------------------------
+   `__top` is flex-wrap and becomes a row at lg. `__title` has no grow and keeps its
+   default `min-width: auto`, so the block is as wide as its widest line — which is
+   usually the subtitle, not the h1. `__status-actions` is `flex-1`. Once the title's
+   CONTENT width plus the actions exceeds the row, the actions wrap underneath, right
+   aligned, leaving a band of empty space above the page content.
+
+   Reported against the Manager Self-Review capture screen and the 180 Feedback
+   self-assessment, where it wrapped the Ask Archie AI button. The LMS shipped a local
+   fix for it (redseedtraining/redseed#5239) and then took it back out, because the
+   behaviour belongs here.
+
+   The fix is to let the title SHRINK rather than letting it set the row's width:
+   `flex: 1 1 0%` with `min-width: 0` means the subtitle wraps inside the title block
+   instead of forcing the actions down. The actions stop being greedy (`flex: none`)
+   so they take only the space they need.
+
+   `align-self: flex-start` because `__top` is `lg:items-center`, which would otherwise
+   centre the actions against the whole title-plus-subtitle block and leave them
+   floating below the h1 they belong to. This is the visible change for any header that
+   has both a subtitle and actions, and it is the correct one: SectionHeader already
+   top-aligns its toolbar the same way (`__header` is `items-start`), so this closes a
+   disagreement between the two headers rather than opening one.
+
+   THREE EXCLUSIONS, all of which already own their row behaviour:
+
+     --profile      bottom-aligns its actions on purpose (`lg:self-end lg:pb-space-lg`)
+     :has(__stats)  already sets the title to `lg:grow lg:min-w-0 lg:basis-full`
+     :has(__search) puts a full-width search control in the row below lg
+
+   MEASURED, and worth being precise about which case is which.
+
+   The WRAP needs a genuinely wide action group — a status badge plus two default-size
+   buttons, which is the shape `__status-actions` takes on the reported screens, since it
+   is `justify-between` and carries the status as well as the actions:
+
+     1024   today: WRAPS, 112px      with this rule: no wrap, 140px
+
+   That 28px is the cost of the fix in the wrapping case: the subtitle takes more lines
+   inside a narrower title block instead of the actions taking a whole extra row. It is
+   the right way round, because the extra row also left a band of dead space above the
+   page content and put the button somewhere nobody looks for it.
+
+   With a SMALLER action group — two buttons and no status, which is the
+   LongSubtitleWithActions story — nothing wraps at any lg width, either before or after:
+
+     1024-1100   today: 92px          with this rule: 94px
+     1200+       today: 70px          with this rule: 70px
+
+   So in the common case the rule costs 2px at the narrow end of lg and nothing above it,
+   while still doing the visible half of the job: the actions stop being greedy (measured
+   409px wide -> 82px, taking only what they need) and sit level with the h1 instead of
+   14px below it.
+
+   Scoped to lg and up. Below lg `__top` is a column, where every child is full width
+   and none of this applies. */
+@media (min-width: 64rem) {
+    .rsui-page-header:not(.rsui-page-header--profile)
+    .rsui-page-header__top:not(:has(.rsui-page-header__stats)):not(:has(.rsui-page-header__search))
+    .rsui-page-header__title {
+        flex: 1 1 0%;
+        min-width: 0;
+    }
+
+    .rsui-page-header:not(.rsui-page-header--profile)
+    .rsui-page-header__top:not(:has(.rsui-page-header__stats)):not(:has(.rsui-page-header__search))
+    .rsui-page-header__status-actions {
+        flex: none;
+        align-self: flex-start;
+    }
+}
+
+/* ---------------------------------------------------------------------------
+   Meta
+
+   Visible at every width. It was `hidden lg:flex`, so the facts a header exists
+   to carry vanished below 1024px and a modal reproduced them — on a phone, where
+   a reader has least context to spare and least patience for a dialog.
+
+   A grid, not a flex row, and content-width rather than full-bleed: meta reads
+   as one cluster beside the title rather than a band across the page. Four
+   columns from sm up; two on a phone, because four 16px labels in 375px is not a
+   grid, it is a queue.
+
+   The cap is `:nth-child` rather than a count in JS. `#meta` is a slot and every
+   consumer fills it with a `v-for`, so the component cannot know how many facts
+   there are — but CSS does not need to know. Past the fourth, they are hidden
+   until the toggle expands the row.
+   --------------------------------------------------------------------------- */
+/* The region is the grid. The facts sit inside a `display: contents` wrapper so
+   they become direct grid items without the toggle joining their `:nth-child`
+   sequence — see the note in PageHeader.vue. */
+.rsui-page-header__meta-region {
+    @apply grid w-fit max-w-full items-start;
+    @apply gap-x-space-lg gap-y-space-md;
+
+    /* Columns sized to content, and the SAME count in both states.
+
+       An earlier version went five columns collapsed and four expanded, so the
+       toggle would sit in the row rather than wrap. That moved every fact
+       sideways when pressed — 13.7px with `1fr`, up to 40px with `max-content`,
+       because both make a column's width depend on something the toggle changes.
+       Holding the count fixed removes the question: the toggle occupies the
+       fifth cell while collapsed, and the fifth fact takes it once expanded.
+
+       The width has to be FIXED, not `max-content`. Holding the count steady is
+       not enough on its own: `max-content` sizes each column to whatever lands in
+       it, and expanding puts different facts in different columns, so they still
+       moved — 27px, measured. A fixed track depends on neither the count nor the
+       content.
+
+       6rem, against a widest-ink measurement of 90px across every label and value
+       in the busiest real header. Anything longer wraps inside its own cell
+       rather than pushing its neighbours. */
+    grid-template-columns: repeat(2, 6rem);
 }
 
-.rsui-page-header__meta-modal__body {
-    @apply flex flex-col gap-y-space-md;
+@media (min-width: 40rem) {
+    .rsui-page-header__meta-region {
+        grid-template-columns: repeat(5, 6rem);
+    }
 }
 
 .rsui-page-header__meta {
-    @apply hidden lg:flex gap-x-space-xl;
+    display: contents;
+}
+
+/* Past the cap, hidden until expanded. `> *` rather than a component class so it
+   does not care what a consumer puts in the slot — MetaInfo today, something
+   else tomorrow. The toggle is excluded by its own rule below, which comes
+   later and wins. */
+.rsui-page-header__meta > *:nth-child(n + 5) {
+    @apply hidden;
 }
 
+.rsui-page-header__meta--expanded > *:nth-child(n + 5) {
+    @apply block;
+}
+
+/* The toggle sits where the fifth fact would be, so pressing it expands the row
+   around it rather than moving it. Always shown, whatever the cap is doing. */
+.rsui-page-header__meta-toggle {
+    /* Centred against the fact beside it, not `self-start`. A fact is a two-line
+       unit — a 16px label over a 16px value, 36px in all — so a 20px toggle
+       pinned to the top reads as belonging to the LABELS rather than to the pair.
+       Centre also survives the expanded state, where the toggle wraps to its own
+       row and has no value to sit level with. */
+    @apply inline-flex w-fit items-center whitespace-nowrap self-center;
+    @apply text-sm font-semibold no-underline cursor-pointer transition-colors;
+    @apply text-button-tertiary hover:text-button-tertiary-hover;
+    @apply hover:underline underline-offset-4 decoration-2;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-button-tertiary outline-hidden;
+
+    /* min-width, because the label changes length as it toggles — "+2 more"
+       against "Show fewer" — and without a floor the row shifts sideways under
+       the pointer mid-press. Same fix CategoryList carries (#355). */
+    @apply min-w-20 justify-center;
+
+    /* The negative margin pulls it back from the grid's 32px column gap to the
+       16px CategoryList uses. 32px is right between two FACTS, which read as
+       separate label/value pairs; it is too far for an affordance trailing them,
+       and the two rows sit one above the other in the same header — `+4 more`
+       under categories and `+3 more` under meta must not be spaced differently. */
+    @apply -ms-space-md;
+}
+
+
+
+
 .rsui-page-header__avatar {
     @apply shrink-0 size-12;
 }
@@ -439,7 +594,10 @@
     color: var(--rsui-page-header-accent, var(--rsui-page-header-ink));
 }
 
-.rsui-page-header--toned .rsui-page-header__meta {
+/* On the REGION, not on `__meta`. The facts element is `display: contents` so it
+   generates no box at all — a border declared there paints nothing, and this
+   separator silently disappeared when the grid moved up a level. Measured. */
+.rsui-page-header--toned .rsui-page-header__meta-region {
     border-top: 1px solid var(--rsui-page-header-rule);
 
     @apply mt-space-md pt-space-md;
@@ -484,3 +642,19 @@
 .rsui-page-header--toned .rsui-category-list__more {
     color: var(--rsui-page-header-ink);
 }
+
+/* The meta toggle borrows the same tertiary green and disappears on the same dark
+   band — measured as near-invisible on Journey Green 800. Same fix, same reason:
+   an invisible control is worse than reaching for the tone's ink.
+
+   Hover included, because the hover colour is a second tertiary green and would
+   make the control vanish again the moment a pointer reached it. */
+.rsui-page-header--toned .rsui-page-header__meta-toggle {
+    color: var(--rsui-page-header-ink);
+}
+
+/* Hover separately: the hover colour is a second tertiary green, so without this
+   the control vanishes again the moment a pointer reaches it. */
+.rsui-page-header--toned .rsui-page-header__meta-toggle:hover {
+    color: var(--rsui-page-header-ink);
+}

package/components/section_header.css

@@ -22,8 +22,19 @@
     @apply border-border-primary;
 }
 
+/* A clickable header is a control, so it takes the library's focus ring rather
+   than the browser's. Without `outline-hidden` a `tabindex="0"` div falls through
+   to the UA default ring, which is the wrong colour and shape for this library.
+
+   Keyboard only, verified with a real click rather than a dispatched event: the
+   browser knows a genuine mouse press from a synthetic one, and `:focus-visible`
+   is false after the real thing. (A dispatched MouseEvent reports true even on a
+   plain <button>, so a probe built that way proves nothing.)
+
+   Same declaration CardHeader already carries for the same situation. */
 .rsui-section-header--clickable {
     @apply cursor-pointer;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary outline-hidden;
 }
 
 .rsui-section-header__header {

package/components/toast.css

@@ -0,0 +1,188 @@
+/* A brief confirmation that an action completed. Bottom-left, per the standards, and
+   distinct from MessageBox in every dimension: fixed rather than in the page flow,
+   auto-dismissing rather than persistent (unless it carries an action), and about an
+   action rather than about the state of the thing on screen. */
+
+/* SURFACE. A dark overlay, which is Material's snackbar and the reason the standards
+   point at it — a toast has to read as something laid ON the page rather than as part of
+   it.
+
+   Measured against the real page ground, Modern Bone 500 #edebe2 (named in
+   storybook/.storybook/preview.ts), because this was nearly shipped as a light grey pill:
+
+     background-primary-invert   (Grey 300)   1.20:1 against the page — no separation
+     background-primary-contrast (Grey 800)  11.88:1, with white text on it at 14.20:1
+
+   1.20:1 is not a surface. It looked like a disabled chip someone had left behind.
+
+   ALL THREE VARIANTS SHARE THIS SURFACE, and that is the important part. They did not:
+   the default was dark while success and error were the library's light status tints, so
+   `variant` flipped the surface polarity as well as choosing the meaning. That made the
+   action slot's contract unstateable — `on-color` gives a button white ink, which is
+   14.20:1 on the dark default and 1.05:1 on the mint success ground. One rule could not
+   be true across the axis, and the story confidently told consumers the wrong half.
+
+   So semantics move off the ground and onto an accent (below), the ground stays constant,
+   and `on-color` is correct everywhere without qualification. The cost is that a red
+   toast no longer matches the red tint used by badges and MessageBox; the gain is a slot
+   contract that fits in one sentence and cannot be followed into a contrast failure. */
+.rsui-toast {
+    @apply fixed z-50 flex items-center gap-x-space-sm;
+    @apply px-space-md py-space-sm rounded-xl shadow-full-light;
+    @apply text-sm font-medium;
+    @apply bg-background-primary-contrast text-text-on-color border border-transparent;
+
+    /* BOTTOM-LEFT, and it must clear two things the toast cannot see.
+
+       --rsui-toast-offset is the sticky action bar. The standards are explicit that a
+       toast sits ABOVE such a bar and never over it — the bar owns the bottom edge —
+       but only the page knows whether it has one, and how tall. Set it on :root, NOT on
+       a wrapper: the toast is teleported to the body, so a custom property declared on
+       an ancestor in the consumer's tree never reaches it. The default of 0 means an
+       ordinary page needs nothing.
+
+       env(safe-area-inset-bottom) is the home indicator. A toast is the last thing above
+       the bottom edge on a phone, so the inset is a FLOOR under the spacing rather than
+       an addition to it — the same max() shape drawer.css and modal.css already use. */
+    left: 1rem;
+    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--rsui-toast-offset, 0px));
+
+    /* Brief, so it is never a paragraph. Wide enough for a sentence, capped so it does
+       not stretch across a desktop, and held off both edges on a narrow screen. */
+    max-width: min(28rem, calc(100vw - 2rem));
+}
+
+/* The message is the only part allowed to grow, so the action and the close button keep
+   their size and stay where the eye expects them between one toast and the next. */
+.rsui-toast__message {
+    @apply flex-1 min-w-0;
+}
+
+/* The icon takes the toast's ink, for the same reason the close glyph does: `<Icon>`
+ * paints its child directly and cannot see what it is sitting on. `<Icon success>` renders
+ * text-success #067647 — a green drawn for a LIGHT ground — which measures 2.49:1 here and
+ * fails the 3:1 WCAG 1.4.11 asks of a meaningful non-text indicator. Measured, after this
+ * caught the close glyph and the action button the same way.
+ *
+ * The default inherits the toast's white; the semantic variants repaint it below. */
+.rsui-toast__icon {
+    @apply flex items-center justify-center shrink-0;
+}
+
+.rsui-toast__icon .rsui-icon > *,
+.rsui-toast__icon svg {
+    color: currentColor;
+}
+
+/* The action sits before the close button, so Tab reaches Undo first — it is the reason
+   the toast is still on screen, and the close button sits right beside it.
+
+   THE ACTION MUST BE PASSED `on-color`, and now that every variant shares one dark
+   surface this is unconditionally true. A plain <ButtonTertiary> renders brand green here
+   (Brand 600 #135847) and measures 1.70:1 against the surface — a straight WCAG 1.4.3
+   failure, and what the first draft of this component's own story shipped with.
+
+   Not forced from here. Reaching in to restyle a consumer's button would override a
+   variant they chose, which is the same call section_header.css documents and declines to
+   make for sizes.
+
+   No --rsui-button-on-color-ink override any more: it used to be set per variant, and on
+   the light surfaces it was a no-op anyway, because that variable only reaches the FILLED
+   treatment and button_slot.css already falls back to the same value. One surface means
+   one behaviour, and nothing to override. */
+.rsui-toast__action {
+    @apply shrink-0;
+}
+
+.rsui-toast__close {
+    @apply flex items-center justify-center shrink-0 cursor-pointer;
+    @apply text-current opacity-70 hover:opacity-100 transition-opacity;
+    /* Reset native <button> chrome, matching .rsui-meta-info__help. */
+    @apply bg-transparent border-0 p-0 rounded outline-hidden;
+    /* The ring takes the current ink rather than border-primary: on this dark surface the
+       standard ring is near-invisible against the ground it sits on. */
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-current focus-visible:ring-offset-transparent;
+}
+
+/* The X takes the button's ink, which it does not do on its own.
+ *
+ * `<Icon>` falls back to `primary` when the consumer names no colour, and
+ * `.rsui-icon--primary > *` PAINTS the svg directly — a declaration beats the white this
+ * button inherits, however specific the ancestor. So the close glyph rendered as Grey 900
+ * at the button's own 70% opacity: 1.15:1 as actually composited. Invisible, and it was
+ * on the branch that way through review. With currentColor it composites to 7.73:1, clear
+ * of the 3:1 WCAG 1.4.11 asks of an icon-only control.
+ *
+ * currentColor rather than a named token, so the rule holds if a variant ever changes its
+ * ink. Same mechanism as the override meta_info.css:68 makes for its label icon — but
+ * unscoped, where meta_info deliberately scopes to --primary. That difference is the
+ * interesting part: meta_info protects a consumer's `<Icon success>` because a status
+ * marker on a label is intent, whereas a close glyph has no legitimate reason to carry a
+ * semantic colour, so there is nothing to protect. */
+.rsui-toast__close .rsui-icon > * {
+    color: currentColor;
+}
+
+/* VARIANTS. Only three, and deliberately not MessageBox's six.
+ *
+ * A toast says an action completed. "Info" and "warning" are statements about the state
+ * of something, which is MessageBox's job and belongs in the page flow where it can stay.
+ * An `ai` toast is not a thing. Offering them here would invite a toast to be used as a
+ * banner that happens to disappear.
+ *
+ * CARRIED BY THE ICON, and by nothing else. Two rejected alternatives, both measured:
+ *
+ *   A left accent bar. Drawn as an inset box-shadow it is clipped by the toast's own
+ *   12px corner radius — on a 46px-tall toast the radius eats 12px off each end, so only
+ *   22px of a 4px bar is ever full width and it tapers away at both ends. It renders as a
+ *   crescent, not a bar.
+ *
+ *   Tinting the dark surface toward the hue. Keeps one polarity, so the ink stays
+ *   correct, but the tints are indistinguishable from the plain surface: mixing the
+ *   accent in at 20% gives 1.49:1 (success) and 1.35:1 (error) against the default
+ *   ground. Nobody would tell those apart. Pushing further only turns the surface muddy.
+ *
+ * So the ground is identical for every variant and the icon carries the meaning, at the
+ * full accent against a constant dark surface:
+ *
+ *   success  Success 400  #47cd8a   7.01:1
+ *   error    Error 400    #f97066   5.10:1
+ *
+ * Both clear of the 3:1 WCAG 1.4.11 asks of a meaningful non-text indicator.
+ *
+ * This means a success or error toast with NO icon looks exactly like a default one, and
+ * that is the accepted cost. The library's convention is that a semantic glyph belongs to
+ * the consumer — the note above .rsui-message-box's icon says so, and Pill, MetricCard,
+ * ListItem and SectionHeader all take theirs through a slot — so the component will not
+ * hardcode one. Colour is never the only signal in any case (WCAG 1.4.1): the message
+ * names what happened, and an error additionally takes role="alert".
+ *
+ * THESE TWO REACH PAST THE SEMANTIC TIER INTO THE RAW PALETTE, deliberately, and they are
+ * the only place in this file that does — the surface goes through
+ * `background-primary-contrast` like everything else.
+ *
+ * The semantic tier has no status colour for a dark ground. Every candidate, measured
+ * against this surface:
+ *
+ *     --color-text-success                #067647    2.49:1   fail
+ *     --color-text-error                  #b42318    2.16:1   fail
+ *     --color-background-success-invert   #abefc6   10.74:1   pass
+ *     --color-background-error-invert     #fecdca   10.00:1   pass
+ *     --color-border-success              #abefc6   10.74:1   pass
+ *     --color-border-error                #fecdca   10.00:1   pass
+ *
+ * Every `text-*` status token is drawn for a light ground and fails outright here. The
+ * ones that pass are pale pastels named for a background or a border — using them would
+ * buy tier purity with a naming stretch and a washed-out glyph on a dark pill.
+ *
+ * The proper fix is a semantic token meaning "a status colour on a contrast surface".
+ * That is an addition to tokens.css and a design decision rather than a component one, so
+ * until it exists this is the honest version: raw palette, named, measured, in one place,
+ * and easy to swap when the token lands. */
+.rsui-toast--success .rsui-toast__icon {
+    color: var(--Colors-Success-400);
+}
+
+.rsui-toast--error .rsui-toast__icon {
+    color: var(--Colors-Error-400);
+}

package/components.css

@@ -108,6 +108,7 @@ Please be careful when adding new components and updating the order.
 @import './components/th.css';
 @import './components/td.css';
 @import './components/td_user.css';
+@import './components/toast.css';
 @import './components/toggle.css';
 @import './components/tooltip.css';
 @import './components/two_column_layout.css';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-tailwindcss",
-    "version": "7.68.0",
+    "version": "7.70.0",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",