kanto-ds 1.7.0 → 1.9.0

package/dist/docs/kt-accordion.md

@@ -0,0 +1,49 @@
+# `<kt-accordion>`
+
+A set of `kt-collapsible` sections that open one at a time: opening one folds
+the one that was open, so the page stays the length of one answer.
+
+```html
+<kt-accordion>
+  <kt-collapsible heading="Shipping">Three to five days, tracked.</kt-collapsible>
+  <kt-collapsible heading="Returns">Thirty days, no questions.</kt-collapsible>
+  <kt-collapsible heading="Warranty">Two years, parts and labour.</kt-collapsible>
+</kt-accordion>
+```
+
+## One at a time, or each on its own
+
+By default one section is open at most: opening another folds it, with the
+collapsible's own animation. Of several opened in the markup, the first stays
+open. `multiple` lets each section open and close on its own — the accordion
+then only adds the keyboard.
+
+`kt-change` reports the indexes of the open sections after each change.
+
+## Keyboard
+
+From a section's summary, the arrows move to the next or previous summary,
+wrapping at the ends, and Home and End to the first and last — the WAI-ARIA
+accordion pattern. Enter and Space open and close, as on any summary. Keys
+inside a section's content are left to it.
+
+## Accessibility
+
+The sections stay `<details>`: each summary is a real control, announced as
+expanded or collapsed, and find-in-page still opens a section to show a match.
+The accordion adds the arrows; it adds no role, since a group of details needs
+none.
+
+## API
+
+| Property   | Attribute  | Type      | Default |
+| ---------- | ---------- | --------- | ------- |
+| `multiple` | `multiple` | `boolean` | `false` |
+
+| Getter     | Description                              |
+| ---------- | ---------------------------------------- |
+| `sections` | The `kt-collapsible` children, in order. |
+
+| Event       | Detail               |
+| ----------- | -------------------- |
+| `kt-change` | `{ open: number[] }` |

package/dist/docs/kt-app-shell.md

@@ -0,0 +1,89 @@
+# `<kt-app-shell>`
+
+The frame of an application: a header along the top, a sidebar down the side,
+and the content, which scrolls on its own.
+
+```html
+<kt-app-shell style="height: 100dvh">
+  <a slot="header" href="/">Northwind</a>
+  <kt-sub-menu-navigation slot="sidebar"></kt-sub-menu-navigation>
+
+  <h1>Overview</h1>
+</kt-app-shell>
+```
+
+The shell fills its container's height: give the container one —
+`height: 100dvh` on a page, a fixed height in a preview. The header and the
+sidebar stay put while the content scrolls.
+
+## The sidebar
+
+Wide, the sidebar sits beside the content, and the toggle at the start of the
+header narrows it to a rail: `collapsed` is reflected, so the sidebar's content
+can follow it.
+
+```css
+kt-app-shell[collapsed] .nav-label {
+  display: none;
+}
+```
+
+Narrower than `breakpoint` — 900px of the **shell's own width**, not the
+viewport's — the sidebar leaves the layout. The toggle opens it as a drawer over
+the content, behind a backdrop; Escape or a click on the backdrop closes it. The
+drawer takes the focus as it opens and gives it back to the toggle as it
+closes, and a closed drawer is inert, so Tab never wanders into a panel that is
+not there. `narrow` is reflected while it applies.
+
+`toggleSidebar()` does what the toggle does; `kt-sidebar-toggle` reports it,
+with `detail.open`. Set `no-toggle` when the header brings its own control, and
+call `toggleSidebar()` from it.
+
+## Inside a page
+
+A shell shown inside a page that has its own landmarks — a preview, a demo, a
+screenshot of the product on its marketing page — would put a second `<main>`
+inside the first. `no-landmarks` draws the sidebar and the content as plain
+boxes instead; everything else is the same.
+
+```html
+<kt-app-shell no-landmarks style="height: 420px">…</kt-app-shell>
+```
+
+## Sizes
+
+| CSS property                   | Default |
+| ------------------------------ | ------- |
+| `--kt-app-shell-sidebar-width` | `240px` |
+| `--kt-app-shell-rail-width`    | `64px`  |
+| `--kt-app-shell-header-height` | `56px`  |
+
+## Accessibility
+
+The sidebar is an `<aside>` named by `label` — "Sidebar" by default, translated
+through `setStrings` — and the content a `<main>`, so a page built on the shell
+has its landmarks without writing them. The toggle is named after the sidebar
+it controls, with `aria-controls` and `aria-expanded`, so it reads as "Sidebar,
+expanded" or "collapsed" rather than as a picture of a panel.
+
+## API
+
+| Property      | Attribute      | Type      | Default |
+| ------------- | -------------- | --------- | ------- |
+| `collapsed`   | `collapsed`    | `boolean` | `false` |
+| `sidebarOpen` | `sidebar-open` | `boolean` | `false` |
+| `breakpoint`  | `breakpoint`   | `number`  | `900`   |
+| `noToggle`    | `no-toggle`    | `boolean` | `false` |
+| `noLandmarks` | `no-landmarks` | `boolean` | `false` |
+| `label`       | `label`        | `string`  | `''`    |
+
+| Event               | Detail              |
+| ------------------- | ------------------- |
+| `kt-sidebar-toggle` | `{ open: boolean }` |
+
+| Part      | Description          |
+| --------- | -------------------- |
+| `header`  | The top bar          |
+| `sidebar` | The `<aside>`        |
+| `main`    | The `<main>`         |
+| `toggle`  | The sidebar's toggle |

