Changelog

14/10/2025

• New cloud-offline icon

25/07/2025

• Added password input with toggle visibility to FormInput component - eye icon toggles between password/text display while preserving input value

14/07/2025

• Added loading state to /progress-bar

11/07/2025

• Progress bar component /progress-bar

25/04/2025

• Added controller 7 segment display icons

16/04/2025

• Archived requested pages
• Updated /scene-configured page
• Updated /remote-controller-atw-3x2-grid page
• Updated /remote-controller-atw-disabled page
• Disabled state for presets component

14/03/2025

• New page /product-selection

10/12/2024

• Fixed clipped badge icon on device card, please see new HTML structure (wrapping the title in a <div class="device-card__title-content">TITLE</div> element) - /dashboard

02/12/2024

• Update /select-product page with shared home example
• Update /scene-configured page with slimmer layout to fit more in
• New users icon

23/10/2024

• Updates to welcome screen, removed pagination dots, changed order of buttons, improved UI to fit on smaller devices
• Update to dashboard page to prevent really long titles from wrapping
• New page /dashboard-empty
• New page /temperature-control-disabled

20/08/2024

• Fixed form checkbox alignment issues

09/08/2024

• Added white button on welcome page

31/07/2024

• Remove cursor-pointer classes for consistency

30/07/2024

• Update /schedule page to make entire row clickable
• Update /welcome page with updated design

17/04/2024

• New vane icon

16/04/2024

• Hover/tap states for action tiles
• Gradient on temperature controller now scrolls with the numbers
• 0.5 range on temperature widget
• Story controls for action tile, highly recommend looking at this
• Fixed alignment on screen controls title component
• Odd items are now centre aligned in the grid, rather than left aligned

12/04/2024

• Initial version of temperature controller, we highly recommend setting up a meeting so we can run you through the changes and hand it over.
• Video demo available here, please watch for more info
• PLEASE SEE THE COMMIT FOR MORE DETAIL
• Icons will now start to use currentColor, this means that they will need to have a colour class set using text-mel-orange as an example. If you spot any icons appearing as black, please check there is a text colour class added.
• New page at /temperature-v3
  • This is a fully interactive example, as there are just too many states to create static screens for every variation
• New temperature controller animations, this uses CSS scroll animations, rather than relying on javascript.
• We still need to update this with new icons, next week once Tim is back.
• We also still need to align the grid items, so that odd numbers items are centered, rather than left aligned
• The drawer is using Vaul, a suitable alternative will have to be used for Blazor

30/03/2024

• Added /estimated-energy usage page
• Added example interactivity + animation

05/03/2024

• Interactive day picker component
• Example usage on schedule edit modal

12/02/2024

• New classes for coloured values:
  • .state-indicator--cool
  • .state-indicator--heat
  • .state-indicator--dry
  • .state-indicator--auto
  • .quick-controls__label--heat
  • .quick-controls__label--dry
  • .quick-controls__label--auto
  • .quick-controls__label--cool

07/02/2024

• Added /login page

19/01/2024

• Fixed incorrect layer of wi-fi-interface-factory-reset svg

18/01/2024

• Example of purple temperature control page
• Example of green/dry temperature control page

17/01/2024

• Reworked screen controls component, see this commit for more information, or examples for new div structure and new classes
• Replaced SVGs on:
  • /wps-or-ap page
  • /connect-wifi-adapter page
  • /factory-reset page
  • /factory-reset-alt page

10/01/2024

• Added /edit-home-alt page
• New equipment list component - https://melcloud-home.pages.dev/sb/#/story/src-components-equipmentlist-equipmentlist-story-svelte?variantId=_default

09/01/2024

• Happy New Year! 🎉
• Updated /menu page
• Added /sub-menu page
• Added /sub-menu-2 page
• Added /authorized-apps page

18/12/2023

• New thumbnail icons /sb/#/story/src-components-icons-icons-story-svelte?variantId=src-components-icons-icons-story-svelte-3

05/12/2023

• Updated /wps-mode-alt page
• Updated /dashboard page with simplified states for ATW

01/12/2023

• Updated /wps-mode page
• Updated /wps-mode-alt page
• New /wps-connection page
• New /wps-connection-alt page

30/11/2023

• New /select-product2 page
• Updated /scan-qr page

17/11/2023

• New /share-user-list page
• New /share-user-list-empty page
• New /share-system page
• New /shared-system page
• New /share-cancel page
• New /shared-cancel page
• New /share-cancel-invitee page
• New /shared-cancel-invitee page
• New /share-invitee-accept page

15/11/2023

• New Badge component - /sb/#/story/src-components-badge-badge-story-svelte?variantId=src-components-badge-badge-story-svelte-0

09/11/2023

• Error styles for form checkboxes - /sb/#/story/src-components-formcheckbox-formcheckbox-story-svelte?variantId=src-components-formcheckbox-formcheckbox-story-svelte-2

07/11/2023