package/dist/docs/kt-auth-form.md

@@ -0,0 +1,111 @@
+# `<kt-auth-form>`
+
+The way into a product: signing in, creating an account, resetting a password,
+entering a code — one block, four modes.
+
+```html
+<kt-auth-form remember>
+  <img slot="logo" src="/logo.svg" alt="Northwind" height="32" />
+  <span slot="footer">By continuing you agree to the <a href="/terms">terms</a>.</span>
+</kt-auth-form>
+
+<script>
+  const form = document.querySelector('kt-auth-form');
+  form.addEventListener('kt-submit', (event) => {
+    const { mode, values, wait } = event.detail;
+    if (mode === 'sign-in') wait(auth.signIn(values.email, values.password));
+    if (mode === 'sign-up') wait(auth.signUp(values));
+    if (mode === 'forgot') wait(auth.sendReset(values.email));
+    if (mode === 'code') wait(auth.verify(values.code));
+  });
+</script>
+```
+
+## Modes
+
+| `mode`    | Asks for                                             | Button         |
+| --------- | ---------------------------------------------------- | -------------- |
+| `sign-in` | Email, password; "Keep me signed in" with `remember` | Sign in        |
+| `sign-up` | Name, email, a new password                          | Create account |
+| `forgot`  | Email                                                | Send the link  |
+| `code`    | A one-time code, sent as soon as it is whole         | Verify         |
+
+The links between them — "Forgot password?", "Create an account", "Sign in" —
+move the form itself and fire `kt-mode`; `goTo(mode)` does the same from
+script. Each field has the `autocomplete` a password manager looks for.
+
+## Sending
+
+Before anything is sent the form checks what it can: an email that is one, a
+password, a name, a new password at least `password-min` long (8), a whole
+code. A field found wanting says why and takes the focus; nothing is sent.
+
+Then `kt-submit` carries the `mode`, the `values` and `wait(promise)`. Hand it
+the request: the button runs it — busy, then a tick — and if it rejects, its
+error's message is shown above the fields (`error` sets one by hand). A
+`forgot` that succeeds says the link is on its way. Enter in a field sends, as
+in any form; `submit()` does from script.
+
+## Providers
+
+```js
+form.providers = [
+  { id: 'github', label: 'Continue with GitHub', icon: 'github' },
+  { id: 'google', label: 'Continue with Google' },
+];
+form.addEventListener('kt-provider', (event) => auth.redirect(event.detail.id));
+```
+
+They sit above the fields when signing in or up, set apart by "or". Their icons
+are the page's to register.
+
+## Words
+
+Every word is in `texts`, English until given others — headings, leads, labels,
+buttons, links and messages:
+
+```js
+form.texts = {
+  signInHeading: 'Connexion',
+  email: 'Adresse e-mail',
+  passwordShort: (least) => `Au moins ${least} caractères.`,
+};
+```
+
+`heading-level` sets the heading's level — 1 by default, since the form is
+usually the page — and `plain` drops the card around it.
+
+## Accessibility
+
+A real `<form>`; each field labelled, its error announced with it; the error
+from a failed sending shown in an alert. The links between modes are buttons,
+since they change the form rather than the page.
+
+## API
+
+| Property       | Attribute       | Type                   | Default     |
+| -------------- | --------------- | ---------------------- | ----------- |
+| `mode`         | `mode`          | `KtAuthMode`           | `'sign-in'` |
+| `providers`    | —               | `KtAuthProvider[]`     | `[]`        |
+| `remember`     | `remember`      | `boolean`              | `false`     |
+| `passwordMin`  | `password-min`  | `number`               | `8`         |
+| `headingLevel` | `heading-level` | `number`               | `1`         |
+| `plain`        | `plain`         | `boolean`              | `false`     |
+| `error`        | —               | `string`               | `''`        |
+| `texts`        | —               | `Partial<KtAuthTexts>` | `{}`        |
+
+| Method       | Description                           |
+| ------------ | ------------------------------------- |
+| `submit()`   | Checks and sends, as the button does. |
+| `goTo(mode)` | Moves the form to another mode.       |
+
+| Event         | Detail                            |
+| ------------- | --------------------------------- |
+| `kt-submit`   | `{ mode, values, wait(promise) }` |
+| `kt-mode`     | `{ mode }`                        |
+| `kt-provider` | `{ id }`                          |
+
+| Slot     | Where                          |
+| -------- | ------------------------------ |
+| `logo`   | Above the heading              |
+| `footer` | Under the form: terms, privacy |

package/dist/docs/kt-avatar-group.md

@@ -0,0 +1,49 @@
+# `<kt-avatar-group>`
+
+The people on something — a project's members, a document's editors — as
+avatars overlapping in a row, the rest summed up as "+N".
+
+```html
+<kt-avatar-group label="Project members" max="3"></kt-avatar-group>
+
+<script>
+  document.querySelector('kt-avatar-group').people = [
+    { name: 'Dana Whitfield' },
+    { name: 'Hank Scorpio', src: '/hank.png' },
+    { name: 'Bill Lumbergh' },
+    { name: 'Gavin Belson' },
+    { name: 'Alice Abernathy' },
+  ];
+</script>
+```
+
+## People
+
+`people` is a list of `{ name, src? }`. Each becomes a `kt-avatar` — the
+picture when there is one, the name's initials otherwise — overlapping the last
+by a third, ringed in the page's colour so the stack reads as one.
+
+`max` (4 by default) is how many are shown; the rest are summed up at the end
+as "+N". `size` — `small`, `medium`, `large` — sizes them all, the sum
+included.
+
+## Accessibility
+
+A list named by `label`, each avatar named by its person. The sum is said as
+"2 more", not "plus two", and is translated through `setStrings` as
+`moreCount`. When the people matter one by one, list them somewhere a person
+can read every name — a tooltip on the group, or the members page it links to.
+
+## API
+
+| Property | Attribute | Type                             | Default    |
+| -------- | --------- | -------------------------------- | ---------- |
+| `people` | —         | `KtAvatarGroupPerson[]`          | `[]`       |
+| `max`    | `max`     | `number`                         | `4`        |
+| `size`   | `size`    | `'small' \| 'medium' \| 'large'` | `'medium'` |
+| `label`  | `label`   | `string`                         | `''`       |
+
+| Part   | Description         |
+| ------ | ------------------- |
+| `list` | The `<ul>`          |
+| `more` | The "+N" at the end |

package/dist/docs/kt-blog-post.md