• New SVG icons for LEDs, label and interface - /sb/#/story/src-components-icons-icons-story-svelte?variantId=src-components-icons-icons-story-svelte-1

31/10/2023

• Fixed text colour dropdown on the select-language page

25/10/2023

• New section for room icons - Room icons

18/10/2023

• New icons for systems
• Recreated product icons and QR icons, please update

27/09/2023

• New loading spinner screen + component
  • Screen example - /loading
  • Spinner Story - Story
• New skeleton screen + component
  • Screen example - /skeleton
  • Story - Story

26/09/2023

• New warning icon
• Updated /checking-configuration-failure page
• Updated /delete-home page + modal

19/09/2023

• New icons for QR codes
• HTML typeahead input example

12/09/2023

• Updated Welcome page to reduce the height, to prevent scrolling on mobile. Please see the commit for more details of the changed classes, as this will need to be replicated

07/09/2023

• Report modal example - /report-modal/
• Updated CSS styles - Please update

04/09/2023

• New report icons
• New product icons
• Added missing hall and gym icons
• Remove country selection from /select-language page

01/09/2023

• Added long form example
• Updated CSS styles - Please update

16/08/2023

• New HTML structure for /welcome page
• New HTML structure for /select-language page
• New HTML structure for /create-account page

15/08/2023

• Textarea error state - Example
• Textarea character count - Example

09/08/2023

Includes breaking changes

• Rename all instances of “building” to “home”
• All icons have been replaced with SVGs, rather than the icon font. The icon font is still included, but will not be updated going forwards.
  • Please see the icon page for the complete icon collection.
  • It is recommended to create an icon component, to keep the icon markup consistent across the application.
• New icons are now available, including new room icons, please see the link above
• Renamed save/continue buttons to “Next” buttons, apart from at the end of a flow, where it is the action name, e.g. “Send”
• Storybook has been replaced with Histoire, available at the same link
• New feedback screen, available at /feedback

01/08/2023

• Renamed more building instances to home

26/07/2023

• Fixes for .form-controls in modals

23/07/2023

• Changed rotation on swing icon (change .rotate-90 class to .rotate-[315deg])

23/06/2023

• Error states on form inputs and form selects
  • Form input
  • Form select

21/06/2023

• BREAKING: Change vane component to be able to activate multiple vane positions at once
  • Example here
  • This switches from using data-position="2", to multiple classes, for each active vane, with .vane--active-1, .vane--active-3 etc

16/06/2023

• Added .dashboard-controls__navigation--fade class to control whether the overscroll fade is visible or not
• Fixed terms of use background cutting off

13/06/2023

• Internal Updated prototype framework
• Added new changelog page at /changelog

08/06/2023

• Updated Welcome Page
• Split out select language page into own screen (still available from welcome page by clicking button)
• Renamed Building to Home
• Edit building page
• Delete building confirmation modal
• Screens list now has link to each screen, and screen name below preview

01/06/2023

• Use Roboto from Google fonts

17/05/2023

• Updated structure from dashboard home tabs, please see this commit for more information, as well as the file at src/components/DashboardControls/DashboardControls.svelte

15/05/2023

• Added max-width on desktop devices, to provide a mobile layout
• Added my homes page - https://zen-keller-e90ed6.netlify.app/my-homes/

03/05/2023

• Fixed issues with <details> elements on Safari + iOS

25/04/2023

• Tariff form page - https://zen-keller-e90ed6.netlify.app/tariff-form/

13/04/2023

• Settings page - https://zen-keller-e90ed6.netlify.app/settings/
• Tariff page - https://zen-keller-e90ed6.netlify.app/tariff-details/
• Tariff edit page - https://zen-keller-e90ed6.netlify.app/tariff-edit/
• Tariff delete page - https://zen-keller-e90ed6.netlify.app/tariff-delete/

30/03/2023

• Edit scene page - https://zen-keller-e90ed6.netlify.app/scene-edit/

28/03/2023

• Added country and disable cooling dropdowns to add building page - https://zen-keller-e90ed6.netlify.app/add-building/

10/02/2023

• New Scene configure page - https://zen-keller-e90ed6.netlify.app/scene-configure/
• New Scene configured page - https://zen-keller-e90ed6.netlify.app/scene-configured/
• Delete scenes page - https://zen-keller-e90ed6.netlify.app/scene-delete/
• Edit / delete menu on hover of 3 dots

09/02/2023

• New Scene page - https://zen-keller-e90ed6.netlify.app/new-scene-v2/
• Modal open dashboard example

25/01/2023

• Breaking Change
  • All screens have been adjusted to fit onto an iPhone SE screen. Additionally, iOS padding has been added to the top and bottom of the screen to prevent the address bar from overlapping.
  • Please see this commit for the full details of all changes across each screen

24/01/2023

• Breaking Change
  • Reworked structure of /terms-of-use and /terms-of-use-button pages

19/01/2023