@@ -0,0 +1,77 @@
+# `<kt-blog-post>`
+
+A post, set to be read: its title, who wrote it and when, a cover, and the
+body in a measure an eye can follow.
+
+```html
+<kt-blog-post
+  heading="Closing the month in a day"
+  lead="What changed when the bank feed matched itself."
+  author="Ada Park"
+  author-role="CFO, Northwind"
+  date="2026-09-14"
+  back-href="/blog"
+>
+  <img slot="cover" src="/covers/close.jpg" alt="" />
+  <p>For years, the first week of every month was the close.</p>
+  <h2>What we changed</h2>
+  <p>…</p>
+  <div slot="end">
+    Filed under Finance. <a href="/blog/reminders">Next: reminders that get paid</a>
+  </div>
+</kt-blog-post>
+```
+
+## The body
+
+The body is the default slot, and its elements are set as prose: paragraphs,
+`<h2>` and `<h3>`, lists, quotes, `<pre>` and `<kt-code>`, images, figures and
+rules — in a column `--kt-post-measure` wide — 700px, about 70 characters, shared
+with the header so the two line up. What
+is inside them — links, emphasis, code — takes the page's own styles.
+
+## Who and when
+
+`author`, `author-role` and `avatar` say who wrote it; `date` when, written
+for people in `locale` — Sep 14, 2026 — and kept for machines in a
+`<time datetime>`. The reading time is counted from the body, at 230 words a
+minute, unless `reading-time` gives one. `tags` sit over the title;
+`back-href` adds a link to every post.
+
+## Slots
+
+| Slot      | What goes in it                                            |
+| --------- | ---------------------------------------------------------- |
+| (default) | The body.                                                  |
+| `cover`   | Under the header, wider than the body: an image, a figure. |
+| `end`     | After the body, over a rule: tags, sharing, the next post. |
+
+## Words
+
+```js
+post.texts = { back: 'Tous les articles', minRead: (minutes) => `${minutes} min de lecture` };
+```
+
+## Accessibility
+
+An `<article>` named by its title — an `<h1>`, since the post is the page;
+`heading-level` changes it. Headings in the body should start at `<h2>`. The
+avatar repeats the author's name, so it is hidden from assistive tech; a
+cover that only illustrates takes `alt=""`.
+
+## API
+
+| Property       | Attribute       | Type                       | Default |
+| -------------- | --------------- | -------------------------- | ------- |
+| `heading`      | `heading`       | `string`                   | `''`    |
+| `lead`         | `lead`          | `string`                   | `''`    |
+| `date`         | `date`          | `string`                   | `''`    |
+| `author`       | `author`        | `string`                   | `''`    |
+| `authorRole`   | `author-role`   | `string`                   | `''`    |
+| `avatar`       | `avatar`        | `string`                   | `''`    |
+| `readingTime`  | `reading-time`  | `number`                   | `0`     |
+| `tags`         | —               | `string[]`                 | `[]`    |
+| `backHref`     | `back-href`     | `string`                   | `''`    |
+| `locale`       | `locale`        | `string`                   | `''`    |
+| `headingLevel` | `heading-level` | `number`                   | `1`     |
+| `texts`        | —               | `Partial<KtBlogPostTexts>` | `{}`    |

package/dist/docs/kt-button.md

@@ -31,6 +31,27 @@ accessible name of its own, so `label` is required:
 <kt-button icon="x" label="Close" variant="secondary-no-bg"></kt-button>
 ```
 
+## Running an action
+
+`run()` takes an async action and shows how it went: busy while it runs —
+clicks ignored, the focus kept — then a tick, or a shake and an alert if it
+throws. Two seconds later the button is back at rest. `done-label` and
+`failed-label` replace the label meanwhile, and are announced.
+
+```html
+<kt-button id="send" icon="send" done-label="Sent" failed-label="Not sent">Send</kt-button>
+<script>
+  send.addEventListener('click', () => send.run(() => api.send(message)));
+</script>
+```
+
+It resolves with what the action resolved with and rejects with what it threw,
+so the caller still handles the error. A second call while one runs gets the
+same promise. A `send` plane turns into the spinner itself while it waits —
+its outline drawn round into a turning arc — and back into the plane, which
+flies off to the top right; other icons give way to a spinner, and fade. Under
+reduced motion only the label and icon change.
+
 ## Forms
 
 A button inside a shadow root is invisible to the enclosing form, so

package/dist/docs/kt-chat-message.md

@@ -0,0 +1,68 @@
+# `<kt-chat-message>`
+
+One message of a conversation with an assistant.
+
+```html
+<kt-chat-message from="user" name="Dana">What changed this week?</kt-chat-message>
+
+<kt-chat-message name="Northwind AI" time="09:41" datetime="2026-10-04T09:41">
+  <p>Revenue rose 12%, led by three new Team plans.</p>
+  <kt-button slot="actions" size="small" variant="text" icon="copy">Copy</kt-button>
+</kt-chat-message>
+```
+
+## Who wrote it
+
+`from="assistant"`, the default, sets the reply beside its avatar as text on
+the page: a reply is often long, and a bubble around paragraphs, lists and code
+only crowds them. `from="user"` puts a person's message in a bubble on the far
+side, short and clearly theirs.
+
+`name` names the message for a screen reader and draws the avatar's initials;
+`avatar` gives it a picture, and the `avatar` slot replaces it altogether — an
+icon, a logo.
+
+## Thinking and streaming
+
+```html
+<kt-chat-message name="Northwind AI" thinking></kt-chat-message>
+<kt-chat-message name="Northwind AI" streaming>Revenue rose</kt-chat-message>
+```
+
+`thinking` shows three dots — and says "Thinking…" to a screen reader — in
+place of the content, until the reply has a word of its own. `streaming` marks
+the end of a reply still arriving with a caret. Both set `aria-busy` on the
+message, and both hold still under reduced motion.
+
+## Content
+
+The message is the default slot. Render markdown into it as you would anywhere
+else; the first and last child lose their outer margins so a paragraph sits
+flush in the bubble.
+
+## Accessibility
+
+An `<article>` named by `name`. The time is a `<time>`, with `datetime` for the
+machine-readable moment. Actions in the `actions` slot stay visible: a control
+that appears only on hover cannot be reached by touch, and is hard to find from
+the keyboard. Put the messages in a list or a log, and announce new ones from
+there — a message cannot know it is the newest.
+
+## API
+
+| Property    | Attribute   | Type                    | Default       |
+| ----------- | ----------- | ----------------------- | ------------- |
+| `from`      | `from`      | `'assistant' \| 'user'` | `'assistant'` |
+| `name`      | `name`      | `string`                | `''`          |
+| `avatar`    | `avatar`    | `string`                | `''`          |
+| `time`      | `time`      | `string`                | `''`          |
+| `datetime`  | `datetime`  | `string`                | `''`          |
+| `thinking`  | `thinking`  | `boolean`               | `false`       |
+| `streaming` | `streaming` | `boolean`               | `false`       |
+
+| Part      | Description         |
+| --------- | ------------------- |
+| `base`    | The `<article>`     |
+| `bubble`  | A person's bubble   |
+| `content` | The message         |
+| `meta`    | The author and time |

package/dist/docs/kt-color-picker.md

@@ -0,0 +1,67 @@
+# `<kt-color-picker>`
+
+A colour, chosen from swatches or set freely: a label's colour, a theme's
+accent, a chart series.
+
+```html
+<kt-color-picker label="Label colour" name="colour" value="#1f6feb"></kt-color-picker>
+```
+
+## Swatches
+
+The swatches are Kanto's accents until `swatches` gives others — a list of
+`{ value, label? }`, each a hex colour and the name a screen reader says for it:
+
+```js
+picker.swatches = [
+  { value: '#e11d48', label: 'Rose' },
+  { value: '#f59e0b', label: 'Amber' },
+  { value: '#10b981', label: 'Emerald' },
+];
+```
+
+They are a radio group: a click picks one, the arrows move and pick, wrapping,
+and the chosen one wears a ring in its own colour.
+
+## Any colour
+
+Beside the swatches, the free colour: a swatch that opens the system's own
+picker, and a hex field that takes a colour once it is a whole one — `#e11d48`,
+`e11d48` or `#e14`, all read as `#ee1144`'s spelling, `#rrggbb` in lower case.
+The free swatch takes the colour when it is none of the presets.
+`no-custom` keeps to the swatches.
+
+## Forms
+
+A form control, submitted as `#rrggbb` under `name`, reset to its first
+`value` with the form, disabled with a disabled fieldset. `kt-change` fires as
+the colour changes, from a swatch, the picker or the field.
+
+## Accessibility
+
+A radio group named by `label`, each swatch named by its colour's `label` — a
+person who cannot tell the swatches apart by sight hears "Blue, radio button,
+checked". The system picker and the hex field are named "Custom colour" and
+"Hex code", translated through `setStrings` as `customColour` and `hexColour`.
+
+## API
+
+| Property   | Attribute   | Type              | Default         |
+| ---------- | ----------- | ----------------- | --------------- |
+| `value`    | `value`     | `string`          | `''`            |
+| `swatches` | —           | `KtColorSwatch[]` | Kanto's accents |
+| `label`    | `label`     | `string`          | `''`            |
+| `name`     | `name`      | `string`          | `''`            |
+| `disabled` | `disabled`  | `boolean`         | `false`         |
+| `noCustom` | `no-custom` | `boolean`         | `false`         |
+
+| Event       | Detail              |
+| ----------- | ------------------- |
+| `kt-change` | `{ value: string }` |
+
+| Part       | Description              |
+| ---------- | ------------------------ |
+| `swatches` | The radio group          |
+| `swatch`   | One swatch               |
+| `custom`   | The free colour's swatch |
+| `hex`      | The hex field            |