• Major Breaking Change:
  • All pages have been adjusted to fit the height of the screen. This means that either a new .panel__flex and .frame__flex has been added to each screen.
  • Additionally, <div> elements have been added to group the content (internally it uses flex’s space between) positioning, so content that needs to appear at the top of the screen should belong in one div, and footer content in another.
  • Please see this commit for the full details of all changes across each screen
  • Side effects:
    • Existing Building and Confirm location screens - h-full class
    • Request Access Page 3 - Add mx-auto classes to centre align

12/01/2023

• Breaking Change:
  • Please see the new .panel__logo element within the Panel component. This has the .panel__logo--small variation.
  • This removes the logo from within the .panel__wrapper, and places it 1 element higher, please see this commit

11/01/2023

• New Screens:
  • 236. Pending Invite
  • 237. Request Access Page 5
  • 238. Change Ownership
  • 239. Transfer Ownership Confirmation
  • 240. Pending Ownership Request
• New Components:
  • New button style: .btn--gray

04/01/2023

• New Screens:
  • 209. Access Point
  • 205. Connect Wifi Adapter

17/12/2022

• New Screens:
  • 222. Transfer Page 1
  • 229. Transfer Page 2
  • 210. Transfer Page 3
  • 234. Transfer Sent
  • 201. Request Access Page 1
  • 204. Request Access Page 2
  • 233. Request Access Page 3
  • 235. Request Access Page 4
  • 203. Terms of Use
  • 207. Terms of Use - Button

16/12/2022

• New Screens:
  • 133. User Invitation Page 1
  • 219. User Invitation Page 2
  • 220. User Invitation Page 3
  • 223. User Invitation Page 4
  • 224. User Invitation Page 5
  • 230. User Invitation Page 6
  • 231. User Invitation Page 7
  • 211. User Invitation Page 8
• New Components:
  • Form Text Area
  • Options list with arrows
• Changes:
  • New text-left class on the date time field heading, new classes are now:
    • text-xs text-mel-dark-blue font-medium border-b-4 border-mel-dark-blue pb-1 mb-1 uppercase text-left
  • Added readonly to FormInputs on User Invitation Page 7

14/12/2022

• Fixed arrow class name, please rename any occurrences of iconsarrowleft to arrowleft.
• Added back arrow to Panel examples, please see the new divs .panel__header within the .panel__background div, and .panel__titles which should wrap .panel__title and .panel__subtitle
  • Example of this here

25/11/2022

• New Screens:
  • 160. Holiday Mode Times

24/11/2022

• Updated global styles
• Updated icons
• New structure for text inputs, only affects those with icons appended to the input
• New Components:
  • Accordion
  • Form Checkbox
• New Screens:
  • 187. Add SSID
  • 189. Checking Configuration Failure
  • 190. Troubleshoot
  • 191. System Information
  • 192. New Or Replacement
  • 193. Add New System Name
  • 194. New Or Existing Building
  • 195. Add New Building
  • 197. Existing Building
  • 198. Timezone
  • 199. Add Outdoor Model
  • 200. Multisplit
  • 202. Factory Reset - Alt
  • 208. WPS Mode - Alt
  • 226. Confirm Location

23/11/2022

• New Components:
  • New OptionsList
  • RadioList component can switch between checkboxes and radio items
• New Screens:
  • 180. Already Connected
  • 179. Connect Router
  • 181. Factory Reset
  • 178. Scan QR
  • 177. Select Product
  • 184. Test WPS
  • 183. WPS Mode
  • 227. WPS or AP

07/11/2022

• New film icon

05/11/2022

• New FormDropdown component. Similar to FormSelect, but different styling
• New FormAddNewButton component

04/11/2022

• System Selection Screen
  • New RadioList component
• New Scene - Step 1 Page
• New Scene - Step 2 Page
• Delay timer page
• Scene selection page
• Menu page

03/11/2022

• Updated icon pack
• Frost protection + overheat protection

02/11/2022

• Updated icon pack
• Updated mode select screen with dry mode
• Updated the device cards with a holiday mode example

01/11/2022

• New .device-card__states--left and .device-card__states--right divs on device cards, to better help align state items
• New .device-card__main-toggle example, for device wide toggle (turn on and off all zones)
• Added inline toggle switch component (auto / heat now), from screen 173
• Flipped the ordering on temperature control widgets, higher temperatures are now above

23/10/2022

• New class .rounded-lg added to temperature control widgets
• Blue variant for temperature control picker
• New screen: Mini temperature control picker

22/10/2022

• Mini temperature control component

19/10/2022

• Added DeviceCardZonesV2 example to show alternative layout with no icons, and toggle switch by the zone title
• Ability to align the state indicators to the left, e.g for the “heating” state indicator

17/10/2022

• BREAKING: DeviceCard component now has a new .device-card__zone wrapper around the existing .device-card__states div.
  • Padding and spacing will appear to be broken until this is added.
• New .device-card__zone-title div, only required for displaying the zone title
• Replaced the “ON” state indicator text with toggle switch under the label