package/dist/docs/kt-command-palette.md

@@ -0,0 +1,99 @@
+# `<kt-command-palette>`
+
+The palette a product opens on Cmd+K: every action and page, a few keystrokes away.
+
+```html
+<kt-command-palette></kt-command-palette>
+```
+
+```js
+palette.commands = [
+  { id: 'new-invoice', label: 'New invoice', group: 'Create', shortcut: 'mod i' },
+  { id: 'new-customer', label: 'New customer', group: 'Create', keywords: ['client'] },
+  { id: 'settings', label: 'Open settings', group: 'Navigate', icon: 'settings' },
+  { id: 'export', label: 'Export as CSV', group: 'Actions', disabled: true },
+];
+palette.addEventListener('kt-select', (e) => run(e.detail.id));
+```
+
+## Opening it
+
+Cmd+K on a Mac, Ctrl+K elsewhere, opens and closes it from anywhere on the
+page — inside a field too, as people expect. `hotkey` sets another letter;
+`hotkey=""` turns the shortcut off, for a page that opens it from a button of
+its own (`palette.open = true`). Each opening starts from an empty search.
+
+## Finding a command
+
+Typing narrows the list. Every word typed must appear, in any order, in the
+command's label, one of its `keywords` or its `group`, ignoring case and
+accents — "client" finds New customer, "preferences" finds Préférences. What
+remains ranks by how it matched:
+
+1. a label that starts with the search;
+2. a label in which each word starts a word;
+3. a label that holds the search anywhere;
+4. a match on a keyword or the group only.
+
+Commands that tie keep the order you gave them, so the list reads the way you
+wrote it. A disabled command stays listed — its absence would be a mystery —
+and cannot be run.
+
+## Keyboard
+
+| Key          | Does                                                           |
+| ------------ | -------------------------------------------------------------- |
+| `↑` / `↓`    | the previous or next command, skipping disabled ones, wrapping |
+| `Home`/`End` | the first or last command                                      |
+| `Enter`      | runs the active command, and closes                            |
+| `Escape`     | closes, and gives the focus back to where it was               |
+
+A click runs a command too; a click outside the panel closes it.
+
+## Commands
+
+```ts
+interface KtCommand {
+  id: string;
+  label: string;
+  group?: string; // the heading it is listed under
+  icon?: string; // a Lucide name
+  keywords?: string[]; // other words it answers to
+  shortcut?: string; // keys shown beside it, as <kt-kbd keys> takes them
+  disabled?: boolean;
+}
+```
+
+Groups appear in the order their first command does. A shortcut is only shown:
+binding it is the application's work.
+
+## API
+
+| Property      | Attribute     | Type          | Default           |
+| ------------- | ------------- | ------------- | ----------------- |
+| `commands`    | —             | `KtCommand[]` | `[]`              |
+| `open`        | `open`        | `boolean`     | `false`           |
+| `hotkey`      | `hotkey`      | `string`      | `'k'`             |
+| `placeholder` | `placeholder` | `string`      | from `setStrings` |
+
+| Event       | Detail                               |
+| ----------- | ------------------------------------ |
+| `kt-select` | `{ id: string, command: KtCommand }` |
+| `kt-open`   | —                                    |
+| `kt-close`  | —                                    |
+
+| Part     | Description        |
+| -------- | ------------------ |
+| `dialog` | The `<dialog>`     |
+| `input`  | The search field   |
+| `list`   | The scrolling list |
+| `footer` | The keyboard hints |
+
+## Accessibility
+
+Built on the native `<dialog>`: the top layer, focus containment and the inert
+page come from the platform. The field is a `combobox` over a `listbox`; the
+active command is its `aria-activedescendant`, so a screen reader reads each
+command as the arrows reach it, and each group is a `group` named by its
+heading. The focus goes to the field on opening and back to where it was on
+closing.